[Node] Express를 이용해 API 서버 만드는 방법 1

1.  Express 초기 환경 세팅 

이번에는 Express를 이용한 웹 개발 프로젝트 시 필수로 진행해야 하는 초기 환경 세팅 가이드를 알려드리려고 합니다. 

 

1️⃣  Express 설치방법

프로젝트를 진행할 폴더를 만들고 폴더 경로로 진입합니다. 

# 프로젝트 폴더 생성
mkdir testapp

# 폴더로 진입
cd testapp

 

아래 명령어를 사용해 애플리케이션에 package.json 파일을 생성합니다. 뒤에 붙는 -y 명령어는 디폴트 값으로 제공하는 기본 설정 값을 남겨두게 해 줍니다. 

npm init -y

 

만일 뒤에 -y 명령어를 생략하면 다양한 내용들을 입력하도록 요구하게 되며, 우선 엔터를 치면서 디폴트 내용을 저장하면 위 내용과 같은 결과가 나오게 될 것입니다. 기본적으로 디폴트 내용의 최종 내용은 다음 package.json 상에 기록되며 추후 언제든 원하는 내용을 추가 및 수정이 가능합니다. 

 

가장 메인이 되는 파일 명칭은 상관 없지만 index.js의 "main" 부분을 일반적으로 많이 사용하는 app.js로 파일명을 변경하겠습니다. 

// package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

 

다음 npm 명령어를 이용해 아래 express를 설치해 배포용으로 쓰일 패키지임을 명시하는 package.json 파일 내 "dependency list"에 저장합니다. 

# 배포용으로 쓰일 패키지임을 명시하는 dependency list에 저장
npm install express

# 일시적으로 사용하고 배포용에는 저장하고 싶지 않다면 
npm install express --no-save

# dependencies가 아닌 로컬 개발환경에서 쓰고 싶은 패키지들을 관리하는 devDependencies에 해당 내용을 저장하고 싶다면 
npm install express --save-dev

 

 

2️⃣  nodemon

Nodemon 공식문서 

 

🔵 nodemon 이란? 

Node에서는 코드에 수정이 일어날 때, 코드의 수정 사항이 서버에 자동으로 반영되지 않습니다. 즉, 코드를 수정하면 서버를 계속 다시 켜주어야 한다는 것입니다. 이를 보완하기 위해 nodemon이라는 패키지를 이용하면 됩니다. 

 

🔵 nodemon 설치 방법

- npm 명령어를 이용해 nodemon을 설치합니다. git clone을 이용해 설치하는 법도 있지만 보통 패키지 관리를 위해 npm 명령어를 사용한 방법이 권장되는 편입니다. 

 

- 설치 명령어 뒤에 -g 를-g를 붙여 global변수로 nodemon을 설치할 수도 있습니다. 아래 명령어를 통해 nodemon 패키지가 system path 전역에 설치를 완료할 수 있습니다. -g를 붙이지 않고 설치하는 local 설치와의 차이점이 보이는데 local 설치는 node_modules 하위 디렉터리에 한정되어 설치가 이루어집니다. 

 

- 보통 npm package를 다운 받을 때 local/ global의 선택 기준으로 대부분 일반 패키지는 local로 설치하게 되지만, CLI에 실행 가능하고 프로젝트 전역에 걸쳐서 재사용되어야 하는 패키지는 global로 설치합니다. 따라서 nodemon은 global 설치가 권장되는 편입니다. 

$ npm install nodemon     # local dependency install
$ npm install -g nodemon  # global install

 

- 앞으로의 편의를 위해 package.json 내부의 npm script start 명령어 란에는 아래와 같이 새롭게 nodemon을 경유해 app.js를 실행한다는 의미의 명령어(nodemon app.js) 를 추가합니다. 그럼 간단히 npm start 명령어로만 nodemon이 제공하는 도움을 받을 수 있습니다. 

// package.json 
"scripts": {
    "start": "nodemon app.js"
  }

 

- 필요시 아래 명령어를 이용해 devDependency로 해당 내용을 설치할 수 있습니다. 

$ npm install --save-dev nodemon  # local devDependency install

 

- nodemon은 디렉토리를 계속 모니터링하고 변경 사항이 있으면 스크립트를 다시 시작해 수동으로 서버 종료 없이 재시작하는 방법은 실행 중인 터미널 창에 rs를 입력하는 것입니다. 

 

3️⃣ CORS 설정 

 

🔵 CORS 란?

현재 웹 브라우저는 보안상 이유로 서로 다른 출처의 http 통신을 막도록 기본적으로 세팅되어 있습니다. 동일한 출처의 주체끼리만 서로 통신할 수 있도록 하는 SOP(Same Origin Policy) 정책은 보안성 향상을 위한 기본이라 이해할 수 있습니다. 

 

