[TS/JS] TS와 JS를 웹스톰에 싸서 드셔보세요

JS나 TS 개발자분들은 대부분 사용하시는 툴이 VSCode일거라고 생각합니다.

 

하지만 해외 사이트에서 조사한 결과 VSCode보다 더 많은 득표를 받은 ide가 있습니다.

(물론 VSCode는 IDE라기보단 Editor에 가깝습니다)

 

15 Best Javascript IDE & Code Editors Review

 

 

바로 Jetbrain의 Webstorm입니다.

WebStorm: The Smartest JavaScript IDE, by JetBrains

 

Webstorm이 어떤 강점을 가지고있길래 이렇게 해외 사이트에서 득표율이 높은걸까요?

사실 여러가지 이유가 있겠지만, 그건 다른 사이트에도 나와있으니 제 경험을 기반으로 주관적으로 작성해보도록 하겠습니다.

 

일단 필자는 TypeScript / React.js 를 사용하고있음을 미리 알려드립니다.

 

타입 표시

타입스크립트를 쓰면서 가장 유용했던 기능입니다. ide에서 자체적으로 해당 변수의 type를 추적해줍니다.

TypeScript의 타입체커와 비슷한 기능을 하고 있다고 볼 수 있습니다.

 

여기에서 타입을 바로바로 확인시켜주기때문에, 타입을 정확히 알지 못할 때 매우 유용하게 사용됩니다.

가령 React와 TS를 처음 같이 쓸 때, React 요소들의 타입을 바로바로 알기 어려운데, Webstorm에서는 모두 추적해서 보여주기 때문에, 관련된 타입 혹은 인터페이스를 사용할 때 이를 참고하여 작성하면 효율이 좋습니다.

 

리팩토링

필자가 생각하는 두번째 유용했던 기능입니다.

어떤 파일의 경로를 변경하거나 한다면 import 경로에 들어가서 하나하나 바꿔줘야하는 문제점이 존재합니다..만

 

Webstorm에서는 저 리팩터링 버튼 하나면 관련된 모든 파일의 이름 혹은 경로까지 모두 수정해줍니다.

하나하나 다 찾아서 수정해주기때문에 사람이 직접 바꾸는거보다 더 정확하구요.

 

하나하나는 VSCode도 된다구요? WebStorm은 여러개도 됩니다.

 

단축키

function something(data) {
  if (typeof data == "number") {
    return false;
  }
  ...
}

이런 코드가 있다고 할 때

function something(data) {
  if (typeof data == "number") {
    return false;
  }
  if (isValid(data)) {
    return false;
  }
}

isValid라는 함수가 정의되어있지 않을 때 ctrl(command) + . 을 누르면 외부에 해당 함수를 정의할 수 있습니다.

이 외에도 다양하고 강력한 단축키가 있습니다

 

커스터마이징

 

---

요즘 웹스톰을 쓰며 개인적으로 너무 편하다고 생각해서, 여러 사람이 썼으면 좋겠다고 생각하여 포스팅해보았습니다

다만 이 모든 장점을 뒤엎는 단 한가지의 단점은 유료라는건데

 

학생/교직원 이라면 무료로 제공하니 꼭 써보시길 바랍니다!