[Node.js 개발환경] Node.js 및 VS code 설치, Node.js 초기 프로젝트 생성 및 실행

안녕하세요, 윈도 OS 환경에서 Node.js (노드js) 및 VS code (Visual Studio Code, 비주얼 스튜디오 코드) 설치 후, VS Code에서 Node.js 프로젝트 생성 및 실행에 대해 포스팅하도록 하겠습니다.

 

Node.js 설치

먼저, 아래 사이트에서 최신 버전 Node.js를 다운로드 합니다.

https://nodejs.org/ko/ 

Node.js

node.js download

 

안정적, 신뢰도 높음 버전을 저는 선택을 하였는데, 최신 버전을 선택하셔도 무방합니다^^

다운로드한 설치 파일을 실행합니다.

 

node.js 설치

node.js 설치

 

위와 같이, License 동의를 체크해주시고, 특별히 저장 위치 변경 등 세팅할 것이 따로 없으시다면 계속 Next 버튼을 클릭하여 설치를 해줍니다. (Native Modules은 기본적인 개발 진행에서 별 필요가 없는 것으로 알고 있어, 우선은 선택하지 않은 채 설치를 해줍니다.)

이렇게 간단하게 Node.js 설치가 완료되었습니다.

 

VS Code (Visual Studio Code) 설치

다음으로는 Node.js의 가장 많이 사용되는 개발 툴인 VS Code를 설치하겠습니다. MS사에서 만든 오픈소스 IDE로 설치도 간편하고 가볍고 사용이 편리합니다. 아래의 공식 사이트에서 자신의 OS에 맞는 설치 파일을 다운로드합니다.

https://code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

VS Code 다운로드

 

다운로드한 설치 파일을 실행하여, 아래와 같이 라이선스 동의 후 설치 폴더 선택 후 다음 버튼을 계속 클릭하여 설치를 해줍니다. 설치가 완료되면 위와 같이 VS Code가 정상적으로 실행되는 것을 보실 수 있습니다.

 

VS Code 설치

VS Code 설치

 

VS Code 실행 화면

Node.js 프로젝트 생성 및 실행

VS code에서 Node.js 프로젝트를 생성하고 실행하는 것은 매우 간단합니다.

먼저, 윈도 파일 탐색기에서 Node.js 프로젝트로 사용할 임의의 폴더를 생성해 줍니다.

 

폴더 생성

 

VS Code 프로그램으로 가서 상단 메뉴에 File > Open Folder를 선택하여, 방금 생성한 폴더를 선택합니다.

 

오픈 폴더

 

아래와 같이 Explorer 탭이 오픈이 되고, 방금 내가 오픈한 폴더가 리스트에 있는 것을 확인하실 수 있습니다.

 

폴더 확인

 

다음으로 VS Code내에서 Terminal 오픈을 하도록 하겠습니다.

상단 메뉴바에서 View > Terminal을 눌러서 터미널을 오픈해줍니다.

그러면 아래와 같이 하단에 터미널이 오픈이 됩니다. 앞으로 진행될 명령은 CMD 창을 따로 오픈해서 입력하셔도 상관은 없지만, 이렇게 VS Code 내에서 진행을 하는 것이 창이동 없이 더 간편합니다.

 

터미널 보기

터미널 오픈 화면

 

이제 Node.js를 설치할 때 자동으로 설치되는 자바 패키지 관리 모듈인 NPM을 이용해서 프로젝트의 package.json 파일을 생성하도록 하겠습니다. package.json 파일은 Node.js의 프로젝트 기본 정보, 의존성 정보 등을 저장하는 json 파일로 JAVA Maven 프로젝트의 pom.xml과 유사한 역할이라고 생각하시면 됩니다.

 

하단 터미널 창에 NPM init이라는 명령을 치면, 프로젝트의 기본정보를 작성하도록 여러 항목들이 나옵니다. 실제로 작성을 하셔도 되고, 엔터를 계속 클릭하셔서 Default 값으로 세팅된 파일을 만들도록 해도 됩니다.

다 작성이 되면 프로젝트 폴더에 package.json 파일이 생성됩니다.

 

npm init

 

npm init

(Dark 테마가 보기가 편해서 급 Dark 테마로 변경했습니다. 테마 변경은 File > Prefernces > Color Theme..)

 

프로젝트 최초 실행 자바스크립트 파일인 index.js 파일을 생성하도록 하겠습니다. 

(package.json 파일 main 항목에 설정되어 있습니다.)

우측 Explore 탭에서 New file 아이콘을 클릭하여, index.js라는 이름의 Javascript 파일을 생성합니다.

 

파일 생성

 

생성된 index.js을 열어서 아래와 같이 콘솔 로그를 찍도록 간단히 코드를 작성합니다.

 

console.log("노드js 프로젝트 시작!!")

 

이제 Node.js 프로젝트를 실행을 하면 되는데요, 아래와 같이 터미널에서 node index.js 명령을 통해 프로젝트를 실행할 수도 있습니다.

하지만, VS code의 Run and Debug 메뉴를 통해 좀 더 쉽게 실행을 할 수 있도록 세팅을 하도록 하겠습니다. 개발을 하면서 VS code에서 버튼을 통해 간단히 실행을 하고 디버깅을 할 수 있기 때문에 초기에 세팅을 해주시는 게 좋습니다.

 

콘솔 실행

 

우측 Run and Debug 탭으로 이동을 하면, VS code에서 프로젝트 실행에 필요한 launch.json 파일이 아직 없기 때문에, 아래와 같이 create a launch.json file이라는 버튼이 보입니다. 이 버튼을 클릭하여 launch.json을 생성합니다. 

 

launch.json 파일 생성

 

그러면 아래와 같이 Launch Type을 선택하도록 되어 있는데, 당연히 Node.js를 선택합니다. 그러면 launch.json 파일이 생성되는 것을 확인할 수 있습니다.

 

launch.json - node.js 선택

 

이제 VS code에서 프로젝트 실행은 Run and Debug 탭으로 이동하여 해당 Launch name을 선택 후 F5 버튼 혹은 아래 화살표 버튼을 클릭하면 Node.js 프로젝트가 정상적으로 실행이 되는 것을 확인할 수 있습니다.

 

프로젝트 실행 화면