하지만 현실적으로 백엔드와 프론트 서버가 서로 다른 도메인에 운용되는 현재의 3세대 웹 서비스 환경에 동일한 출처에서만 리소스를 주고받을 수 없는 실정입니다. 이런 SOP 정책을 올바르게 의도한 요청에 한해 다소 완화시켜 서로 간 통신이 가능케 해야 합니다. 

 

이는 별도의 CORS 설정을 통해 서로 다른 두개의 origin/domain끼리의 데이터를 주고받게 하기 위한 설정으로 이루어지며 만일 해당 과정을 생략한다면 CORS 정책 위반을 이유로 웹 브라우저 차원에서 서버 통신을 막습니다. 

 

🔵 CORS 설치법 

CORS 설정을 위해 npm 설치 CLI 명령어는 아래와 같으며 터미널에 입력해 설치합니다. 

$ npm install cors

 

 

🔵 여러가지 사용법 

- 모든 request에 대해 CORS 요청 설정하는 법

const express = require('express')
const cors = require('cors')
const app = express()
 
app.use(cors())
 
app.get('/ping', function (req, res, next) {
  res.json({message: 'pong'})
})
 
app.listen(3000, function () {
  console.log('server listening on port 3000')
})

 

 

- 단 하나의 route에서만 CORS 요청을 설정하는 법

const express = require('express')
const cors = require('cors')
const app = express()
 
app.get('/ping', cors(), function (req, res, next) {
  res.json({message: 'pong'})
})
 
app.listen(3000, function () {
  console.log('server listening on port 3000')
})

 

// CORS에 기본적으로 설정된 값 

{
  "origin": "*",
  "methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
  "preflightContinue": false,
  "optionsSuccessStatus": 204
}

 

CORS와 관련해 사용자 요구에 맞게 다양하게 상세 설정을 변경할 수 있으며 공식 문서를 참고해 변경할 수 있습니다. 

CORS 공식문서 

 

4️⃣  Dotenv 환경변수 관리 

🔵 Dotenv 설치법 

npm 패키지 매니저를 이용하여 dotenv 라이브러리를 Node.js 프로젝트에 설치합니다.

$ npm install dotenv

 

🔵 .env 파일 작성

dotenv 라이브러리는 디폴트로 현재 디렉터리에 위치한. env 파일로부터 환경변수를 읽어냅니다. 

. env 파일을 생성해, 그 안에 필요한 환경 변수를 key - value의 포맷으로 나열합니다. 

// .env

DB_HOST=localhost
DB_USER=root
DB_PASS=myPassword

.env 파일에 저장해 놓은 환경 변수들은 dotenv 라이브러리를 이용해 process.env에 설정할 수 있으며 자신의 프로젝트가 CommonJS 기반인지 ES 모듈 기반인지에 따라 라이브러리 사용법이 상이하니 나눠서 분석해야 합니다. 

 

🔵  CommonJS 기반 

Node.js에서 전통적으로 제공한 모듈 시스템인 CommonJS에 dotenv 라이브러리를 어떻게 사용하는지 알아보겠습니다. 

애플리케이션을 구동할 때 제일 먼저 실행되는 파일(ex. app.js, index.js 등)의 최상위에 dotenv 라이브러리를 import 한 후 config() 함수를 호출해주기만 하면 됩니다. 

// app.js

require("dotenv").config();

console.log("DB_HOST:", process.env.DB_HOST);
console.log("DB_USER:", process.env.DB_USER);
console.log("DB_PASS:", process.env.DB_PASS);

위 코드를 실행하면 process.env로 부터 읽어진 환경 변수가 출력됩니다. 

같은 파일 내 dotenv 라이브러리의 config() 함수를 호출하기 전 process.env를 읽으면 undefined 값이 반환되어 동작하지 않으니 주의해야 합니다. 

 

🔵 ES 모듈 기반

require 대신 import 키워드를 사용하는 ES 모듈에서는 dotenv 라이브러리 사용하는 방법을 알려드리겠습니다. 

 

- 오류 코드 예시 

// db.js

export const db_host = process.env.DB_HOST;
export const db_user = process.env.DB_USER;
export const db_pass = process.env.DB_PASS;

// app.js

import dotenv from "dotenv";
import { db_host, db_user, db_pass } from "./db.js";

dotenv.config();

console.log("DB_HOST:", process.env.DB_HOST);
console.log("DB_USER:", process.env.DB_USER);
console.log("DB_PASS:", process.env.DB_PASS);

console.log({ db_host, db_user, db_pass });

dotenv.config() 함수가 db.js 파일이 import 된 이후에 호출되었기 때문에  위의 코드를 실행하면 db.js 파일이 process.env 접근 시점에 환경변수가 설정이 되어 있지 않습니다. 이 문제를 피하는 방법으로는 dotenv 라이브러리를 import 하는 코드를 별도로 파일로 빼어 그 안에 dotenv.config() 함수를 호출할 수 있습니다. 

 

