웹스톰(WebStorm)이란 #

웹스톰(WebStorm) 은 HTML 편집기가 포함된 자바스크립트 IDE(Intergrated Development Environment)로 IntelliJ IDEA 플랫폼 위에 구축되었고 비주얼 스튜디오나 이클립스와 같은 프론트엔드 개발에 최적화 된 통합개발환경을 제공한다.

<2019년 9월 2일자 웹스톰(WebStorm) 웹사이트 화면>

Node.js, CoffeeScript, TypeScript, Dart, Jade, Sass, Less, Stylus 같은 최신 웹 트렌드를 지원하며 플랫폼에 유동적(Cross-platform)이어서 윈도우, 맥, 리눅스에서 동작한다.

웹개발, 특히 자바스크립트 친화적 프론트엔드 개발에 특화된 웹스톰은 HTML, CSS, javaScript, XML, VCS 작업, 웹 개발을 위한 여러 도구 (특히, IntelliJ IDEA의 모든 웹 관련 기능 상속) 등을 지원하는데 지원사양은 다음과 같다.

웹스톰 특징 #

• JavaScript editor
  • 지능형 코드 완성 (Intelligent Code Completion)
  • 코드 검사 및 신속한 수정 옵션 (Code Inspection and Quick-fix Options)
  • 코드 탐색 및 용도 검색 (Code Navigation and Usages Search)
  • 코드 리팩토링 (Code Refactoring)
• Debugging and Testing
  • 강력한 자바스크립트 디버거 (Powerful JavaScript Debugger)
  • 자바 스크립트 단위 테스트 (JavaScript Unit Testing)
• Node.js
• Modern Languages
  • TypeScript 지원
  • CoffeeScript 지원
  • Dart 지원
  • ECMAScript 지원
• More Than Code
  • 코드 검사 (Code Inspection)
  • 코드에서 모든 "외부"와 "내부"언어에 대한 지원(Language Mixing/Injection)
    • 자바 스크립트 코드 블록의 외부 또는 자바 스크립트 문자열 리터럴 내부 CSS, HTML, 등 전체 코딩 지원
  • 맞춤법 검사 (Spellchecker)
  • 중복 코드 검출 (Smart Duplicated Code Detector)
• HTML and CSS
  • HTML5, CSS3 지원
  • 문법검사 및 빠른 수정 (Validation and Quick-Fixes)
  • Zen Coding & Emmet 지원
  • CSS ID 조회 시 스타일 또는 이미지 미리보기 팝업 (Show Content)
  • 우클릭으로 해당 태그에 적용된 스타일 보기 (Show Applied Styles)
• Less, Sass and Stylus
• 최신 기술과의 호환성
  • Angular, React, Vue
• Smart Environment
  • Project Template
    • Node.js Express application, Twitter Bootstrap, Meteor application, Foundation, Web Starter Kit, Angular.js seed project
  • FTP and Remote Files Syncronization (Settings > Directories 메뉴)
  • Version Control Systems Integration :
    • Subversion, CVS, Git, Perforce, Mercurial, TFS
  • Local History

웹스톰(WebStorm) 가격 #

웹스톰(WebStorm)은 30일 평가 버전을 사용할 수 있으며 오픈 소스 프로젝트 개발자에게는 무료로 라이선스가 제공된다. 상세 가격정보는 해당 링크를 통해 확인이 가능하다.

• Fallback License
  • 웹스톰 라이센는 1년 이상 구독했다면 구독종료 후엔 구독 시작시점의 최소버전을 영구적으로 사용할 수 있다. 1년 이상 구독하지 않았다면 Fallback License를 갖지 못한다.

<2019년 9월 2일자 웹스톰(WebStorm) 영구적인 Fallback 라이센스란?>

웹스톰 주요기능 #

• Rename
  • 단축키 : ^+T
  • 지역 변수를 한번에 수정할 수 있는 기능이다.
  • 변수를 일괄 수정함으로써 오타가능성을 줄여준다.
• Change Signature
  • 단축키 : ^+S
  • 다른 곳에서 사용중인 함수나 메서드의 파라메터를 안전하게 추가하거나 삭제하는 기능
  • 함수의 시그니처 변경으로 발생할 수 있는 에러를 방지할 수 있다.
• safe delete
  • 단축키 : ^+D
  • 삭제하려는 변수나 객체의 의존관계를 파악하여 삭제하는 기능
  • 다른 곳에서 사용중인 변수나 객체를 파악하여 사용자가 안전하게 삭제할 수 있다.
• Extract Variable
  • 단축키 : Ctrl+Alt+V
  • 함수나 메서드내 여러번 사용되는 수식을 변수로 추출하는 기능
  • 중복된 수식을 변수화하여 가독성을 높일 수 있다.
• 단축키 변경
  • 메뉴 - Help - Keymap Reference
  • 이클립스 등 다른 툴의 단축키를 적용하여 사용할 수 있다.

웹스톰 설치 #

• 다운로드
  • 다운로드 경로 : https://www.jetbrains.com/ko-kr/webstorm/download/#section=windows
• 설치
  • 설치 안내 링크 : https://corock.tistory.com/391

동영상보기 #

• 웹스톰(WebStorm) Live Edit
  • Live Edit with Google Chrome
• 웹스톰(WebStorm) 에서 git 사용하기
  • [ToolCon2014] WebStorm에서 git사용하기
• 웹스톰(WebStorm)에서 자바스크립트 리팩토링하기
  • [ToolCon2014] WebStorm에서 자바스크립트 리팩토링하기