안녕하세요, JetBrains 코리아입니다.

오늘의 JetBrains 소식, 'FOMO Digest #2: JetBrains IDE에서 Angular 개발을 위한 5가지 팁'에 대한 주제로 찾아왔습니다 :)

사용자가 Angular를 얼마나 잘 알고 있든, Angular에 대해 어떻게 생각하든 관계없이 JetBrains IDE에서는 이 프레임워크를 훨씬 편리하게 사용할 수 있습니다.

오늘은 FOMO 다이제스트 게시물을 통해 WebStorm, IntelliJ IDEA Ultimate, PhpStorm, Rider, PyCharm Professional, GoLand 및 RubyMine 등, JetBrains IDE에서 제공되는 Angular 기능을 설명해 드리겠습니다.

Agenda

● 숙련된 Angular 사용자가 IDE를 설정하고 사용하는 방법

● 키보드 단축키를 업무 수행의 기반으로 삼는 방법

● 업무 속도 개선에 도움이 되는 JetBrains IDE 기능

● Angular 구성 요소 추출 및 심볼 이름 변경 방법

● 일상에서 시간 절약을 위한 팁

이 게시물에서 소개하는 모든 키 조합은 macOS 및 Windows/Linux의 디폴트 키맵에서 가져온 것입니다. 지정된 디폴트 단축키가 없는 경우 직접 지정할 수 있습니다.

숙련된 Angular 사용자의 팁 참고하기

숙련된 Angular 사용자가 IDE를 설정하는 방식을 엿보고, 사용하는 기능을 배우고 싶으셨다면 Chau Tran이 최고의 팁과 트릭을 공유하는 동영상을 확인하세요.

효율적인 키보드 활용

IDE에서 거의 모든 액션의 키보드 단축키를 찾을 수 있습니다. Preferences(환경 설정)/Settings(설정) | Keymap(키맵)으로 이동하여 단축키를 확인해 보세요. 사용하기에 편리하지 않게 설정된 단축키가 있는 경우 원하는 대로 사용자 지정할 수 있습니다.

예를 들어, Terminal(터미널) 도구 창을 여는 단축키를 더 기억하기 쉬운 단축키로 바꾸는 방법은 아래와 같습니다.

보너스 팁: Key Promoter X 플러그인 설치하면 작업 중 필수 단축키를 익힐 수 있습니다.

IDE 기능을 사용하여 더 빠르게 탐색

Angular 프로젝트의 규모와 복잡성은 빠르게 증가할 수 있습니다. 이때 도움이 되는 3가지 기능을 아래에서 확인해 보세요.

● 전체 검색: ⇧⇧ / Shift+Shift

기억해야 할 단 한 가지 단축키가 있다면, 그것은 Search Everywhere(전체 검색) 단축키입니다. 이 기능을 사용하면 파일, 액션, 클래스 또는 심볼을 검색하고 모든 일치 항목을 한곳에서 확인할 수 있습니다. 그뿐 아니라 선택자 검색 시에도 활용 가능합니다.

보너스 팁: Search Everywhere(전체 검색)에 텍스트 검색 결과도 포함할 수 있습니다. Preferences(환경 설정)/Settings(설정) | Advanced Settings(고급 설정)로 이동하여 Show text search results in Search Everywhere(텍스트 검색 결과를 전체 검색에 표시) 옵션을 선택하세요.

● 관련 심볼: ⌃⌘↑ / Ctrl+Alt+Home

Angular 프로젝트에서 작업 시, 다른 구성 요소 파일 사이를 이동하는 기능은 매우 유용합니다. ^⌘Up / Ctrl+Alt+Home을 눌러 이 기능을 빠르게 사용할 수 있습니다. 해당 단축키를 누르면 관련 파일 목록이 포함된 Related Symbol(관련 심볼) 팝업이 IDE에 표시됩니다. TypeScript 구성 요소 파일의 경우 해당 파일로 가져온 모든 심볼도 팝업에 표시됩니다.

보너스 팁: Angular CLI QuickSwitch 플러그인을 설치하면 ⌥S / Alt+S 키를 사용하여 한 구성 요소의 다양한 파일 간 전환이 가능합니다.

● 최근 파일: ⌘E / Ctrl+E

⌘E / Ctrl+E 키를 사용하면 최근에 작업한 파일로 돌아가거나 npm 또는 Terminal(터미널) 등의 다양한 도구 창으로 이동할 수 있습니다.

보너스 팁: ⌘[ 및 ⌘](macOS), Ctrl+Alt+왼쪽 방향 키/Ctrl+Alt+오른쪽 방향 키(Windows/Linux) 키를 활용하면 작업 중인 파일을 앞뒤로 탐색하고, 파일뿐 아니라 파일 내의 작업 위치로 돌아갈 수 있습니다.

수동 리팩터링 불필요

JetBrains IDE의 우수한 리팩터링 기능은 잘 알려져 있습니다. 프로젝트 전체에 변경 사항을 적용하려는 경우, 리팩터링 기능은 시간을 단축하는 데 도움이 됩니다.

