Introduce

본 문서는 2022년 1월 22일 에 작성되었습니다.

Express 는 백엔드 Fremework 입니다.
가장 처음으로 배우는 프레임워크였으며, 웹의 기본을 이해하는 데에 큰 도움이 되었습니다.
하지만 생각보다 정확히 알고 있지 않다는 생각이 들어서 TOY 음악 랭킹 크롤링 프로젝트를 진행하면서 정확히 공부 해보려 합니다.

본 문서는 Express 를 Tutorial 이 아닙니다.
또한 최근에 Node.JS Vanilla Server 를 공부하고 이어서 작성하였기 때문에, 최대한 언어적 통일성을 갖추려 노력하였습니다.

또한 ECMAScript(ES6+) 에 의거해서 사용하고 있기 때문에,
package.json 등에 적절하게 호환성 명령어를 추가해주어야 합니다.

---

Thoery

다음과 같은 기본 이론을 포함하고 있습니다.

1. app (앱 인스턴스)
2. view (HTML 등)
3. middleware

app

표준 HTTP Protocol 으로 개발된 Express 는 프레임워크 인스턴스를 만드는 것으로 시작됩니다.
또한 이 인스턴스에 수많은 미들웨어 를 연결하는 구조로 시스템을 구축합니다.

import express from "express";

const app=express();
app.listen(TCP/IP 포트번호, ()=>{});

view

HTML(혹은 그 역할을 수행하는 것)을 여기서는 view 라고 하겠습니다.

Express 는 다음과 같이 view 와 관련된 설정을 할 수 있습니다.

1. views 기본 경로 설정
2. view engine 설정

app.set("view engine", "pug");
app.set("views", process.cwd()+"/src/views");

middleware

전술한 바와 같이,
수많은 미들웨어를 통해서 Express 서버 에 기능을 추가할 수 있습니다.

미들웨어란 특정한 기능이 공통으로 사전적으로 실행되기를 원할 때
그러한 기능을 수행해주는 함수를 만들고 체이닝 시키는 것을 의미합니다.

app.use((req,res,next)=>{
  next();
});

수동으로 만들 수 있습니다.

여기서는 다양한 Express 와 그 기능들에 대한 기본적인 설명 을 다루도록 하겠습니다.

✅ morgan

npm install morgan

morgan 은 기존의 로그에 HTTP 요청, 응답에 관련된 추가 로그를 보여주는 라이브러리입니다.
사용 시에 내부에 인수를 설정하여 로그 표현 수준 및 방식을 결정 할 수 있습니다.

import morgan from "morgan";

const morganLoger=morgan();
app.use(morganLoger("dev"));

개발 환경에서는 dev 로 설정하며,
배포 환경에서는 combined 로 설정하는 것이 일반적입니다.

✅ static

설치가 필요없는 기본 제공 라이브러리입니다.
static 은 css, js(프론트), img, video 등의 정적인 파일을 연결하는 역할을 합니다.

//       URL 경로              파일구조 경로
app.use("/assets", express.static("assets"));

⚡ body-parser

이번 공부에서 알게된 놓치고 있었던 지식입니다.

Express 는 요청의 본문을 이해하기 위한 변환(파싱) 절차 를 설정해주어야 합니다.
이러한 파싱 역할을 하는 것이 body-parser 이며, 다음과 같은 기능을 가지고 있습니다.

1. form 내부의 데이터 파싱
2. url 내부의 데이터 파싱
3. raw 형식의 데이터 파싱
4. text 타입의 데이터 파싱

이 중, 1번과 2번은 Express 4.16.0 버전 이후로 내부 모듈로 포함되었습니다.
따라서 3번과 4번의 기능이 필요할 때만 body-parser 를 설치하면 됩니다.

또한 2번인 express.json() 은
AJAX(axios 등)를 이용한 데이터 송수신이 발생하는 상황을 위함입니다.

