Web

Webstorm 설치 및 설정, node js + express 프로젝트 생성

VallistA2017. 2. 7. 00:54

webstorm 을 사용하기에 앞서 webstorm에 대해 알아보자.


<사진 1. 웹 스톰의 로고>


1. webstorm 이란?


webstorm은 net beans, InteliJ등으로 유명한 JET BRAINS사에서 만든 프론트 앤드 전용 IDE.

webstorm은 본디 프론트 엔드에서 많은 수요가 있었던 IDE인데, HTML, CSS, Javascript등을 주로 사용할 수 있었다.


하지만 지금에 이르러서는 JavaScript 기반으로 된 서버 기술이 상당히 많아지고 발전함에 따라서 서버에서도 적극적으로 쓰이는 IDE가 되었다.


2. 왜 webstorm을 쓰는가? 수많은 IDE를 제쳐두고?


webstorm을 쓰는 이유를 아주 간략히 말하자면 먼저 이름값을 언급해야겠다. JET BRAINS는 수많은 안드로이드 개발자들을 위한 툴인 InteliJ의 개발 회사이며, 그러한 회사에서 개발한 툴에 대해서는 먼저 신용이 있으며 기술이 존재한다.


앞선 Eclipse등의 Javascript 관련 툴의 경우 사용하게되면 잔버그, 별로 좋지않은 UI, 쉽지않은 공유또한 문제.


webstorm은 깃, 깃허브등 공유 프로그램을 실시간으로 IDE내에서 사용할 수 있으며 수준높은 완성도를 보여주며

타 공짜 툴들과는 급이 다른 수준의 어시스트를 해준다.


그 외의 장점도 많지만 다뤄보면서 이야기 해보는 것으로..


3. 설치


webstorm은 유료 IDE이며 공식 사이트에서 받을 수 있다.


다운로드 링크


위의 다운로드 링크를 클릭시 설치페이지로 이동된다.


webstorm은 30일 free trial을 제공하며 30일 이후에는 결제를 해야한다.


<사진 2. 웹 스톰 결제>


웹 스톰은 이전엔 한번에 구입하면 완전히 쓸 수 있었지만 현재는 달, 년 단위로 구매를 해야하는 정책으로 변경이 되었다.

취업자가 아니면 가격이 부담될 수 있으니 잘 생각해보고 구매하면 된다.


다운로드 링크로 가셔서 다운로드 받으시면 IDE를 실행 할 수 있게 되며

딱히 다운로드에 어려운점은 없기 때문에 생략하도록 한다.


4. Node.js 설치


Webstorm을 설치하기전 Node JS를 설치하시고 webstorm을 진행하셔야 자동으로 node js의 경로가 잡히기 때문에 설치전이나 실행전으로 설치하는 것을 추천한다.


다운로드 링크


위의 다운로드 링크를 클릭시 설치페이지로 이동됨

최신버전을 받아도 되고 LTS 버전을 받아도 된다.


그리고 node.js의 설치를 확인하도록 하자. 윈도우에서 window key + r 을 입력후 cmd를 입력후

그 후 나오는 commend prompt 창에서 node -v && npm -- version 을 입력


<사진 3. node js, npm version 체크>


5. webstorm에서 프로젝트 생성



다운로드 받은 webstorm을 실행해보도록 하자.

필자는 webstorm의 버전이 11.0 이기 때문에 11.0을 기준으로 작성하였다.


<사진 4. webstorm에서의 시작화면>


webstorm을 시작하면 이러한 화면에서 시작한다. 초기에는 왼쪽의 리스트가 없을 것이다. (왼쪽은 최근 시작한 프로젝트 리스트)


Create New Project


<사진 5. webstorm에서 Create New Project page>


눌러주면 왼쪽에 지원하는 프로젝트들이 제공되는 것을 볼 수 있으며 이 중에 Node.js Express App을 눌러주면 된다.


여기서 중요한 점은 Location의 위치에서 새로운 폴더를 만들어주고 그 안을 링크로 해야한다는 점인데,

예를 들자면 바탕화면을 하기위해 Desktop을 지정해버리면 Desktop에 파일들이 풀어져버린다. 즉 Destkop/new folder 이런식으로 지정을 해주어야 깔끔한 시작이 완료된다.


Options 안에는 express에서 쓰일 template과 css가 있는데 저 사진의 세팅대로 하도록 하자. 가장 많이쓰이는 설정이며

jade에 대해서는 조만간 다룰 예정이니 다루게 되면 바로 이 글에 첨부하도록 하겠다.


6. 생성 후 세팅


<사진 6. webstorm에서 프로젝트를 생성후 나오는 화면>


생성을 하게되면 express 세팅에 맞춘 node js 프로젝트가 만들어진다.


7. 실행 해보기


위의 사진에서 오른쪽 상단의 녹색 플레이 버튼 또는 하단의 Terminal에서 "npm start" 라고 입력한다.


<사진 7. terminal에서 npm start를 입력>


<사진 8. 결과>

<사진 9. 버튼으로 실행한 결과>


그러고 나서 크롬에서 127.0.0.1:3000 주소를 검색해서 들어가면 방금 node js + express로 만든 서버가 동작하는 화면을 볼 수 있을 것이다.


<사진 10. node js + express로 만든 웹페이지>


<사진 11. 접속이 정상적으로 됨>


이렇게 출력이 완료되면 완료.

'Web' 카테고리의 다른 글

Webstorm github 연결  (0) 2017.02.14
Node-mysql 사용  (0) 2017.02.14
MySQL 사용  (0) 2017.02.13
MySQL 구조  (0) 2017.02.10
Mysql 설치 및 환경 설정  (0) 2017.02.10
Webstorm 설치 및 설정, node js + express 프로젝트 생성  (0) 2017.02.07

댓글

댓글쓰기 폼

VallistA

병특이 끝나서 게임에서 웹으로 스위칭한 프로그래머.
프로그래밍 정보등을 공유합니다.

자고 싶습니다. ㅠㅠ

페이스북    :: 링크
카카오톡    :: kingbye1
Github      :: 링크

궁금한점 문의 주시면 답변드리도록 하겠습니다

VISITED

Today : 19

Total : 414,365

SNS

  • 페이스북아이콘
  • 카카오톡아이콘
  • 트위터아이콘