WebStorm 및 기타 JetBrains IDE에서 가장 유용한 생산성 향상 도구를 한데 모아보는 FOMO 요약 시리즈의 세 번째 편에 오신 것을 환영합니다. 오늘은 React 작업을 위한 몇 가지 멋진 기능을 다루겠습니다. 이러한 모든 기능은 JetBrains IDE에서 바로 사용할 수 있습니다. 복사 및 붙여넣기 시 HTML 'React화' 많은 사용자에게 사랑받는 작지만 매우 유용한 기능부터 시작하겠습니다. #WebStormTip – Pasting HTML into a React project will convert `class` into `className` 🤯 — alistair (@alistaiiiir) February 15, 2021 바로 그렇습니다! HTML 코드를 React 구성 요소에 붙여넣을 때마다 적절한 React 규칙을 따르도록 IDE가 자동으로 이를 변환합니다. 이 예에서 class는 className으로 변환되었습니다. IDE는 이벤트 핸들러도 변환합니다. 예를 들어 onclick을 onClick으로 변경합니다. 자세한 내용은 관련 문서의 JSX로 HTML 속성 전달 섹션을 참조하세요. React 구성 요소 추

개발자에게 예전부터 제공해왔던 IdeaVim은 Vim의 강력한 기능을 JetBrains IDE에 확장할 수 있도록 도와주는 플러그인입니다. JetBrains 내에는 IDE를 지원하는 키보드 중심적 에디터로서 두 가지 장점을 모두 제공하기 위해 이 플러그인을 유지 관리하는 전담 팀이 있습니다. Vim은 텍스트를 이동하고 수정할 수 있는 뛰어난 유연성을 제공합니다. 그 덕분에 이 플러그인은 개발자 사이에서 가장 인기 있는 텍스트 에디터 중 하나가 되었습니다. Vim에서는 마우스 없이 빠르게 탐색할 수 있어 매우 효과적으로 텍스트를 편집할 수 있습니다. 이 블로그 게시물에서는 IdeaVim 플러그인과 그 주요 기능은 무엇인지, 그리고 어떻게 사용을 시작할 수 있는지 자세히 살펴보겠습니다. IdeaVim 플러그인 설치하기 IdeaVim 플러그인을 설치하려면 Preferences(환경 설정) / Settings(설정) | Plugins(플러그인)을 클릭하고 Marketplace 탭에서 IdeaVim을 검색하면 됩니다. 여기에서 플러그인을 설치하세요. 설치가 완료되면 이제 IDE에서 Vim을 사용할 준비가 되었습니다. IdeaVim으로 작업할 때의 주요 차이점 Vim

목차 숙련된 Angular 사용자의 팁 참고하기 효율적인 키보드 활용 IDE 기능을 사용하여 더 빠르게 탐색 전체 검색: ⇧⇧ / Shift+Shift 관련 심볼: ⌃⌘↑ / Ctrl+Alt+Home 최근 파일: ⌘E / Ctrl+E 수동 리팩터링 불필요 이름 변경 리팩터링: ⇧F6 / Shift+F6 자동화 적극 활용하기 자동 가져오기 Angular 구성 요소 생성 코드 검사 사용자가 Angular를 얼마나 잘 알고 있든, Angular에 대해 어떻게 생각하든 관계없이 JetBrains IDE에서는 이 프레임워크를 훨씬 편리하게 사용할 수 있습니다. 오늘은 FOMO 다이제스트 게시물을 통해 WebStorm, IntelliJ IDEA Ultimate, PhpStorm, Rider, PyCharm Professional, GoLand 및 RubyMine 등, JetBrains IDE에서 제공되는 Angular 기능을 설명해 드리겠습니다. 이 글에서 다룰 내용은 다음과 같습니다. 숙련된 Angular 사용자가 IDE를 설정하고 사용하는 방법 키보드 단축키를 업무 수행의 기반으로 삼는 방법 업무 속도 개선에 도움이 되는 JetBrai