app.use(express.urlencoded({ extended: false });
  // true : querystring 모듈을 사용하여
  //        url 내부의 데이터(쿼리스트링) 해석
        
  // false : qs 모듈을 사용하여
  //         url 내부의 데이터(쿼리스트링) 해석
        
app.use(express.json());

import bodyparser from 'body-parser'

app.use(bodyparser.raw());
app.use(bodyparser.text());

⚡ cookie-parser

AJAX 를 통한 쿠키 송수신 시,
Express 가 쿠키를 이해할 수 있도록 파싱해주는 모듈입니다.

import cookieParser from "cookie-parser";

app.use(cookieParser(비밀키));

어디까지나 쿠키를 이해하기 위한 파싱 모듈 입니다.
쿠키의 생성 및 제거는 다음 에 따라 진행됩니다.

res.cookie("cookie_name", "cookie_value", {
  "cookie_option_name": "cookie_option_value"
});
res.clear("cookie_name", "cookie_value", {
  "cookie_option_name": "cookie_option_value"
});

실제 코드는 다음과 같습니다.

res.cookie("name", "value", {
  expires: new Date(Date.now() + 900000),
  httpOnly: true,
  secure: true
});
res.clearCookie("name", "value", {
  httpOnly: true,
  secure: true
});

주로 쓰이는 옵션은 expries, httpOnly, secure, maxAge, path, domain 등이 있습니다.

주의할 점은 쿠키 삭제 시에는 이름, 값, 옵션 모두가 같아야 한다는 점입니다.
단, 여기서 같지 않아도 되는 옵션은 다음과 같습ㄴ디ㅏ.

• expires, maxAge

⚡ express-session

세션 관리용 모듈입니다.
아래와 같이 설정하면 됩니다.

Express 1.5 버전 이전에는 Express-session 이 Cookie-parser 보다 이전에 위치해야 합니다.
Express 1.5 버전 이후에는 내부에서 Cookie-parser 를 사용하지 않으므로, 위치는 상관없습니다.

import session from "express-session";

app.use(session({
  resave: false,
  saveUninitialized: false,
  secret: "보안키, 환경변수에 넣어야합니다"
  cookie: { // << 세션 쿠키에 대한 설정
    httpOnly: true,
    secure: false
  },
  name: "session-cookie"
}));

다만,
서버를 재시작하면 세션이 다 사라지므로
store 라는 옵션을 저장하여 DB에 세션을 저장하는 것이 옳습니다.

예를 들어 MongoDB 를 사용 중이라면 Connect-mongo 등을 이용할 수 있습니다.

💚 multer

이미지, 동영상 등의 파일을 업로드 하기 위한 미들웨어입니다.
이러한 미들웨어를 통해 이미지 및 동영상을 받기 위해서는 <from> 을 설정해주어야 합니다.

<from action="/ 정적 경로" method="post" enctype="multipart/form-data">
  <input type="file" name="image" />
  <input tpye="text" name="title" />
  <button type="submit">업로드</button>
</form>

import multer from "multer";

// 미들웨어 형태로 사용
export const upUserAvatarMiddleware=multer({
  dest: "uploads/avatars/",
  limits: { fieldSize: 3000000 },
});

해당 내용은 아직 정확히 모르므로 차후에 재작성 하도록 하겠습니다.

✅ router-controller

전술한 바와 같이 express 는 HTTP 기본 규약을 따르며 개발되었습니다.
따라서 express 를 통하면 RESTful API 를 만드는데 매우 효과적입니다.

RESTful API 에 대한 자세한 설명은 본문의 영역을 벗어나므로,
User 에 대한 RESTful API 설계 예시 만을 남겨두고 실제 코드를 작성해 보겠습니다.

GET | localhost:PORT/user ▫ 유저 호출
POST | localhost:PORT/user ▫ 유저 가입
PUT | localhost:PORT/user ▫ 유저 정보 수정
DEL | localhost:PORT/user ▫ 유저 탈퇴

export const 컨트롤러1=(req,res)=>{}
export const 컨트롤러2=(req,res)=>{}
export const 컨트롤러3=(req,res)=>{}
export const 컨트롤러4=(req,res)=>{}

// router.js

import express from "express";
import { 컨트롤러1, 컨트롤러2, 컨트롤러3, 컨트롤러4 } from "userController";

const userRouter=express.Router();

userRouter
  .route("/")
  .get(컨트롤러1)
  .post(컨트롤러2)
  .put(컨트롤러3)
  .delete(컨트롤러4);

export default userRouter;

✅ Req, Res 객체

HTTP 기반 프레임워크는 모두 req 와 res 파라미터를 보유하게 됩니다.

Request 는 클라이언트의 요청 정보가 담긴 객체 를 의미하고
Response 는 서버의 답변 정보가 담긴 객체 를 의미합니다.

즉,
controller 는 특정한 요청 정보에 대응되는 정보를 돌려주는 기능을 하며,
router 는 특정한 요청 정보에 대응되는 기능을 담당하는 controller 로의 연결을 담당합니다.

사용할 수 있는 Req, Res 는 다음과 같지만,
버전 별로 상이할 수 있으며 따라서 구글링을 권고합니다.

req.app
req.body
req.cookies
req.ip
req.params
req.query
req.signedCookies
req.get(헤더 이름)

res.app
res.cookie(키, 값, 옵션)
res.cookie(키, 값, 옵션)
res.end
res.json(JSON)
res.redirect(주소)
res.render(뷰, 데이터)
res.send(데이터)
res.sendFile(경로)
res.set(헤더, 값)
res.status(코드)

---

Dev

개발에 관련된 이야기는 일체 다루고 있지 않습니다.