WebStorm 2021.2의 새로운 기능
저장 시 브라우저에서 페이지 다시 로드, require에 대한 자동 import 문, React useState 훅에 대한 이름 변경 리팩터링, 비공개 npm 패키지에 대한 코드 완성 및 사용 편의성 개선.
코드 편집
저장 시 페이지 다시 로드
Live Edit 기능 개선에 대한 요청을 받았고, 이를 개선했습니다! 이제 HTML, CSS, JavaScript 파일을 편집 후 저장하면 브라우저에서 페이지가 자동으로 업데이트됩니다. 시작하려면 에디터에서 HTML 파일을 열고 마우스로 가리킨 뒤 사용하려는 브라우저의 아이콘을 클릭하세요. 모든 브라우저가 지원됩니다.
저장 시 액션
저장 시 특정한 작업을 수행해야 하나요? 이제 WebStorm 2021.2에서 이 워크플로가 제대로 지원됩니다! 기존의 모든 기능을 새롭게 작업하여 한 곳에서 이 기능을 제공하며 저장 시 코드 서식을 다시 지정하고 import 문을 최적화하는 기능을 포함하여 몇 가지 새로운 옵션을 추가했습니다.
더욱 빨라진 스크래치 파일 생성
프로젝트 컨텍스트 외부에서 코드 작업을 하고 싶으신가요? 에디터에서 코드를 선택한 다음 Alt+Enter를 누르고 Create new scratch file from selection(선택 항목에서 새 스크래치 파일 만들기)을 선택하세요. 그러면 원하는 코드를 포함한 스크래치 파일이 생성됩니다.
Code With Me의 코드 완성 동기화
Code With Me 세션 중 Following(팔로잉) 모드 상태에 있으면 내가 팔로잉 하는 사람이 사용한 코드 완성 제안을 확인할 수 있습니다.
JavaScript 및 TypeScript
require()에 대한 자동 import 문
ES6 심볼을 완성할 때 WebStorm에서 누락된 import 문을 추가할 수 있다는 사실을 알고 계셨나요? 이제 CommonJS 모듈에도 이 기능이 적용되어 코드 완성 시 require import 문이 삽입됩니다.
JSDoc에서 TypeScript 타입 지원
WebStorm에서 이제 .js 파일의 JSDoc 주석 내에 사용되는 TypeScript 구문을 제대로 지원합니다. 기존의 지원을 새롭게 업데이트 및 확장했으며 다수의 알려진 버그를 수정했습니다.
화살표 함수에 대한 새로운 액션
코드에 화살표 함수를 빠르게 추가해야 하나요? 이제 Ctrl+Alt+J를 사용하여 화살표 함수로 코드 블록을 감쌀 수 있습니다. arf를 입력하고 Tab을 눌러 템플릿을 확장하고 빈 화살표 함수를 추가할 수도 있습니다.
디버그할 때도 미리보기 탭 지원
Project(프로젝트) 뷰에서만 작동하던 미리보기 탭이 이제 앱을 디버그할 때도 작동합니다. 이 기능을 사용하려면 Preferences(환경 설정)/Settings(설정) | Editor(에디터) | General(일반) | Editor(에디터) 탭으로 이동하여 Enable preview tab(미리보기 탭 사용) 체크박스를 선택하세요. 이렇게 하면 WebStorm이 하나의 탭에서 파일을 연속적으로 열게되어 에디터가 여러 파일로 복잡해지는 것을 방지할 수 있습니다.
프레임워크 및 기술
React useState 훅에 대한 이름 변경 리팩터링
이제 WebStorm에서 useState 값과 함수의 이름이 자동으로 변경되므로 하나씩 리팩터링하느라 시간을 낭비할 필요가 없습니다. state 값에 캐럿을 놓고 Shift+F6을 누르거나 컨텍스트 메뉴를 마우스 오른쪽 버튼으로 클릭한 후 Refactor(리팩터링) | Rename(이름 변경)으로 이동하세요.
비공개 npm 패키지에 대한 코드 완성
이제 코드 완성이 비공개 npm 패키지에서 작동하므로 package.json에 새 프로젝트 종속성을 추가하기가 더욱 쉬워졌습니다. WebStorm에서 공개 패키지의 경우와 마찬가지로 패키지의 최신 버전에 대한 정보를 확인할 수 있습니다.
classnames 및 clsx 라이브러리 지원
To help you work more efficiently with CSS classes in your React projects, we’ve added support for popular classnames and clsx libraries. WebStorm은 CSS 클래스에 대한 코드 완성 제안을 표시하고 문자열 리터럴의 모든 심볼과 리터럴 이름이 있는 프로퍼티를 확인합니다.
버전 관리
새로운 커밋 전 검사
커밋하기 전에 테스트를 실행해서 코드를 확인하고 싶으신가요? 그렇게 할 수 있는 옵션을 새롭게 추가했습니다. Commit(커밋) 도구 창에서 톱니바퀴 아이콘을 클릭하고 Run Tests(테스트 실행)를 선택한 다음 원하는 실행 구성을 선택하세요. WebStorm이 파일을 테스트하고 문제가 있으면 경고합니다.
GPG 서명 지원
이제 GPG 키로 서명하여 커밋을 보호할 수 있습니다. Preferences(환경 설정) / Settings(설정) | Version Control(버전 관리) | Git에서 Configure GPG Key(GPG 키 구성)…을 선택하여 이 기능을 사용할 수 있습니다.
로컬 기록 검색
Local History(로컬 기록) 의 리비전을 살펴보기가 이제 더 쉬워졌습니다. 변경된 파일을 마우스 오른쪽 버튼으로 클릭한 다음 Local History(로컬 기록) | Show History(기록 표시)로 이동한 다음, 검색 필드를 사용하여 리비전을 탐색하세요.
사용 편의성
더 빠른 도구 창 재구성
이제 도구 창을 더 쉽게 재구성할 수 있습니다. 이동하려는 도구 창 위로 마우스를 가져간 다음 원하는 위치로 끌어다 놓으세요. 이 기능은 기본 WebStorm 창에서 도구 창을 분리하려는 경우에도 작동합니다. IDE 프레임 밖으로 끌어다 놓기만 하면 됩니다.
더 쉬워진 프로젝트 아이콘 사용자 지정
프로젝트에 맞춤 아이콘을 할당할 수 있다는 사실을 알고 계셨나요? 이제 이 프로세스가 더욱 쉬워졌습니다. WebStorm의 Welcome(시작) 화면에서 프로젝트를 마우스 오른쪽 버튼으로 클릭한 다음 Change Project Icon(프로젝트 아이콘 변경)… 옵션을 선택하고 해당 프로젝트와 연결하려는 SVG 파일을 업로드하면 됩니다.
Toolbox App으로부터의 알림 업데이트
이제 Toolbox App의 중요 제품 업데이트를 놓치지 않고 적용할 수 있습니다. 다운로드할 수 있는 새 버전이 있는 경우 WebStorm에서 이를 알려주고 해당 버전으로 업그레이드할 수 있는 옵션을 제공합니다. 이 기능은 Toolbox App 버전이 1.20.8804 이상에서 작동합니다.
환경 설정/설정 대화상자 개선
이제 Preferences(환경 설정) / Settings(설정) 대화상자에 고급 설정을 포함한 노드가 제공됩니다. Distraction-free(집중력 분산 방지) 모드에서 왼쪽 여백을 설정하는 기능을 포함한 몇 가지 새로운 구성 옵션이 추가되었습니다. 또한, 이제 최근에 연 노드 사이를 더 빠르게 이동할 수 있습니다. 대화상자 오른쪽 모서리에 있는 화살표를 사용하기만 하면 됩니다.
캐시 및 로그 자동 정리
WebStorm은 각 주요 업데이트 후에 마지막 업데이트 후 180일 이상이 지난 캐시 및 로그 디렉터리를 정리합니다. 시스템 설정 및 플러그인 디렉터리는 영향을 받지 않고 그대로 유지됩니다. 이 프로세스를 수동으로 실행하려면 메인 메뉴에서 Help(도움말) | Delete Leftover IDE Directories(남은 IDE 디렉터리 삭제)…로 이동하세요.
기본 제공되는 터미널의 새로운 기능
사용 환경을 개선하기 기본 제공되는 터미널에 세 가지 새로운 기능을 추가했습니다. 이제 커서 모양을 변경하고 ⌥ 키를 메타 제어자로 사용할 수 있습니다. Preferences(환경 설정) / Settings(설정) | Tools(도구) | Terminal(터미널)에서 이러한 옵션을 살펴보세요. 또한 http 링크로 작업하기가 더욱 편리해졌습니다.