● Angular 구성 요소 추출: [지정 가능한 단축키]

템플릿에서 Angular 구성 요소를 추출하는 놀라운 리팩터링 기능부터 살펴보겠습니다. 이 기능을 활용하려면 추출할 코드 조각을 선택하고 마우스 오른쪽 버튼으로 클릭하여 컨텍스트 메뉴를 연 후 Refactor(리팩터링) | Extract Component(구성 요소 추출)로 이동합니다.

보너스 팁: 이 리팩터링에 단축키를 지정할 수 있습니다. Preferences(환경 설정)/Settings(설정) | Keymap(키맵)에서 “extract component”를 검색하고 이 액션에 지정할 단축키를 선택합니다.

● 이름 변경 리팩터링: ⇧F6 / Shift+F6

가장 많이 사용되는 리팩터링 중 하나를 추가로 소개해 드리겠습니다. 전체 프로젝트에서 이름을 변경해야 할 항목이 있을 때 IDE에 맡겨보세요.

이름을 변경할 심볼을 선택한 후 마우스 오른쪽 버튼으로 클릭하면 컨텍스트 메뉴가 열립니다. Refactor(리팩터링) | Rename(이름 변경)으로 이동하거나 단축키 ⇧F6 / Shift+F6을 사용하면 됩니다. 사용자 정의 이벤트 핸들러, 클래스 이름 및 Angular 구성 요소에 정의된 메서드를 비롯한 여러 심볼에 이름 변경을 적용할 수 있습니다.

보너스 팁: 생각이 바뀌어 기존 상태로 되돌리려면 ⌘Z / Ctrl+Z를 눌러 변경 사항을 취소할 수 있습니다.

이 두 가지 리팩터링 외에도 다양한 리팩터링이 준비되어 있습니다. 다른 리팩터링 관련 정보는 이 문서를 참조하세요. Refactor This(이 항목 리팩터링) 팝업(^T / Ctrl+Alt+Shift+T)을 종종 호출하여 현재 지원되는 모든 리팩터링을 확인하세요!

자동화 적극 활용하기

과중한 업무에 시달릴 때 JetBrains IDE는 든든한 힘이 됩니다. 3가지 유용한 팁을 확인해 보세요.

● 자동 가져오기

프로젝트로 모든 항목을 제대로 가져왔는지 확인하는 데 소모되는 시간을 절약하면 코딩에 더 많은 시간을 할애할 수 있습니다. IDE는 프로젝트에 정의된 @Component 또는 클래스에 대한 모든 import 문을 대신 처리합니다. 파일에 필요한 모든 모듈을 한 번에 가져오는 유용한 단축키인 ⇧⌘Enter / Alt+Shift+Enter를 활용해 보세요.

보너스 팁: 원하는 방식으로 가져오기 스타일을 구성할 수 있습니다. 자세한 구성 방법은 이 블로그 게시물을 참조하세요.​

Angular 구성 요소 생성

Angular 프로젝트에서 새 구성 요소를 생성해야 할 경우가 많습니다. 구성 요소를 추가할 위치를 마우스 오른쪽 버튼으로 클릭하고 New(새로 만들기)| Angular Schematic을 선택하면 새로운 구성 요소를 생성할 수 있습니다. component(구성 요소) 옵션을 선택한 후 이름을 지정하면 IDE에서 나머지 작업을 처리하여 완전한 구성 요소를 생성합니다.

하위 폴더 레이어 내부에 구성 요소를 설치해야 하는 경우 이 기능을 활용하면 시간을 대폭 단축할 수 있습니다.

보너스 팁: 이름 끝에 ‘-’를 추가하면 구성 요소에 사용 가능한 다른 옵션도 표시됩니다.

코드 검사

이 글이 작성된 시점을 기준으로, JetBrains IDE에는 훌륭한 코드를 올바르게 작성하는 데 도움이 되는 19개의 Angular 관련 검사가 포함되어 있습니다. 검사를 통해 코드의 모든 문제를 파악할 수 있으며, 대부분의 경우 IDE에서 해당 문제를 해결하기 위한 빠른 수정이 제안됩니다.

보너스 팁: 이제 심각도 수준을 변경하지 않고 에디터에 검사가 표시되는 방식을 구성할 수 있습니다. Preferences(환경 설정)/Settings(설정) | Editor(에디터) | Inspections(검사)에서 Highlighting in editor(에디터 내 강조 표시) 드롭다운 메뉴를 통해 검사 강조 표시 스타일을 변경할 수 있습니다.

FOMO 다이제스트의 이번 글을 즐겁게 읽고, 새로운 팁을 알게 되셨길 바랍니다. 배워보고 싶은 다른 기능이나 다이제스트 연재물에 소개되었으면 하는 기능이 있다면 아래 댓글란에서 공유해 주세요.

WebStorm 팀 드림

여기까지가 저희가 준비한 내용입니다.

유익하셨나요? 다음 콘텐츠도 유익한 정보 가득 담아 다시 돌아오겠습니다.

긴 글 읽어주셔서 감사합니다.