Node.js 와 Express 를 이용하여 웹 서버를 구현하기 위해 필요한 세팅 과정을 알아봅시다.

🧩 Node JS 가 뭘까?

Node.js 는 자바스크립트를 브라우저 밖에서도 사용하기 위해 개발되었습니다.
자바스크립트는 브라우저 종속적이라서 브라우저 외부에서는 사용할 수가 없었죠.

그러나 Node.js 의 탄생으로 프론트엔드뿐만 아니라 백엔드 분야에서도 JS 의 문법을 사용하여 개발할 수 있게 되었습니다.

쉽게 말해, Node.js 는 브라우저 밖에서 사용 가능한 JS 라고 볼 수 있습니다.
JS 문법으로 작성한 코드를 브라우저가 아니라 내 로컬 터미널을 통해 확인 가능한 것이죠.

✨ Express

express 는 Node JS 로 웹 어플리케이션을 편하게 구현하기 위해 만들어진 프레임워크입니다.
express 를 이용하여 app 을 만들고, 그 앱이 서버의 역할을 하여 브라우저의 요청에 응답하게 만듭니다.

🚩 구현 환경 세팅하기

이제 웹 서버를 만들기 위해 몇 가지 세팅을 해줍시다.
기본적으로 Node.js 가 설치되어있다고 가정합니다.

윈도우 사용자는 WSL 을 이용하면 콘솔 로딩을 빠르게 처리할 수 있으니
리눅스 home 디렉토리 내에서 개발하는 것을 추천합니다.

1. package.json 파일 만들기

package.json 파일에는 사용자가 만드는 웹 어플리케이션에 대한 다양한 정보가 담깁니다.

터미널에서 내 프로젝트를 만들 디렉토리에 들어온 후, 명령어를 이용하여 파일을 생성해봅시다.

npm init

위 명령어를 입력하면, 자동으로 package.json 파일을 만들기 위해 필요한 정보들을 물어봅니다.
license 는 MIT 로 입력해주고 나머지 사항은 기본 세팅을 따라도 무방합니다.

필요 정보를 모두 입력하면 디렉토리 내부에 package.json 파일이 생성됩니다.
파일에는 다양한 정보가 들어있습니다.

 "scripts": {
    "go": "node index.js"
  }

그 중 scripts 에는, 긴 명령어를 특정 단어로 지정하여 실행할 수 있습니다.
위에는 "node index.js" 라는 명령어를 "go" 라는 약칭으로 지정했습니다.

npm run go
// node index.js 와 동일!

터미널 창에 npm run go 를 치면, 지정된 명령어를 실행합니다.
실행할 명령어가 길어질수록 아주 유리합니다.

2. express 설치하기

이제 express 를 설치해봅시다.

npm install express
// npm i express 와 동일

터미널에 위 명령어를 입력하면 node_modules 라는 폴더가 생성되고
그 폴더 내부에 express 관련 파일들이 생성됩니다.

또한 package.json 파일의 dependencies 항목에

"dependencies": {
    "express": "^4.18.1"
  }

이렇게 express 에 대한 항목이 추가되어있는 것을 확인할 수 있습니다.
이는 어플리케이션이 해당 버전의 express 를 사용하고 있다는 것을 나타냅니다.

express 를 설치하면, 웹 서버를 실행시킬 수 있습니다.

const express = require("express");

const app = express();

이렇게 하면, express 의 인스턴스 app 이 생성되고, app 에서 다양한 메소드를 실행함으로서 서버를 구현할 수 있게 됩니다.

3. babel 을 이용한 최신 문법 사용하기

프로그래밍 언어는 버전을 거듭하다보면 문법이 바뀔 때가 있습니다.
기존의 문법이 리뉴얼 되어서 최신 문법이 생성될 때도 있고요.
하지만 최신 문법은 이전 버전에서는 사용할 수 없죠.

그러나 babel 을 사용하면 자동으로 컴파일하여 내가 쓴 코드를 버전에 맞게 변환해줍니다.

✅ babel

위 사이트에서 babel 을 설치할 수 있습니다.
Set up 의 Language API 에서 Node 를 선택하고, 밑에 나온 설명에 따라 설치합니다.

babel-node index.js

babel 을 설치하고 위 명령어를 실행하면, babel 이 index.js 파일을 컴파일 해준 후 실행됩니다.

4. nodemon 설치하기

서버에 대한 코드를 index.js 에 작성한 후 babel-node index.js 를 하면 서버가 실행됩니다.

그러나 서버를 수정할 때마다 터미널에서 명령어를 실행하여 서버를 돌리는 것은 매우 귀찮습니다.

하지만, nodemon 을 설치하면 index.js 를 수정하고 저장할 때마다 새로 서버를 실행하도록 할 수 있습니다.

npm install nodemon --save-dev

터미널에서 위 명령어를 실행하면 nodemon 이 설치됩니다.

npm install @babel/core @babel/node --save-dev

위 명령어도 실행하여 nodemon 을 위한 babel core 를 설치해줍니다.

"dependencies": {
    "express": "^4.18.1"
  },
  "devDependencies": {
    "@babel/core": "^7.18.9",
    "@babel/node": "^7.18.9",
    "@babel/preset-env": "^7.18.9",
    "nodemon": "^2.0.19"
  }

전부 설치되면, package.json 파일에 위와 같이 설치된 사양이 표시됩니다.

이 부분을 그대로 복사하여 package.json 파일 외에 아무 모듈도 설치되지 않은 폴더에서

npm i

위 명령어를 실행하면...

npm 이 똑똑하게도 내 json 파일의 dependencies 에 적힌 모든 모듈을 다운받습니다.

이는 소스를 배포할 때 용량을 줄이기 위해 사용하는 방식입니다.
사용자가 package.json 파일과 소스파일만 다운받은 후, npm install 을 실행하면 그 사용자의 로컬 컴퓨터에서 설치를 실행하는 것이죠.

nodemon --exec babel-node index.js

위 명령어를 실행하면 index.js 파일을 수정하고 저장할 때마다 새롭게 파일을 실행합니다.