Webstorm으로 Node.js Express 개발환경 셋팅
안녕하세요.
고코더 입니다.
오늘은 이전 시간에 배운 ejs로
프로젝트를 다시 생성합니다. 하지만 복습은 아닙니다.
개발툴를 활용해 node를 생성할 것 입니다.
세상에서 가장 훌륭한 메모장으로 개발하진 않을 것 입니다.
노드를 개발할때 가장 많이 사용하는 도구는 이클립스와 webstorm 입니다.
둘에 차이는 무료와 유료 입니다.기능은 당연히 인텔리제이가 훨씬 낫습니다.
이클립스는 다른 분들이 많이 다루고 강의해주시니
저희는 더 최신화된 인텔리제이에 웹스톰을 이용해 실습해보겠습니다.
● 1. 웹스톰을 다운로드 받아주세요.
저와 동일한 버전으로 실습하실려면
2017.2.5 버전을 다운로드 해주세요
● 2. 다운로드와 설치 과정은 다른 글로 정리했습니다. 참고해주세요
● 3. WebStorm을 실행했다면 new Project를 만들겠습니다.
● 4. 왼쪽 탭에서 Node.js Express App를 선택합니다.
location은 D:\node\gocoder 으로 정했습니다. (이전에 실습했던 파일은 삭제했습니다.)
그리고 Template 에서 EJS로 선택 합니다.
● 5. 그럼 이전에 배웠던 명령어로 express로 프로젝트를 생성하고
npm install 까지 자동으로 웹스톰이 셋팅 해주었습니다.
(이렇게 편하니 개발도구를 사용하죠)
● 6. 그리고 웹스톰에서 위에 보면 익숙한 명령어가 보입니다
플레이 버튼을 누르면
● 7. 프로젝트에 노드 서버 실행 됩니다.
● 8. 역시 서버가 실행 되어 정상적으로 수행하는 모습이 보입니다.
● 9. 프로젝트가 설치된 폴더로 이동하면 확장자 ejs로 생성된 view 프로젝트를 확인 할 수 있습니다.
D:\node\gocoder\views
(이전에 우리가 커맨드로 설치한 버전은 기본 옵션은 jade라는거 기억하시죠?)
● 10. ejs 파일을 확인해보니 HTML 형태에 템플릿도 잘 확인됩니다.
커맨드 방법도 어렵진 않았지만
웹스톰으로는 버튼 두번이면 완료네요.
마무리
그래도 커맨드에서 수작업으로
설치해보는 경험이 나중에 큰 도움이 됩니다.
'IT_Developers > Node.js' 카테고리의 다른 글
| Node.js - routes 기본 생성 예제 (0) | 2019.07.29 |
|---|---|
| Node.js - nodemon 설치, 실행방법 / webstorm 연동 (2) | 2019.07.29 |
| Node.js - ejs 와 jade를 비교 살펴보기 (0) | 2019.07.28 |
| Node.Js - Express 서버 실행 / hello Express(node) / Port 변경 (2) | 2019.07.28 |
| Node.Js - Express 프로젝트 생성하기 / package.json 설치 (0) | 2019.07.27 |
댓글