1. Express를 사용하는 이유

Web-Framework?

"Most websites share a very similar (not to say identical) structure. The aim of frameworks is to provide a common structure so that developers don't have to redo it from scratch and can reuse the code provided."

프레임워크의 장점

• 효율성 상승
• Quality 향상
• 유지 보수에 유리

프레임워크의 단점

• 학습 시간이 길다. 다른 사람의 복잡한 코드 구조를 이해해야 한다.
• 제작자가 의도한 제약 사항. 제작자가 설계한 구조를 따라야만 한다.
• 그럼에도 불구하고 장점이 단점을 상쇄한다!

Why Express?

"Express is fast, unopionionated, minimalist web framework for node.js."

• Node.js 기반 server-side-framework 중 오랜 사랑을 받음
• 최소한의 기능부터 가볍게 웹서버를 구현할 수 있음
• 개발 입문자가 동작 원리를 초석부터 다지기 좋은 프레임워크

Express를 사용하는 것의 장점

• Express 없이 서버를 구현한 코드와 비교했을 때
  • 조건문(if-elif)으로 라우팅을 처리한 것보다 간편하다.
  • 각각의 요청을 처리하는 함수의 분리로 인해 직관적으로 코드를 설계할 수 있다.

2. Express 초기 환경세팅

Express

Node.js는 런타임 환경을 제공하며, Express.js는 직접적인 웹 서비스로서의 기능을 담당한다는 사실에 유의하며 접근한다.

Express 설치 방법

1. 프로젝트를 진행할 폴더를 만들고 해당 경로로 진입

$ mkdir myapp 
$ cd myapp

2. npm init -y 명령어를 사용하여 작업을 의도한 어플리케이션에 package.json 파일을 생성한다. 뒤에 붙는 -y 명령어를 통해서 디폴트 값으로 제공하는 기본 설정 값을 남겨둔다.

$ npm init -y

3. 가장 메인이 되는 파일의 명칭은 어떠한 내용이 되어도 상관이 없지만, 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"
}

4. 다음으로 npm 명령어를 이용하여, 아래의 express를 설치하여 배포용으로 쓰일 패키지임을 명시하는 package.json 파일 내 “dependency list”에 저장한다.

$ npm install express

// package.json
"dependencies": {
    "express": "^4.18.2",
}

4-1. Express를 일시적으로만 사용하고 배포용 dependency list에 저장하고 싶지 않다면 아래의 명령어를 입력한다.

$ npm install express --no-save

4-2. dependencies가 아니라 로컬 개발환경에서 쓰고 싶은 패키지들을 관리하는 devDependencies에 해당 내용을 저장하고 싶다면 아래의 명령어를 입력한다.

$ npm install express --save-dev

Nodemon

• Node에서는 코드에서 수정이 일어났을 때 코드의 수정 사항이 서버에 자동으로 반영되지 않는다.
• 따라서, 코드 수정 후 서버를 계속 다시 켜주어야 하는 번거로움이 생긴다.
• 이를 보완하기 위해 'Nodemon'이라는 패키지를 이용할 수 있다.
• 직접 수동으로 종료 및 재시작하는 것이 아닌, 코드 수정 및 저장시에도 서버가 자동으로 재시작을 한다.
• rs 명령어를 입력하여도 동일하게 재시작을 한다.

Nodemon 설치 방법

• npm 명령어를 이용하여 nodemon을 설치한다. git clone을 이용하여 설치하는 법도 있지만 보통은 패키지 관리를 위해 npm 명령어를 사용한 방법이 권장되는 편이다.
• 뒤 편에 -g 를 붙임으로써 global 변수로 nodemon을 설치할 수도 있습니다. 아래 명령어를 통해 nodemon 패키지가 system path 전역에 설치를 완료할 수 있다. -g 를 붙이지 않고 설치하는 local 설치와의 차이점이 이곳에서 보여지는데, 바로 local 설치는 node_modules 하위 디렉토리에 한정되어 설치가 이루어진다는 점이다.
• 보통 npm package를 다운 받을 시 local / global 의 선택 기준으로, 대부분의 일반 패키지는 local로 설치 하게 되지만, CLI에서 실행 가능하고 프로젝트 전역에 걸쳐서 재사용이 되어야 하는 패키지는 global로 설치한다. 따라서 nodemon 설치는 global 설치가 권장되는 편이다.

