🌈 Express 찍먹하기(0)

Lee Jooam·2022년 7월 11일

🛠 NodeJS?

자바스크립트는 브라우저 위에서 동작하기 위해 탄생한 언어다. 브라우저의 자바스크립트 엔진이 자바스크립트의 런타임이었지만, NodeJS가 탄생하면서 자바스크립트는 또다른 환경에서 작동할 수 있게 되었다.

즉 NodeJS는 자바스크립트의 또다른 런타임인 셈이다(새로운 언어가 아님). 브라우저가 아닌 환경에서 자바스크립트 애플리케이션이 실행된다는 게 어떤 의미가 있을까?

가장 큰 이유는 학습에 걸리는 비용이다. 자바스크립트 환경이기 때문에 웹 개발자들이 새로운 언어를 배우지 않아도 된다는 장점이 있다. 또한 현재 크롬에서도 사용 중인 V8 엔진을 채택했기 때문에 속도적인 측면에서도 불리함이 적다.

낮은 러닝커브와 적절한 성능이 현재 NodeJS 사용량을 증가시키는데 큰 역할을 했다고 생각한다.

🕹 Express

NodeJS 환경에서 자바스크립트로 구현한 애플리케이션을 구현할 수 있다. 이 말은 자바스크립트로 만든 서버를 구축할 수 있다는 말도 포함한다. 모든 환경이 그렇듯이 바닐라 환경에서는 무언가를 만들기 쉽지 않다.

그렇기 때문에 리액트, 뷰, 앵귤러 등 프론트엔드 라이브러리/프레임워크 등이 생겨났고 이것은 백엔드에서도 마찬가지다. 그 중 하나가 ExpressJS이며 전세계적으로 높은 점유율을 가진 백엔드 프레임워크 중 하나다.

Express 장점

Express의 가장 큰 장점으로는 손쉬운 사용법이 있다. 또한 유연한 미들웨어의 추가로 사용자가 다양한 기능을 효율적으로 추가할 수 있다는 점이 있다. 그리고 높은 점유율을 지닌 만큼 큰 규모의 커뮤니티가 활성화되어 있기 때문에 이것도 장점 중 하나다.

Express 단점

다양한 미들웨어의 추가를 통한 유연함은 오히려 단점으로 작용할 수 있다. 거대한 규모의 프로젝트에서는 높은 자유도가 단점으로 작용할 수 있다. Express는 빠르게 서버를 구축하고, 백엔드의 기초 지식이 탄탄하지 못한 사용자가 사용하기에도 쉽기 때문에 간단한 서버에 유리한 프레임워크이다.

1️⃣ 시작하기

npm install express
npm install cors

우선 express 패키지를 설치해야한다. 지금 환경에서는 프론트엔드를 5500 포트를 기본으로 사용하는 live-server 익스텐션을 사용하고, express를 이용한 백엔드 서버는 8080 포트로 설정할 것이기 때문에 cross-origin 환경이 된다.

CORS를 설정해주기 위해 cors 패키지도 함께 설치한다. 그리고 ESmodule 시스템을 사용하기 위해 package.json에 type을 module로 설정했다.

import express from 'express';
import cors from 'cors';
import api from './api/index.js';

const app = express();
const port = 8080;

app.use(cors({ origin: 'http://127.0.0.1:5500', credentials: true }));
app.use(express.json());
app.use(cookieMiddleware);
app.use('/api', api);

app.listen(port, () => {
  console.log('app is listening on port ' + port);
});

간단한 서버를 실행시키는 코드이다. use는 미들웨어 설정, listen은 공식문서에 따르면 Node의 http.Server.listen() 메소드의 identical이라고 한다.

미들웨어는 컴퓨터 공학에서 넓은 뜻을 가지고 있지만 쉽게 표현하자면 과정의 중간에서 특정한 작업을 수행해주는 역할을 하는 하드웨어 또는 소프트웨어이다.

현재 코드에 따르면 app이라는 이름으로 선언된 express 앱이 3개의 미들웨어를 사용하고 있다. Express 미들웨어는 크게 3가지로 분류할 수 있는데, 첫 번째는 모든 요청에 대해 특정 기능을 수행하는 미들웨어, 두 번째는 특정 경로에 대해서만 작업을 수행하는 path 미들웨어, 마지막으로 err를 핸들링하는 미들웨어이다.

위의 예시에서는 첫 번째 형태의 미들웨어와 api 경로로 들어오는 요청을 처리하는 path 미들웨어를 사용하고 있다.

cors는 크로스 오리진 설정을 위한 미들웨어, express.json()은 요청의 Content-Type 헤더를 확인해 json 형태로 들어오는 페이로드들을 파싱해준다. 기본적으로 body-parser 모듈을 기반으로 하고 있다.

cookieMiddleware는 따로 구현한 것인데, request의 헤더에 있는 쿠키 string을 조회해 객체 형태로 request에 cookies라는 이름으로 추가해준다.

사실 같은 작업을 해주는 cookieParser라는 미들웨어가 존재하지만 그냥 구현해봤다.

2️⃣ 라우팅 설정

이번 튜토리얼에서는 클라이언트에서 api 경로로 보낸 요청들을 다른 라우터에서 처리하는 것으로 구현했다. 위에 설명했던대로 api path를 처리하는 미들웨어가 필요한데, 구현은 다음과 같다.

// /api/index.js
import { Router } from 'express';
import sessionMiddleware from '../middleware/sessionMiddleware.js';
import auth from './auth/index.js';
import board from './board/index.js';

const router = Router();

router.use('/auth', sessionMiddleware, auth);
router.use('/board', board);

export default router;

A router object is an isolated instance of middleware and routes

라우터는 미들웨어처럼 동작하기 때문에 use 메소드를 통해 등록할 수 있다. 위의 예시에서 보이는 것처럼 새로운 라우터 오브젝트를 만들고, 그것에서 또다른 라우터를 등록하는 것도 가능하다.

현재 코드에서는 api 라우터가 auth, board 라우터를 각각의 경로에 연결하고 있다.

// api/auth/index.js
import { Router } from 'express';

const router = Router();

router.post('/login', (req, res) => {
  res.status(200).json({ text: '안녕하세요!' });
});

export default router;

auth 라우터에서 login 경로로 들어오는 POST 요청을 처리하는 callback을 등록했다. response 객체에 status 코드와 json 형태로 데이터를 전달한다.

3️⃣ 프론트엔드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./index.js" defer></script>
    <link rel="stylesheet" href="./style.css" />
    <title>Document</title>
  </head>
  <body>
    <h1>Title</h1>
    <div>
      <button class="login">login</button>
    </div>
  </body>
</html>

async function login() {
  const response = await fetch('http://localhost:8080/api/auth/login', {
    method: 'POST',
    credentials: 'include',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      userId: 'lee',
      password: '1234',
    }),
  }).then((res) => {
    return res.json();
  });

  console.log(response);
}

(function () {
  const loginBtn = document.querySelector('.login');

  loginBtn.addEventListener('click', login);
})();