WebStorm 2019.3 : 빨라진 시작, 다양해진 고급 Vue.js 지원, 스마트해진 JavaScript용 코드 완성 기능 등
WebStorm 2019.3이 출시되었습니다!
올해 마지막 주요 업데이트인 WebStorm 2019.3에서는 20% 빨라진 시작 속도, Vue.js 지원의 주요 개선 사항, JavaScript와 TypeScript에 지원되는 더 스마트해진 코드 완성 기능이 제공되며 오래된 버그가 다수 수정되었습니다.
이 블로그에서는 새로운 기능과 주요 개선 사항을 새로운 기능 페이지보다 더 자세하게 설명합니다. 이 글은 이전 EAP 블로그 게시물의 정보를 바탕으로 작성되었기 때문에 여러분이 JetBrains 블로그를 얼마나 자주 확인하는가에 따라 이미 익숙한 내용이 있을 수 있습니다.
새로운 기능과 개선 사항은 다음 범주로 나뉩니다.
- 성능: 소스 맵으로 디버그할 때 빨라진 시작과 향상된 메모리 사용량
- 프레임워크: Vue.js에 대한 고급 코드 완성 추가, Vue.js 프로젝트에 빠른 문서 지원, React 구성 요소 속성에 대한 향상된 지원, Angular 지원 개선 사항
- JavaScript 및 TypeScript: 템플릿 언어 삽입, 새 심볼에 대한 이름 제안, TypeScript 3.7 기능 지원
- HTML 및 스타일시트: CDN상의 CSS 라이브러리에 대한 코드 완성, CSS의 인용 스타일 변경 옵션, Sass에서 @use 및 @forward 규칙 조기 지원
- IDE 개선 사항: 도구 및 구성 실행을 위한 단일 액션, 번들에서 제외된 Dart 지원, 전역 파일 와처 자동 설정, 선택 영역 내에서만 검색
- 도구: 곧 출시될 Yarn 2 릴리스 지원, 디버거의 반환값, npm 설치 알림을 다시 켜기 위한 새로운 액션
- 버전 관리: 재설계된 프로젝트 복제 UI, 업데이트된 git 브랜치용 Compare with Current(현재와 비교) 액션, 모든 브랜치의 변경 내용을 푸시하는 옵션, 빨라진 변경 내용 커밋, 새로운 브랜치 체크아웃 액션
성능
빨라진 시작
지난 두 번의 릴리스 주기 동안 JetBrains는 IDE에서 시작 화면이 표시되고 색인 생성된 프로젝트가 열리기까지 기다리는 시간을 단축하기 위해 많은 노력을 기울였습니다. 그 결과 WebStorm 2019.3에서는 이전 버전 대비 더 빨라진 속도로 시작 작업이 처리됩니다.
“빨라진 속도”가 의미하는 바에 대해 설명드리자면, 저희는 다양한 운영 체제에서 WebStorm 2019.3의 시작 시간을 측정하고 이 수치를 v2019.1 및 v2019.2의 시작 시간과 비교했습니다. 의미 있는 비교를 위해 모든 운영 체제에서 create-react-app으로 생성된 React 애플리케이션을 동일한 프로젝트로 사용하고 app.js 파일을 에디터에서 열었습니다. 그 결과는 다음과 같습니다.
평균적으로 이전 버전에 비해 시작 시간이 20% 단축되었습니다. 물론 네트워크 구성 및 작업 공간의 크기, 컴퓨터의 연식, 바이러스 백신 구성과 같은 요인에 따라 실제 결과는 다를 수 있습니다.
이 개선 작업은 여전히 진행 중입니다. WebStorm 2020.1에서는 여느 때와 마찬가지로 프로젝트 색인 생성의 최적화를 포함해 다른 주요 변경이 예정되어 있습니다.
소스 맵으로 디버그 시 메모리 사용량 개선
소스 맵으로 디버그할 때의 경험을 개선하기 위해, 해당 작업 진행 시 디버거가 소프트 참조를 사용하도록 적용했습니다. 이제 메모리가 한계에 도달하면 소프트 참조가 쉽게 해제됩니다.
IDE 상태 표시줄에서 메모리 표시기(Preferences(기본 설정)/Settings(설정) | Appearance & Behavior(꾸미기 및 동작) | Appearance(꾸미기) – Show memory indicator(메모리 표시기 표시))가 확인되면 표시기를 클릭하여 소프트 참조 메모리를 해제하세요.
프레임워크
크게 향상된 Vue.js 코드 완성 기능
이번 릴리스 주기의 주요 목표 중 하나는 Vue.js 지원을 한 차원 높은 수준으로 끌어올려 사용자가 적은 노력으로 훌륭한 Vue.js 애플리케이션을 구축할 수 있도록 돕는 것이었습니다. 저희는 코드 완성 기능부터 시작하여 이 목표에 다양한 각도로 접근했습니다.
먼저 모든 Vue.js 구성 요소를 단일 .vue 파일에서 정의하는 데 익숙하지 않은 사용자를 위한 내용입니다. 이제 별개 파일에 있는 서로 다른 구성 요소 부분 간 연결을 WebStorm이 이해하고 속성, 데이터, 메소드에 정확한 코드 완성 제안을 제공합니다.
둘째, 이제 WebStorm은 슬롯 이름에 대한 코드 완성을 제안합니다. 이 기능은 Vuetify, Quasar, BootstrapVue 등의 프로젝트 구성 요소 및 구성 요소 라이브러리에 정의된 슬롯 이름인 경우 작동합니다.
셋째, Vue 구성 요소의 스크립트 섹션에서 일부 코드를 복사하여 다른 구성 요소에 붙여넣는 경우 WebStorm은 일반 JavaScript 파일에서 수행하는 것과 동일한 방식으로 필요한 import 문을 붙여넣습니다.
마지막으로 Vuetify가 있는 프로젝트에서 특히 두드러졌던 Vue 템플릿 코드 완성의 성능 문제를 발견하여 수정했습니다. 이제 태그와 해당 속성이 지연 없이 코드 완성 팝업에 표시됩니다.
Vue.js 프로젝트에 빠른 문서 지원
WebStorm 2019.3에서는 Vue.js 및 일부 인기 있는 구성 요소 라이브러리에 정의된 구성 요소와 지시문에 대한 문서를 확인할 수 있습니다. 문서를 보려면 코드 내 구성 요소 또는 지시문의 이름 위에서 F1을 누르면 됩니다.
코드 완성 팝업이 열려 있는 상태에서 F1을 눌러도 됩니다. 라이브러리의 웹사이트에 있는 자세한 문서와 예시로 이동하려면 Shift-F1을 누르거나 팝업 하단의 링크를 클릭하세요.
propTypes 없는 React 구성 요소의 속성에 대한 향상된 지원
propTypes가 없는 구성 요소의 경우, WebStorm은 해당 구성 요소의 사용 위치에 속성이 전달된 것을 확인한 후 구성 요소 정의에서 props.something에 대해 해결되지 않은 속성을 더 이상 보고하지 않습니다.
예를 들면 다음과 같습니다. 이전에는 propTypes를 사용하지 않으면 Greeting 정의의 ‘props.firstName’이 항상 해결되지 않은 변수로 표시되었습니다.
WebStorm 2019.3에서는 Greeting이 사용되고 거기에 firstName 속성이 포함되어도 해결되지 않은 것으로 표시되지 않습니다.
속성을 추가한 경우 ‘props’ 또는 ‘this.props’ 다음에 오는 코드 완성 제안에서 이 이름이 표시됩니다.
Angular 지원 개선 사항
WebStorm 2019.3에서는 SVG를 Angular 템플릿으로서 사용할 수 있도록 지원합니다. 이는 이제 IDE가 SVG 태그 및 .svg 파일에서 지시문 및 바인딩을 이해한다는 뜻입니다. 또한 Angular 9의 Schematics도 지원됩니다.
JavaScript 및 TypeScript
템플릿 언어 삽입
JavaScript 파일의 HTML 문자열과 같이 파일의 기본 언어와 상이한 언어로 작성된 코드 조각을 사용해야 하는 경우가 자주 있습니다. 하지만 WebStorm은 이러한 코드 조각에 코드 완성을 충분히 제공할 수 있을 정도로 유용합니다. 또한 이제 Pug(예전 Jade), Handlebars, EJS 등을 파일에 삽입할 수도 있습니다.
이 메커니즘에 대한 기술 용어는 language injections입니다. 이 기능을 사용하려면 Alt-Enter를 누르고 Inject Language or Reference(언어 또는 참조 삽입)을 선택한 다음, 목록에서 언어를 고르세요.
새 심볼의 이름 제안
JavaScript 또는 TypeScript 파일에서 새 변수 및 매개변수 이름을 추가하면 프로젝트, 표준 라이브러리, 사용 중인 종속 요소에 정의된 클래스, 인터페이스, 유형 별칭의 이름을 기반으로 이름을 제안받을 수 있습니다.
새로운 변수, 함수, 클래스, 인터페이스의 경우 동일한 범위에서 이미 사용되지만 아직 정의되지 않고 해결되지 않은 것으로 표시된 이름의 제안도 제공됩니다.
예를 들어 새 함수를 사용하기로 결정한 경우, 호출한 후 ‘function’을 입력하여 만들면 이름 제안이 표시됩니다. 물론 사용 위치에서 Alt-Enter를 누르고 Create Function(함수 생성)이라는 빠른 수정을 사용할 수도 있습니다.
TypeScript 3.7 지원
WebStorm 2019.3에는 TypeScript 3.7의 주요 기능인 optional chaining, nullish coalescing, assertion signatures< 등이 기본 지원되어 해당 기능을 사용해 더 효율적으로 작업할 수 있습니다. 또한 번들로 제공되는 TypeScript 버전을 3.7.2로 업데이트했습니다.
JSX 코드에서 TODO를 더 정확하게 탐지
JSX 코드의 TODO 주석과 관련된 여러 가지 문제가 해결되었습니다. 예를 들어 이제 WebStorm은 JSX 태그 내부에 있는 여러 줄의 JavaScript 블록에서 TODO 주석을 확인하고, Flow 파일에서 해당 주석을 더 효과적으로 처리합니다.
HTML 및 스타일시트
CDN상의 CSS 라이브러리에 코드 완성 지원
프로젝트에서 Bootstrap이나 다른 CSS 라이브러리를 사용하고 해당 라이브러리가 HTML 파일 내에서 CDN에 연결된 경우 이제 클래스 소스를 프로젝트에 추가하지 않아도 해당 라이브러리의 클래스 이름에 코드 완성 기능을 사용할 수 있습니다. 이 기능을 활성화하려면 HTML 파일의 링크 위에서 Alt-Enter를 누르고 Download library(라이브러리 다운로드)를 선택하세요
다운로드한 CSS 라이브러리는 JavaScript 라이브러리와 동일한 방식으로 표시됩니다. 이 라이브러리는 Preferences(기본 설정)/Settings(설정) | Languages & Frameworks(언어 및 프레임워크) | JavaScript | Libraries(라이브러리)에서 비활성화하거나 삭제할 수 있습니다.
CSS의 따옴표 스타일 변경
이제 CSS, SCSS, Less 파일에서 큰 따옴표를 사용할지 작은 따옴표를 사용할지 구성할 수 있습니다. 새로운 Quote Marks(따옴표) 옵션은 Preferences(기본 설정)/Settings(설정) | Editor(에디터) | Code Style(코드 스타일) | CSS, SCSS or Less(CSS, SCSS 또는 Less) – Other(기타)에서 사용할 수 있습니다. 코드 완성을 사용하여 새 코드를 추가할 때뿐만 아니라 코드 서식을 다시 지정할 때도 선택한 따옴표 스타일을 적용하려면 Enforce on Reformat(서식 재지정 시 강제 적용)을 선택하세요.
Sass의 @use 및 @forward 규칙 조기 지원
이제 WebStorm은 Sass의 새로운 @use 및 @forward 규칙을 이해하고 그 이후의 경로에 대해 코드 완성을 제공합니다. 가져온 심볼에 대한 더 스마트해진 코드 완성과 문제 해결이 곧 출시될 예정입니다.
IDE 개선 사항
도구 및 구성 실행을 위한 새로운 액션
Run Anything(무엇이든 실행)을 사용하면 npm 및 Yarn과 같은 실행 구성 및 도구를 빠르게 시작하고 최근 프로젝트를 열 수 있습니다. 이 액션을 사용하려면 Ctrl을 두 번 누르거나 탐색 표시줄의 오른쪽에 있는 아이콘을 클릭하세요.
기존 실행 구성을 시작하려면 해당 이름을 입력한 다음 Enter를 눌러 시작하면 됩니다.
npm 스크립트를 실행하려면 ‘npm run’을 입력한 다음 제안에서 스크립트 이름을 선택하세요. 사용 가능한 모든 명령어를 보려면 ‘?’를 입력하세요.
번들에서 Dart 지원 제외
릴리스 주기를 단축하기 위해 WebStorm 2019.3부터 Dart 플러그인을 번들에서 제외합니다. 현재 번들로 포함된 플러그인은 전체 IDE를 업데이트해야만 함께 업데이트됩니다. 그러나 플러그인을 별도로 사용할 수 있게 되면 번들의 자체 릴리스 주기를 따를 수 있습니다. 이제 Dart를 사용하는 경우 Preferences(기본 설정)/Settings(설정) | Plugins(플러그인)에서 해당 Dart 플러그인을 설치해야 합니다.
Dart 플러그인은 이전 IntelliJ 플랫폼 버전을 기반으로 한 Android Studio에서 많이 사용됩니다. 이번 변경 내용이 적용되면 Android Studio 및 이전 IntelliJ IDEA Ultimate, Community 버전과 호환되는 플러그인 버전으로 최신 수정 사항을 간편하게 백포트할 수 있게 될 것입니다.
모든 새 프로젝트에 전역 파일 와처 사용
프로젝트에 Prettier와 같은 타사 도구를 사용하고 파일 와처를 통해 구성한 경우, 새로 생성한 모든 프로젝트에서 이 구성을 자동으로 적용하고 싶을 수 있습니다.
WebStorm 2019.3에서는 전역 파일 와처를 기본 설정하여 이를 실현할 수 있습니다. 사용 설정하려면 Preferences(기본 설정)/Settings(설정) | Tools(도구) | File Watchers(파일 와처)로 이동해 새 전역 파일 와처를 추가한 다음, Enabled(사용) 체크박스를 선택하세요.
선택 영역 내에서만 검색
이제 Cmd/Ctrl-F를 눌러 파일에서 텍스트를 검색할 때 범위를 선택된 코드 부분으로만 제한할 수 있습니다.
- 코드의 일부를 선택하고 Cmd/Ctrl-F를 누른 다음 검색 쿼리를 입력합니다.
- 또는 Cmd/Ctrl-F를 먼저 누르고, 쿼리를 입력한 후 코드를 선택하고 In Selection 아이콘을 클릭하거나
Cmd/Ctrl-F 를 한 번 더 눌러주세요. 이렇게 하면 전체 파일 검색에서 선택 영역 내 검색으로 전환할 수 있습니다.
도구
npm 설치 알림 다시 켜기
VCS에서 프로젝트를 열거나 업데이트하면 WebStorm은 모든 프로젝트 종속 요소가 설치 및 업데이트되었는지 확인합니다. 제대로 진행되지 않은 경우, WebStorm에서 ‘npm install’ 또는’yarn install’을 실행하도록 제안합니다.
사용자가 실수로 이 알림을 닫은 후 다시 표시하고 싶은 경우를 고려해 Enable Notifications about Installing Dependencies from package.json (package.json에서 종속 요소 설치에 대한 알림 활성화)이라는 액션을 추가했습니다. 이 액션은 Find Action(액션 검색) 팝업(Cmd/Ctrl-Shift-A)을 사용해 찾을 수 있습니다.
디버거에서 반환 값을 표시하기 위한 새로운 옵션
디버거에 새로운 Show Method Return Values(메소드 반환 값 표시) 옵션이 추가되었습니다(디버거 왼쪽 창의 톱니 아이콘을 클릭하여 활성화). 이렇게 하면 ‘console.log’를 사용하거나 추가 변수를 만들거나 Evaluate Expression(표현식 평가)을 사용하지 않아도 메소드가 반환하는 값을 확인할 수 있습니다.
이 옵션을 설정하면 코드 줄을 단계별로 실행하자마자 변수 뷰 바로 위에 반환 값이 표시됩니다(먼저 일시 중지를 한 다음 스텝오버 또는 스텝인투 클릭). 필요한 경우 해당 값을 변경할 수 있습니다.
곧 출시되는 Yarn 2 릴리스 지원
새로운 주요 Yarn 버전이 Plug’n’Play 기능과 함께 올해 말에 출시됩니다. Plug’n’Play는 프로젝트 종속 요소를 위한 완전히 새로운 설치 전략입니다. 지난 한 달 동안 JetBrains는 Yarn 팀과 협력하여 Yarn 2를 사용할 때 WebStorm의 모든 주요 기능이 예상대로 작동하도록 많은 노력을 기울였습니다.
가장 우선적으로 해결해야 했던 가장 중요한 작업은 코드 완성과 탐색을 제공하기 위해 프로젝트의 종속 요소를 찾아 적절하게 색인을 생성하는 것이었습니다. 이전과 마찬가지로 WebStorm은 Dependencies from package.json(package.json의 종속 요소)이라는 파일에서 JavaScript 라이브러리를 생성합니다. 이 라이브러리는 Preferences(기본 설정)/Settings(설정) | Languages and Frameworks(언어 및 프레임워크) | JavaScript | Libraries(라이브러리)에서 비활성화하거나 범위를 설정할 수 있습니다.
둘째, Yarn 2를 사용하여 설치할 때 린터 및 테스트 러너와 같은 모든 통합 도구를 계속 사용할 수 있는지 확인했습니다.
하지만 Yarn 2가 아직 공식적으로 출시되지 않았기 때문에 WebStorm 통합 작동 방식에 영향을 줄 수 있는 예상치 못한 변경 사항이 여전히 있을 수 있습니다. 또한 일부 도구 및 라이브러리는 Yarn 2를 완벽하게 지원하지 않다는 것을 유념해 주세요.
Yarn 2를 바로 사용해 보고 싶다면 Yarn 2 설명서의 설치 지침을 확인해 보세요.
버전 관리
새롭게 설계된 프로젝트 복제 UI
버전 관리 시스템에서 프로젝트를 복제하면 업데이트된 Get from Version Control(버전 관리에서 가져오기) 대화상자가 시작 화면과 VCS 메뉴에 표시됩니다.
이 대화상자는 GitHub 계정에서 프로젝트를 가져오는 경험을 개선하는 데 초점을 두고 새롭게 설계되었습니다. 이제 대화상자의 왼쪽에 있는 GitHub를 선택하면 거기에서 계정에 로그인할 수 있습니다. 로그인한 후에는 본인의 계정과 소속된 조직에 있는 저장소 목록을 스크롤하여 복제할 저장소를 찾을 수 있습니다.
git 브랜치에 사용되는 “Compare with Current”(현재와 비교) 액션 업데이트
사용자의 피드백에 따라 Branches(브랜치) 팝업의 Compare with Current(현재와 비교) 액션을 새롭게 작업했습니다.
이 액션을 사용하면 Log(로그) 탭에서 두 브랜치 간 커밋의 차이점을 확인할 수 있습니다. 표시되는 커밋을 설명하는 새 제목이 추가되었습니다(브랜치 X에는 있지만 마스터 브랜치에는 존재하지 않는 커밋). Swap branches 액션으로 다른 방법으로 브랜치를 비교할 수 있습니다. (예: 마스터에는 있지만 브랜치 X에는 없는 커밋)
Branches 팝업에서 Show Diff with Working Tree(작업 트리로 Diff 표시) 액션을 사용하면 브랜치 간에 차이 나는 파일을 확인할 수 있습니다. 이 대화상자의 상단에서 유사한 Swap branches 액션을 찾을 수 있습니다.
어느 브랜치의 변경 내용이든 간단하게 푸시
이제 Branches 팝업에서 바로 모든 브랜치의 변경 내용을 푸시할 수 있습니다. 브랜치를 선택한 다음, 메뉴에서 Push(푸시) 액션을 사용하세요.
이전에는 현재 작업 중인 브랜치에서만 변경 내용을 푸시할 수 있었습니다. 즉, 변경 내용을 푸시하려면 먼저 해당 브랜치로 전환해야 했습니다.
브랜치 체크아웃을 위한 새로운 액션
브랜치에서 사용되던 Checkout as…(다음으로 체크아웃) 액션을 Checkout(체크아웃) 및 New Branch from Selected…(선택 항목에서 새로운 브랜치 생성)이라는 두 가지 별도의 액션으로 대체했습니다.
원격 브랜치에서 사용할 경우 새로운 Checkout 액션은 먼저 동일한 이름을 가진 로컬 브랜치를 생성한 다음, 원격 브랜치를 추적하도록 설정합니다.
로컬 또는 원격 브랜치를 체크아웃하되 추적하고 싶지는 않은 경우 New Branch from Selected… 액션을 사용하면 됩니다.
변경 내용을 커밋하는 새로운 방법
이제 별도의 대화상자가 나머지 IDE 화면을 가로막는 일 없이 Version Control(버전 관리) 도구 창의 Local(로컬) 탭에서 바로 커밋할 수 있습니다. 이 기능을 사용하려면 Preferences(기본 설정)/Settings(설정) | Version Control(버전 관리) | Commit Dialog(커밋 대화상자)에서 Commit from the Local Changes without showing a dialog(대화상자를 표시하지 않고 로컬 변경에서 커밋)를 선택하세요.
WebStorm 2019.3에대한 여러분의 피드백을 JetBrains에 공유해주세요. 그리고 이슈가 있다면 이슈 트래커에 리포트해주세요. 감사합니다!
WebStorm 팀
Ekaterina Ryabukha의 WebStorm 2019.3: Faster Startup, More Advanced Vue.js Support, Smarter Code Completion for JavaScript, and More를 번역한 글입니다.
Subscribe to JetBrains Blog updates
