[node.js] WebStorm으로 프로젝트 생성부터 hello world 출력까지

WebStorm을 설치했으면 이제 node.js 프로젝트를 생성하고 hello world까지 출력해보기로 하자.

 

WebStorm을 실행하면 아래 그림처럼 메인화면이 뜬다.

Create New Project를 눌러본다.

WebStorm이 지원하는 프로젝트가 왼쪽 사이드바에 쭉 나열되어있고

오른쪽에는 대상 프로젝트의 폴더가 생성될 위치가 표시되고 있다.

node.js 프로젝트를 할 것이기 때문에 node.js를 누른다.

node.js를 눌러보니 프로젝트 폴더 생성 위치와 node.js를 실행할 런타임, 패키지 매니저를 선택하는 화면이 뜬다.

node.js를 설치하지 않았다고 하더라도 WebStorm에서 다운로드 받을 수 있게 유도를 하기 때문에 node.js를

설치하지 않았다면 Download Node.js를 선택하자. 그리고 프로젝트명은 HelloWorld로 바꿔준 후 Create 버튼을 누른다.

Create를 누르면 본격적인 개발 도구의 창의 모습이 출력된다.

맨 아래 작업표시줄의 가운데 부분을 유심히 보면 Downloading Node.js 12.13.1이라는 메세지가 출력되는 것을 볼 수 있다.

WebStorm이 직접 node.js 런타임 최신버전을 설치하고 있다는 메세지로, 잠시 기다리면 설치가 완료된다.

node.js 설치가 완료되면 자동으로 package.json 파일을 생성하고 편집화면을 띄운다.

node.js 프로젝트에서 package.json 파일이 하는 역할은? node.js 프로젝트 수행과 관련된 다양한 정보를 담고 있다.

프로젝트명, 버전, 설명, 시작될 자바스크립트 파일 등등등... 우선은 알고만 있자.

package.json 파일을 보면 이 프로젝트가 실행될 경우 index.js를 실행한다는 것처럼 보이는데

index.js 파일이 보이지 않는다. 그러면 만들어줘야지..

프로젝트명을 우클릭하고 New -> JavaScript File을 클릭하면 새로운 JavaScript 파일을 생성하는 창이 뜬다.

index.js를 입력하고 엔터를 쳐준다.

프로젝트 하위 항목으로 index.js가 추가되고 index.js의 편집화면이 뜨는게 보인다.

한 줄만 입력하면 hello world를 출력할 수 있다.

상단 메뉴에서 Run -> Run...을 누르면 실행할 수 있다.

단축키로 Alt+Shift+F10을 눌러도 똑같이 실행된다.

Run을 누르면 다음과 같은 창이 뜬다.

이 프로젝트에서 시작할 JavaScript 파일을 선택하라는 것이다.

package.json과 연동돼서 자동으로 시작할 파일이 선택되면 좋을 것 같다는 생각을 해본다.

아래 콘솔창에서 hello world가 출력되는 것을 확인할 수 있다.