안녕하세요 스타트업에서 근무하고 있는 신입 개발자입니다. 회사 내의 기술 스펙이 거의 자바스크립트를 기반으로 두고 있어 기존에 사용해왔던 IntelliJ에서 WebStrom으로 변경하게 되었습니다. 그래서 이번 기회에 Webstrom에 좀 더 친숙해지고 사용법을 읽힐 겸 간단하게 정리해봅니다.
물론 WebStrom 뿐만 아니라 JetBrains사의 IDE에서 공통적으로 사용이 가능합니다.
단축키는 Mac OS 기반으로 알려드리겠습니다.
동일 문자열 변경
⌘ + ⌃ + g
코드를 작성하다가 동일한 문자열을 변경해야 하는 경우는 빈번하게 발생합니다. 위 그림과 같이 특정 변수를 모두 변경해야 하는 경우가 대표적인 예입니다. 변수가 2~3이면 귀찮지 않은데 위 와 같은 경우에는 크게 귀찮아집니다. 이럴 때 유용하게 사용하는 기능입니다.
변경하고 싶은 문자열을 드래그 이후 command + control + g 단축키를 입력하면 동일 문자열을 한 번에 변경이 가능합니다.
동일한 위치 문자열 변경
⌥ + drag
동일 문자열과 비슷한 기능입니다. 만약 변경 대상이 동일한 문자열이 아닐 경우도 위와 같이 발생할 수 있습니다. 이러한 경우에 Alt + 마우스 드래그를 통해서 한 번에 변경하실 수 있습니다. 이 기능 익숙해지면 다양하게 사용할 수 있습니다.
복사 리스트
개발을 하면서 우리는 수없이 정말 수없이 복사 붙여 넣기를 합니다… 이럴 때 가장 불편한 점 중에 하나는 새로 복사할 때마다 이전 복사한 내용들이 없어진다는 점이죠.
이러한 경우에 command + shift + v를 사용하시면 간단하게 해결됩니다. 단축키를 입력하시면 복사한 리스트들 출력되고 해당 리스트에서 엔터키를 입력하면 됩니다
Live Template
코드를 작성하다 보면 중간중간 결과 값을 확인하기 위해서 console.log('')를 사용해서 확인 작업을 수없이 진행하게 됩니다. 이러한 반복적인 코드와 예약 어를 정의하고 예약 어를 통해서 코드를 불러오는 기능이 Live Template입니다.
저 같은 경우에는 예약어 clog로 console.log('')를 간단하게 작성합니다. 물론 이러한 간단한 코드는 그때그때 작성해도 크게 불 펴하지는 않지만 코드량이 길어지면 점점 귀찮아지기 시작합니다.
api를 호출하는 ajax 같은 코드도 빈번하게 작성되는 코드다 보니 위 그림과 같이 ajg 예약어로 ajax get 코드를 간단하게 작성하실 수 있습니다.
하지만 저 같은 신입의 경우 해당 코드를 어느 정도 숙지가 완료되었을 때 Live Template에 추가하는 것을 권장드립니다. 코드를 숙지하지 않고 IDE기능을 통해서만 작성하는 것은 좋은 습관은 아니라고 생각합니다.
Live Template 등록 방법
⌘ + ,단축키를 통해서 설정에 들어가시면 Live Template 항목에서 해당 언어의 Template을 설정할 수 있습니다. 자바스크립트뿐만 아니라 다양하 언어의 Template 지정할 수 있습니다. 반드시 하단에 Define을 클릭하시고 해당 언어를 다시 한번 정의해주셔야 됩니다.
이번에 소개해드린 기능들은 제가 가장 많이 사용하고, 유용하게 사용하는 기능들입니다. 앞으로는 좀 더 막강한 기능들을 공부해서 소개하여드리도록 하겠습니다.
조금이나마 도움이 되셨기를 바랍니다. 긴 글 읽어주셔서 감사드립니다.