JS 개발을 위한JetBrains IDE의새로운 기능 목차 Code With Me 종속성 업데이트를 위한 새로운 검사 package.json의 'imports' 및 'exports' 필드 지원 기본 HTML 미리보기 및 저장 시 다시 로드 .js와 .d.ts 파일 간의 매핑 개선 private 필드에 대한 이름 변경 리팩터링 Angular 구성 요소 추출 리팩터링 Vue 및 React 속성에 대한 타입 검사 'require' 문 자동 가져오기 새로워진 Deno 통합 FOMO에 대해 들어본 적이 있으신가요? Fear Of Missing Out, 놓치는 것을 걱정한다는 뜻이죠. WebStorm 및 기타 JetBrains IDE에는 너무 많은 기능이 있어 개발자로서의 삶을 더 쉽게 만들어 줄 수 있는 멋진 생산성 도구를 간과하기 쉽습니다. 그래서 새로운 형식의 블로그를 준비했습니다. WebStorm의 가장 유용한 생산성 향상 기능을 한 곳에 모아놓은 새로운 시리즈인 FOMO 다이제스트를 소개합니다. 이 블로그 시리즈는 다른 JetBrains IDE에서 JavaScript 및 관련 기술로 작업하는 분들에게도 도움이 될 것입니다. PhpStorm,

끝없이 이어지는 코드 검토와 디버그 작업에 진저리가 날 때면, 이후 개발 단계에서 오류가 발생할 염려 없이 지루한 작업을 자동화할 방법을 궁리해보셨을 겁니다. 자동화에 관심이 있다면 서버 측 정적 분석을 자세히 알아보세요. 스마트 IDE 시대에 프로젝트 수명 주기에서 한 단계를 추가하는 것의 이점은 무엇일까요? 정적 분석 도구에 위임할 수 있는 작업은 무엇일까요? 이 블로그 글에서 질문에 대한 답을 찾아보세요! 코드 검토 자동화안심하고 외부 기여 활용프로젝트 계획 시간 단축프로젝트 수명 주기에 Qodana를 사용하여 정적 분석 수행 (more…)

WebStorm이 무려 11년 전에 출시되었다는 게 믿어지시나요? 저희도 믿어지지가 않아요. 출시 이후 수많은 ‘WebStorm 튜토리얼’ 및 ‘WebStorm 사용 방법’ 자료를 올렸지만, 흥미로운 내용은 한 번도 알려드리지 못했습니다. 이번 게시물에서 WebStorm과 관련하여 저희 팀 전원이 함께 엄선한 10가지 사실을 읽어보세요. 이 글을 읽고나서 여러분께서 미소를 짓거나, 추억을 회상하거나 혹은 JetBrains 팀 합류를 고려하실 수 있는 기회가 되었으면 좋겠습니다. 그럼 시작해볼께요! 모든 것은 Web IDE에서 시작되었습니다 WebStorm의 역사를 먼저 살펴보겠습니다. 최초의 JetBrains IDE는 IntelliJ IDEA였습니다. 다음으로는 여러 언어를 지원하는 IntelliJ IDEA에서 더 개선된 Ruby 및 Rails 개발 경험을 선사하는 RubyMine이 출시되었습니다. 이후 많은 사용자가 IntelliJ IDEA와 RubyMine을 HTML, CSS 및 JavaScript 에디터로만 사용한다는 점에 주목하게 되었습니다. 이러한 사용자의 요구사항을 충족하고자 웹 개발 전용 IDE를 구축하기로 결정했습니다. 처음에는 창의적인 아이디

