Tips & Tricks

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,

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에 표시된 것처럼 팝업에서 바로 일부 액션을 켜거