Tips & Tricks

FOMO Digest #2: JetBrains IDE에서 Angular 개발을 위한 5가지 팁

Read this post in other languages:
English, 简体中文

사용자가 Angular를 얼마나 잘 알고 있든, Angular에 대해 어떻게 생각하든 관계없이 JetBrains IDE에서는 이 프레임워크를 훨씬 편리하게 사용할 수 있습니다. 오늘은 FOMO 다이제스트 게시물을 통해 WebStorm, IntelliJ IDEA Ultimate, PhpStorm, Rider, PyCharm Professional, GoLand 및 RubyMine 등, 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(텍스트 검색 결과를 전체 검색에 표시) 옵션을 선택하세요.

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

관련 심볼 기능을 사용하여 Angular 구성 요소 간 이동

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

최근 파일: ⌘E / Ctrl+E

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

'최근 파일'을 사용하여 최근 파일을 확인하고 npm 선택

보너스 팁: [](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에서 나머지 작업을 처리하여 완전한 구성 요소를 생성합니다. 하위 폴더 레이어 내부에 구성 요소를 설치해야 하는 경우 이 기능을 활용하면 시간을 대폭 단축할 수 있습니다.

Angular Schematic을 사용한 Angular 구성 요소 생성

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

코드 검사

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

프로젝트에서 사용되는 템플릿 및 templateURL의 문제를 표시하는 코드 검사

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

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

WebStorm 팀 드림

게시물 원문 작성자

Jessie Cho

David Watson

Discover more