WebStorm을 사용하면 모든 핵심 기능을 별도 설정없이 바로 작동하므로 추가 플러그인을 설치하지 않고도 바로 작업할 수 있습니다. 하지만 코딩 도구에 좀 더 개성적인 느낌을 주고 싶거나 추가 기능이 필요하다면 어떻게 해야 할까요? 커뮤니티의 유능한 인재들 덕분에 이러한 경우에 도움이 되는 다양한 플러그인이 준비되어 있습니다. 이 블로그 게시물에서는 JetBrains IDE용으로 개발된 가장 편리한 플러그인 몇 가지를 살펴보겠습니다. 이러한 모든 플러그인은 PhpStorm 및 IntelliJ IDEA Ultimate와 같은 다른 JetBrains IDE와 호환되며 Preferences/Settings(기본 설정/설정) | Plugins(플러그인)에서 설치할 수 있습니다. 물론, 이것이 플러그인의 전부는 아니고 JetBrains 저장소에도 수백 개의 플러그인이 있습니다. 여기에서 언급하지 않았지만, 여러분의 마음에 드는 플러그인이 있다면 댓글에 플러그인을 알려 주세요. 테마 플러그인 디폴트 IDE 테마외에 다른 테마를 찾고 계신가요? 그렇다면, 여기에 선택할 수 있는 다양한 맞춤 테마가 있습니다. 가장 인기있는 테마에는 Material Theme UI, O

WebStorm을 사용하면 일상적으로 작업에 드는 시간을 획기적으로 줄일 수 있습니다. WebStorm은 거의 모든 작업에 대한 단축키를 제공하고 있습니다. 모든 단축키를 외우는 것은 불가능하지만, 자주 쓰는 몇 가지 단축키만 알아두어도 많은 도움이 된답니다. 아래에 필수 단축키를 소개합니다. 이 단축키를 사용하여 생산성을 즉시 향상 시켜 보세요. 이 포스트에서 소개하는 모든 키 조합은 macOS 및 Windows/Linux의 디폴트 키맵에서 가져온 것입니다. Preferences/Settings(환경 설정/설정) | Keymap(키맵) 에서 키맵 구성을 임의로 변경할 수도 있습니다. Search Everywhere(전체 검색): ⇧⇧ / Shift+Shift 이 포스트에서 가장 유용한 단축키를 하나만 골라야한다면 Search Everywhere(전체 검색)일 것입니다. 이름에서 알 수 있듯이 프로젝트의 모든 곳에서 파일, 액션, 클래스 또는 심볼을 검색 할 수 있으며, 일치하는 모든 항목을 한 곳에 모아서 보여 줍니다. 필요한 탭을 클릭하거나 ⇥ / Tab 을 눌러 검색 범위를 좁힐 수 있습니다. gif에 표시된 것처럼 팝업에서 바로 일부 액션을 켜거

JavaScript는 25년 전인 1995년 12월 4일에 처음 공개되었습니다. 처음에 단 10일 만에 개발된 JavaScript는 현재 전 세계에 수백만 명의 개발자가 매일 사용하고 있는 가장 인기있는 프로그래밍 언어가 되었습니다. JavaScript 팬인 여러분과 이 기념일을 함께 축하하고 싶습니다! 오랫 동안 끊임없이 JavaScript를 지원해 주심에 대한 감사의 표시로 특별한 것을 준비했습니다. JavaScript 역사에서 가장 주목할 순간을 기록한 타임라인을 살펴보고 이 언어가 오늘날의 모습으로 변하는 과정에서 어떤 도움이 있었는지 확인해 보세요. 타임라인 제작에 도움을 주신 모든 분들께 진심으로 감사드립니다! 타임라인의 모든 데이터는 GitHub에 공개되어 있으므로 자유롭게 사용하실 수 있습니다. 오류를 발견하셨다면 수정사항과 함께 풀 리퀘스트를 생성해 주세요. 이와 더불어, 앞으로 25시간 동안 개인 WebStorm 구독 50% 할인 혜택을 제공합니다. 할인 혜택을 누리고 JavaScript 25주년을 함께 축하해 주세요! 이 혜택은 2020년 12월 4일, 오후 11시(한국 표준시 기준)까지 유효합니다. 자세한 내용은 아래의 자주 묻는

