[node.js] VSCode 에서 Node.js 개발환경 구축

목표

 Node.js를 사용하기 위해 VSCode(Visual Studio Code)에 개발환경을 구축하고, 프로젝트를 생성하여 명령문 작성 및 명령문 실행을 하는 것이 목표입니다.

 

목차

1. Node.js 설치

2. VSCode 설치

3. VSCode에서 Node.js 실행

   3.1 Nodejs 프로젝트 폴더 생성

   3.2 VSCode 프로젝트 폴더 추가

   3.3 파일 추가 및 코드 작성

   3.4 터미널 창 통한 명령문 실행

 

개발환경 구축 방법

 Node.js를 VSCode(Visual Studio Code)에 개발환경을 구축하기 위해 추가적인 플러그인을 필요로 하진 않습니다. 단지 Node.js의 설치와 VSCode의 설치만 하면 됩니다. 이번 글에선 VSCode에서 폴더 및 파일 추가와 Node.js의 코드를 실행시키는 순으로 진행합니다.

 

1. Node.js를 설치.

 

 - [nodejs]Node.js 설치방법 [윈도우] 를 참고.

 

2. VSCode 설치.

 

 - 비주얼 스튜디오 코드(Visual studio Code;VSCode) 설치 방법[윈도우 기준] 를 참고.

 

3. VSCode에서 Nodejs 실행하기

 

3.1 Nodejs 프로젝트 폴더 생성

 

 - Node.js 워크스페이스로 활용할 폴더를 생성합니다.

 

 - 저의 경우 D:\nodejs\test로 하였습니다.

 

그림 1

 

3.2 VSCode 프로젝트 폴더 추가

 

 - 상단 메뉴바에서 [File]을 선택, [Open Folder]를 클릭합니다.

 

그림 2

 

 - 자신이 원하는 프로젝트 폴더를 선택하여 [폴더 선택]을 누르거나 혹은 해당 폴더를 들어가 있는 상태에서 [폴더 선택]을 누릅니다.

 

 

 - 왼쪽 사이드 바를 보시면 폴더가 추가 된 것을 볼 수 있습니다.

 

그림 5

 

3.3 파일 추가 및 코드 작성

 

 - 사이드 바에 추가된 폴더 영역에 마우스를 두고 오른쪽을 클릭 [New File]을 클릭합니다.

 

그림 6

 

 - 입력란에 자신이 원하는 '프로젝트명.js'를 입력 후 [enter]를 누릅니다.

 

그림 7

 

그림 8

 

 - 테스트를 위한 코드 "consonle.log("Hello Node.js");"를 입력 후, [ctrl + s]를 눌러서 저장합니다.

 

그림 9

 

3.4 터미널 창 통한 명령문 실행 

 

 - 상단 메뉴바에서 [View]를 클릭 [Terminal]을 클릭하여 터미널 창을 띄웁니다.

 

그림 10

 

 - "node 파일명.js"를 눌러서 해당 js파일을 실행시킵니다.

 

그림 11

 

 - console 명령이 실행 된 것을 확인합니다.

 

그림 12

 

Reference

 

Date

• 2020.09.15 작성