// env.js

import dotenv from "dotenv";

dotenv.config();

// app.js

import "./env.js";
import { db_host, db_user, db_pass } from "./db.js";

console.log("DB_HOST:", process.env.DB_HOST);
console.log("DB_USER:", process.env.DB_USER);
console.log("DB_PASS:", process.env.DB_PASS);

console.log({ db_host, db_user, db_pass });

// 결과값 예시
DB_HOST: localhost
DB_USER: root
DB_PASS: s1mpl3
{ db_host: 'localhost', db_user: 'root', db_pass: 'myPassword' }

 

 

5️⃣ Morgan 

🔵 Morgan 공식문서 

 

🔵 Morgan 이란?

NodeJS 서버로 구성된 웹 환경에는 기본적으로 제공되는 로깅(네트워크 통신기록) 기능이 없기 때문에 로그(log)를 관리하기 위해 외부의 서드파티 모듈/라이브러리를 사용하는 것을 권장합니다. 그 중 Morgan은 npm에서 사용되는 로그 관리를 위한 여러 패키지 중 하나이며 많은 개발자들이 사용합니다. 

Morgan을 사용하면 http(s) 통신 시 프론트-백엔드 간 소통 시 필요로 하는 '기본정보'들을 자동으로 포매팅하여 편리하게 주고받을 수 있게 됩니다.

 

여기서 '기본정보'란 http 통신 시 request, response 형태로 주고 받는 status code, http version 등의 메타 정보들을 의미하며 node.js-express 선에서 제공하지 않는 이 기능을 외부 패키지의 힘을 빌려 사용하게 됩니다. 

Morgan을 사용할 때는 내가 원하는 요소대로 내부 속성을 커스터마이징 하여 설정 할 수 있습니다. 

 

🔵 Morgan 설치법 

npm 명령어 

npm install morgan

 

설치가 완료 되었다면 Express 환경의 앱에서 morgan을 사용하도록 설정해야 합니다. 

// app.js

const express = require('express');
const logger = require('morgan'); // morgan 모듈 추가하기

const app = express();

app.listen(3000, () => { console.log('Running on port 3000');});

 

로그 포맷을 아래와 같이 선택하거나 지정할 수 있습니다. 

app.use(morgan('combined')); // morgan 사용하기

 

combined 로그 포맷을 통해 제공되는 기본적인 로그 내용은 다음 내용과 같습니다. 

:remote-addr - :remote-user [:date[clf]] ":method :url HTTP/:http-version" :status :res[content-length] ":referrer" ":user-agent"

# combined 외에도 다음 4가지 다양한 포맷 설정이 가능합니다. 

common
[:remote-addr - :remote-user [:date[clf]] ":method :url HTTP/:http-version" :status :res[content-length]]
dev 
[:method :url :status :response-time ms - :res[content-length]]
short
[:remote-addr :remote-user :method :url HTTP/:http-version :status :res[content-length] - :response-time ms]
tiny
[:method :url :status :res[content-length] - :response-time ms]

 

2. .gitignore 생성

🔵  .gitignore란 ? 

개발자는 소스코드를 공유하기 위해 일반적으로 Git을 사용합니다. 하지만 Git을 통해 공유할 때 공유할 것과 해선 안 될 것이 존재합니다. 따라서 Git이 설치된 디렉토리에는 .gitignore 파일을 생성해 공유하면 안될 것들을 관리할 수 있어야 합니다. 

 

프로젝트를 다양한 환겨에서 진행하다 보면 본인도 모르게 다양한 파일이 생성되기 마련으로 개발자가 Git에 코드를 오릴 때 본인이 잘못 올린 게 없는지 확인해야 하지만 개발자도 사람이므로 100% 실수하지 않는다는 보장이 없습니다. 때문에 한 번 잘못된 것을 올리게 되면 그것을 해결해야 하는 데 시간을 쏟아야 하며 이는 생산성이 떨어지는 것으로. gitignore

 

🔵 gitignore.io 

개발자라고 모든 개발환경에서 생겨나는 불필요한 파일들을 파악할 수 없습니다. 따라서 일일이 찾아 입력하는 것이 아닌 아래 사이트로 접속해 키워드들을 선택해 자동으로 생성되는 .gitignore에 정의할 요소를 생성하면 됩니다. 

 

1.  gitignore.io 사이트

위의 사이트로 접속해 아래 키워드를 추가해 생성 버튼을 눌러주세요.

 

키워드 목록 

• VisualStudioCode
• Vim
• WebStorm
• macOS
• Linux
• Windows
• Zsh
• Node

2. 생성된 내용을 전부 복사 해 .gitignore 파일에 붙여넣어주세요. 

그럼 추가된 키워드들에 대해서는 Git에 올릴 때 해당 파일들은 포함되지 않은 채 올라가게 됩니다.