PhpStorm 및 IntelliJ IDEA Ultimate와 같은 다른 JetBrains IDE에는 데이터베이스 도구 및 SQL에 대한 기본 지원 기능이 있다는 사실을 이미 알고 계실 것입니다. 이 지원은 해당 IDE에 포함되어있는 데이터베이스 플러그인을 통해 제공됩니다. WebStorm과 함께 데이터베이스 플러그인을 번들로 제공하지는 않지만 DataGrip 또는 All Products Pack 구독을 이용해 데이터베이스와 SQL 지원을 받을 수 있는 방법은 있었습니다. 이 방법을 이용하면 데이터베이스 플러그인을 설치하고 WebStorm 내에서 이 플러그인을 사용할 수 있습니다. 이는 더 비싼 DataGrip 또는 All Products Pack 구독 비용을 지불해야 하므로 최적의 방법은 아니었습니다. 더 나은 방법을 찾아달라는 여러분의 요청이 있었고, 결국 그 방법을 찾아냈습니다! 2020.2 버전부터는 데이터베이스 플러그인을 구독하여, 합리적인 가격으로 WebStorm 내에서 사용할 수 있습니다. 플러그인을 사용하는 방법 플러그인을 설치하려면, Preferences/Settings(환경 설정/설정) | Plugins(플러그인)으로 이동한 다음 Mar

2020년의 두 번째 주요 업데이트인 WebStorm 2020.2 버전이 출시되었습니다! Prettier를 디폴트 서식 지정 도구로 사용할 수 있는 옵션, Vue에 대한 동급 최강의 지원(이제 그렇게 말할 수 있습니다!), JavaScript에 지원되는 새로운 인텐션, GitHub 풀 리퀘스트에 대한 완벽한 지원 등을 제공합니다. WebStrom 2020.2 다운로드 하기 WebStorm 2020.2의 새로운 기능을 다 읽어볼 시간이 부족하다면 이 동영상에서 JetBrains 개발자 애드버킷인 Paul Everitt이 소개하는 주요 변경 내용을 확인해보세요 상세한 내용을 살펴보시려면 이 글을 계속 읽어주세요! 새로운 기능과 개선 사항은 다음 범주로 나뉩니다. 프레임워크 및 기술: Prettier를 디폴트 서식 지정 도구로 사용할 수 있는 옵션, Vuex.js를 위한 다양한 개선 사항, WSL 2에 설치된 Git 지원 JavaScript 및 TypeScript: 새로운 스마트 인텐션, 렌더링된 JSDoc 주석, ML 지원 코드 완성, 디버거 개선 사항 HTML 및 스타일시트: 향상된 Sass 모듈 시스템 지원, WebP 지원, querySelector 메소드

WebStorm 학습 리소스 목록이 계속해서 풍성해지고 있습니다! 최근 공개된 학습 플러그인 및 WebStorm 가이드 외에도 WebStorm의 기초적 내용을 이해하는 데 도움이 되는 동영상 시리즈를 제작하느라 여념이 없습니다.이번 시리즈의 첫 동영상을 공유하게 되어 기쁩니다! 이 동영상에서는 WebStorm의 주요 UI 요소를 살펴보고 특정 작업을 처리하는 데 어떤 도움을 주는지 설명합니다. 아래에는 동영상에 소개된 내용이 모두 나와 있습니다. 이 정보는 동영상보다는 읽는 것이 편한 분들을 위해 여기에 수록했으며 추가 정보를 찾아볼 수 있는 링크도 제공합니다. 참고: 이 동영상을 최대한 최신 상태로 유지하기 위해 WebStorm 2020.2 EAP를 이용해 녹화했습니다. Version 2020.1에는 Inspections(검사) 위젯과 Problems(문제) 도구 창이 없습니다. 편집기는 WebStorm을 열 때 거의 예외 없이 보게 되는 첫 화면입니다. 여기서 코드 작업을 하게 됩니다. 오른쪽에는 Insepctions(검사) 위젯이 있는데, 여기서 현재 파일의 코드에서 발견된 모든 이슈를 살펴보고 탐색(화살표 또는 F2 사용) 할 수 있습니다. 현재