1. Nodemon 설치

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

1-1. 필요시, 아래의 명령어를 이용하면 devDependency 로서 해당 내용을 설치 할 수 있다.

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

2. 앞으로의 편의상 package.json 내부의 npm script start 명령어 란에 아래와 같이 새롭게 nodemon을 경유하여 app.js를 실행한다는 의미의 명령어(nodemon app.js)를 추가한다. 이제 간단히 npm start 명령어 만으로 언제든지 nodemon이 제공하는 도움을 받을 수 있다.

// pachage.json

"scripts": {
    "start": "nodemon app.js"
}

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

CORS(Cross-Origin Resource Sharing)

• 현재의 웹 브라우저는 보안상의 이유로 서로 다른 출처의 http 통신을 막도록 기본적으로 세팅되어 있다.
• 하지만 현실적으로 백엔드와 프론트 서버가 서로 다른 도메인에서 운용되는 현재의 3세대 웹 서비스 환경에서, 동일한 출처에서만 리소스를 주고 받을 수 없는 실정이다. 따라서 이러한 SOP 정책을 올바르게 의도한 요청에 한해서 다소 완화시켜 서로간 통신을 가능케 해야 한다.
• 만일 해당 과정을 생략한다면 CORS 정책 위반을 이유로 서버통신이 불가하게 된다.

CORS 설치 방법

$ npm install cors

Dotenv

• 환경변수란 프로세스가 컴퓨터에서 동작하는 방식에 영향을 미치는 동적인 값들의 모임이다.
• 웹 프로그램에서의 환경변수는 시스템이 실행 파일이 놓여 있는 경로, 데이터베이스에 접속하는 계정명과 비밀번호 등의 상세 설정 내역이 기록되어 있다.
• 이러한 환경변수는 탈취를 당하면 보안에 큰 위험성을 야기하기 때문에 꼭 .gitignore 파일에 포함시켜 관리해야 한다.

Dotenv 설치 방법

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

$ npm install dotenv

이후 .env 파일을 관리할 수 있도록 터미널 명령어를 사용하여 세 개의 파일을 만든다.

touch .gitignore
touch .env.sample
touch .env

env 파일 작성

dotenv 라이브러리는 디폴트로 현재 디렉토리에 위치한 .env 파일로 부터 환경 변수를 읽어낸다. 따라서, .env 파일을 생성하고, 그 안에 필요한 환경 변수를 key-value 의 포맷으로 나열한다.

// .env

DB_HOST=localhost
DB_USER=root
DB_PASS=myPassword

Morgan

• Node.js 서버로 구성된 웹 환경에서는 기본적으로 제공되어지는 로깅(네트워크 통신 기록) 기능이 없기에, 로그(log)를 관리하기 위해서 외부의 서드파티 모듈/라이브러리를 사용할 것을 권장한다.
• 그 중 Morgan은 npm에서 사용되는 로그 관리를 위한 여러 패키지 중 하나이며 많은 Node.js 개발자들이 사용하고 있다.
• Morgan을 사용하면 http(s) 통신시 프론트-백엔드간 소통 시 필요로 하는 '기본 정보'들을 자동으로 포맷팅하여 편리하게 주고 받을 수 있게 된다.

Morgan 설치 방법

$ npm install morgan

초기 세팅

// .env
PORT = 3000


// app.js
const http = require("http");
const express = require("express");
const cors = require("cors");
const morgan = require("morgan");
const dotenv = require("dotenv");

app = express();

app.use(express.json());
app.use(cors());
app.use(morgan("dev"));

dotenv.config();

app.get("/ping", (req, res) => {
  res.json({ message: "pong" });
});

const server = http.createServer(app);
const PORT = process.env.PORT;

const start = async () => {
  server.listen(PORT, () => console.log(`server is listening on ${PORT}`));
};

start();