FOMO Digest #3: JetBrains IDE에서 React를 개발하기 위한 가장 유용한 7가지 기능
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 구성 요소 추출
React의 Zen과 구성 요소 기반 애플리케이션의 promise에 도달하기가 어려우신가요? 아시다시피 구성 요소 기반 애플리케이션을 만들려면 JSX를 이동하고, 필요한 프로퍼티(타입 포함)를 식별하고, 새 구성 요소에 대한 호출에 배치하는 등 많은 지난한 작업이 필요합니다.
이제 모두 IDE에 맡기세요! 먼저 하위 구성 요소로 변환할 JSX를 선택합니다. 그런 다음 Refactor This(다음을 리팩터링) 팝업(^T / Ctrl+Alt+Shift+T)을 사용하고 Extract Component(구성 요소 추출)…를 선택합니다. 이제 이름을 지정하고 클래스 또는 함수로 만들기만 하면 됩니다.
단일 책임 원칙을 준수하고 파일당 하나의 구성 요소를 유지하고 싶나요? Move(이동) 리팩터링을 사용하여 새 구성 요소와 필요한 모든 가져오기, 데이터 및 입력을 별도의 새 파일로 추출할 수 있습니다.
보너스 팁: React 클래스 구성 요소를 기능 구성 요소로 변환했다가 다시 되돌릴 수 있습니다. 구성 요소 정의에서 ⌥Enter / Alt+Enter를 누르고 필요한 액션을 선택하기만 하면 됩니다. 또한 마음이 바뀌면 ‘실행 취소'(⌘Z / Ctrl+Z) 한 번으로 모든 것을 원래대로 되돌릴 수 있습니다.
React 코드 스니펫 사용
JetBrains IDE에는 시간 절약에 도움이 되는 수많은 React 코드 스니펫이 있습니다. React 프로젝트용의 다양한 구문과 코드 블록으로 확장되는 50개 이상의 약어를 사용하면 처음부터 작성해야 할 것이 거의 없습니다.
스니펫을 사용하려면 에디터에서 약어를 입력하고 ⇥ /Tab을 눌러 확장합니다. Insert Live Template(라이브 템플릿 삽입)을 사용하여 스니펫을 추가할 수도 있습니다. ⌘J / Ctrl+J를 누르고 목록에서 삽입하려는 스니펫을 선택합니다.
Preferences(환경 설정)/Settings(설정) | Editor(에디터) | Live Templates(라이브 템플릿)에서 React에 사용 가능한 템플릿의 전체 목록을 찾을 수 있습니다.
보너스 팁: Preferences(환경 설정)/Settings(설정) | Editor(에디터) | File and Code Templates(파일 및 코드 템플릿)으로 이동하고 Code(코드) 탭을 선택하면, IDE가 새 구성 요소에 사용하는 코드 템플릿을 수정할 수 있습니다.
React 프로젝트 탐색
WebStorm 및 기타 JetBrains IDE는 에디터 여백에서 태그 트리에 대한 이동 경로와 다채로운 강조 표시를 사용하여 JSX 태그와 같은 심볼을 탐색하는 데 도움을 줍니다.
또한 중괄호 {} 안의 메서드 선언이나 JavaScript 표현식으로 쉽게 이동할 수 있습니다. 메서드나 표현식을 선택하고 ⌘B / Ctrl+B를 누르기만 하면 됩니다.
보너스 팁: 구성 요소의 정의를 보기 위한 ⌥Space / Ctrl+Shift+I 및 구성 요소의 빠른 문서를 보기 위한 F1 / Ctrl+Q와 같이 React에서 탐색을 위한 몇 가지 손쉬운 단축키가 있습니다.
코드에서 문제 찾기
전체 React 프로젝트에서 작동하는 JavaScript 및 HTML용 검사 기능이 광범위하게 마련되어 있습니다.
예를 들어, IDE는 사용되지 않는 변수 및 함수, 닫는 태그의 누락, 구문 누락 등에 대해 경고합니다. 또한 정리하는 작업에도 도움을 줄 수 있습니다. 예를 들어 Reformat Code(코드 서식 다시 지정)(⌥⌘L / Ctrl+Alt+L)를 실행할 때 누락된 세미콜론을 추가하고, Optimize Imports(import 문 최적화)(^⌥O / Ctrl+Alt+O)를 사용하여 사용하지 않는 import 문을 정리하도록 IDE를 구성할 수 있습니다.
보너스 팁: Preferences(환경 설정)/Settings(설정) | Editor(에디터) | Inspections(검사)에서 검사를 사용자 지정할 수 있습니다. 원하지 않는 항목을 비활성화하거나 심각도 수준을 경고에서 오류로 또는 그 반대로 변경합니다.
ESLint 통합 설정
WebStorm 및 기타 JetBrains IDE는 ESLint와 통합되므로 입력할 때 에디터에서 보고되는 경고와 오류를 볼 수 있습니다. React 구성 요소에 대해 표시 이름이 설정되지 않았거나 위험한 프로퍼티가 사용되면 경고를 받을 수 있습니다. 또한 ESLint에서 발견된 문제는 Problems(문제) 뷰에서 전역으로 보고됩니다.
ESLint를 활성화하려면 Preferences(환경 설정)/Settings(설정) | Languages & Frameworks(언어 및 프레임워크) | JavaScript | Code Quality Tools(코드 품질 도구) | ESLint로 이동합니다.
보너스 팁: ⌘S / Ctrl+S를 사용하여 프로젝트를 저장할 때마다 ESLint를 실행하거나 실행/디버그 구성을 시작하거나, IDE를 닫거나, 버전 관리 작업을 수행할 때 자동으로 실행되도록 설정할 수 있습니다. 이를 활성화하려면 Preferences(환경 설정)/Setting(설정)의 ESLint 섹션에서 옵션을 선택하면 됩니다.
도구 창에서 디버그 시작
고급 팁: 애플리케이션이 실행되는 어느 위치에서든 세션 디버그를 시작할 수 있습니다. 애플리케이션이 localhost에서 실행 중인 경우 기본 제공 터미널이나 Run(실행) 도구 창에서 디버거를 시작할 수도 있습니다.
Run(실행) 및 Terminal(터미널) 도구 창에는 애플리케이션이 실행 중인 URL이 표시됩니다(기본적으로 http://localhost:3000/). ⌘⇧ / Ctrl+Shift를 누른 상태에서 도구 창에서 URL 링크를 클릭합니다. IDE가 디버그 세션을 시작합니다.
FOMO 다이제스트의 이번 글을 즐겁게 읽고, 새로운 팁을 알게 되셨길 바랍니다. 배워보고 싶은 다른 기능이나 다이제스트 연재물에 소개되었으면 하는 기능이 있다면 아래 댓글란에서 공유해 주세요.
WebStorm 팀 드림
게시물 원문 작성자
Subscribe to WebStorm Blog updates
