[Node.js] 개발 환경 구축하기(Express 서버 구축) - Visual Studio Code

Node.js - Visual Studio Code로 개발 환경 구축

새로운 개인 프로젝트를 Node.js를 사용하여 환경구축

하기 위해 Visual Studio Code로 개발환경 구축 방법을 기록한다.

목차

1. Node.js 설치 및 환경변수 등록 
2. Visual Studio Code 설치 및 Node.js 환경구축
3. Node.js Express 서버 구축
4. Node.js Express서버에 Nodemon 라이브러리 사용하기

---

 

 

1. Node.js 설치 및 환경변수 등록

 

https://nodejs.org/ko/

Node.js

위 링크에서 LTS버전을 다운받는다.

 

1) 설치가 완료됐으면 Node.js 실행 후 코드를 날려본다.

 

2) Node.js 환경변수 설정

위에서 default로 설치했다면 위치는 C:\Program Files\nodejs 이다. 시스템 변수에 NODE_HOME의 변수명으로 등록한다.

 

그 후 변수가 Path인 부분을 누르고 편집을 눌러 위 사진과 같이 추가하여 저장한다.

 

그 후에 window에서 cmd를 실행하여 버전을 확인한다.

위와 같이 버전이 확인되면 설치가 완료된 것이다.

 

이후 컴퓨터 다시시작

---

 

2. Visual Studio Code 설치 

 

https://code.visualstudio.com/Download

Download Visual Studio Code - Mac, Linux, Windows

본인에 맞는 운영체제 선택하여 다운받는다.

 

 

1) 설치가 끝나면 파일 -> 폴더열기 -> 아무 폴더 클릭 -> 터미널 -> 새 터미널 클릭 ->npm init명령어 입력

 

* 아래와 같이 오류가 발생한다면 터미널의 설정이 powershell로 되어있는 경우임

이럴 경우 ctrl + shift + p 터미널의 기본 프로필을 아래와 같이 변경해주고 터미널 닫았다가 다시 실행한다.

 

 

2) 명령어를 실행하면 package name 입력창이 뜬다. npm을 사용하기 위한 inital 과정으로 몇 가지 정보를 사전에 등록할 수 있지만 전부 Enter키로 넘어가준다.

---

 

3. Node.js Express 서버 구축

 

1) 터미널 창에서 npm install express --save 명령어를 실행하여 Express 모듈을 설치한다.

위처럼 package.json 파일에 dependencies에 express버전이 추가됐으면 성공

 

 

2) server.js 서버 파일 생성한다.

// express 불러오기
const express = require("express");
// express 사용
const app = express();
// 포트번호 설정
const port = 5000;

// http 서버 실행
app.listen(port,() =>{
    console.log("서버가 정상적으로 실행되었습니다.");
});

// http:/localhost:5000/ 경로로 접근하면
app.get("/",(request,response)=>{
    response.send("성공입니다.");
});

위처럼 저장하고 터미널에 node server.js 명령어를 실행한다.

---

 

4. Node.js Express서버에 Nodemon 라이브러리 사용하기

 

Node.js로 개발을 하면서 소스 코드를 수정할 때마다 서버를 완전히 종료 후 다시 시작하여 변경된 내용을 서버에 반영하는 작업을 반복하게 된다.

 

npm에 Nodemon이라는 라이브러리를 사용하게 되면 js파일의 내용이 변경될 때마다 이것을 감지해 서버를 자동으로 restart 시켜준다. (html, css파일 등은 감지 안됨)

 

 

1) npm install -g nodemon 터미널 명령어를 실행한다.

 

2) package.json 파일 스크립트 수정 (scripts 수정)

dependencies의 nodemon은 nodemon 글로벌로 설치 시 자동 생성 됨

 

 

3) npm start 명령어로 서버 실행

 

4) js파일 수정 

자동으로 서버가 restart되면서 반영되는 것을 볼 수 있다.