[200제] 02. 웹스톰 설치 및 hello 출력

 

Node.js 로 개발 시 웹스톰을 이용하면 편하게 개발이 가능.

기타 편집기를 이용해도 가능 하다 

물론 VS 코드를 사용 해도 괜찮으니 본인은 이번 포스팅 이후로는 VS 코드를 사용 하도록 할 예정이다.

웹스톰을 설치 하기 앞서 웹스톰이 어떤 녀석인지 확인 해보자 

 

웹스톰은 https://www.jetbrains.com/webstorm에서 다운이 가능하다.

해당 제품은 30일 평가판이며 유료이다. 그렇기에 돈이 없는 본인은... 무료인 VS 코드를 사용 하도록 하겠다. 

해당 내용은 GPT 에게 물어본 내용을 정리 해보았다. (이번 포스팅은 쉬어 가는 포스팅으로 넘어가자...) 

 

✅ 웹스톰(WebStorm)이란?

• 제작사: JetBrains (IntelliJ, PyCharm 만든 회사)
• 용도:
  • JavaScript, TypeScript, HTML, CSS 기반 프로젝트 개발
  • React, Vue, Angular, Node.js 등 최신 프레임워크 지원
• 형태:
  • 유료 IDE (학생, 오픈소스는 무료 라이선스 가능)

 

✅ 주요 특징

• 스마트 코드 자동완성 → 변수, 함수, 라이브러리 자동 제안
• 디버깅 지원 → Node.js, 브라우저 디버깅 가능
• 버전 관리(Git) 통합 → Git, GitHub 연동 쉬움
• 테스트 지원 → Jest, Mocha 같은 JS 테스트 프레임워크 지원
• 플러그인 & 테마 → 다양한 확장 가능

 

✅ 웹스톰을 쓰는 이유

• VS Code보다 더 강력한 코드 분석, 자동완성, 리팩토링 기능
• 대형 프로젝트에서 생산성 향상
• Node.js, React, Vue 등 프레임워크 기반 개발을 많이 하는 경우 유용

비교 항목	VS Code	WebStorm
가격	무료 (오픈소스)	유료 (1년 약 10만원, 학생/오픈소스 무료)
가벼움	매우 가볍고 빠름	상대적으로 무거움
플러그인	풍부, 커뮤니티 강력	기본 기능 강력, JetBrains 플러그인 사용
자동완성	기본 + 확장 설치 필요	기본부터 매우 강력
리팩토링	기본 기능 약함 (플러그인 필요)	고급 리팩토링 기능 제공
프로젝트 규모	소규모/중규모에 적합	대규모 프로젝트에 강함
디버깅	확장 설치 필요	내장 디버깅 기능 완벽 지원
UI/UX	심플, 자유도 높음	IntelliJ 기반, 일관성 있는 인터페이스

 

✅ WebStorm은 언제 필요?

• 대규모 프로젝트에서 고급 리팩토링 기능이 필요할 때
• 기업에서 JetBrains 툴을 표준으로 사용하고 있을 때
• 타입스크립트, React, Angular 등 대형 SPA 프로젝트에서 코드 분석이 더 정확해야 할 때

 

참고로 웹 스톰은 자바스크립트 전용 IDE 이기에 파이썬 개발 기능이 내장 되어 있지 않다. 

그렇기에 PyCharm을 따로 제공한다. 

 

다시 말해서 VS code는 하나로 사용이 가능하나 

이 웹 스톰을 사용 시, python 은PyCharm을 따로 설치 해야 하니 번거롭다. 

 

하여 본인은 설치를 안하고 이런게 있구나... 라고만 훑어보고 넘어가도록 하겠다. (포스팅을 하였지만 안한 느낌이랄까...) 

---

참고:
본 내용은 「초보자를 위한 Node.js 200제」(김경록님, 정지현님)를 기반으로 하였으며,
본 글은 개인 공부용으로 작성되었으며 상업적 사용은 불가합니다.