[Node.js] 익스프레스 프레임워크 사용하기

일반적으로 웹 서버가 제공하는 기능

항목	설명
라우팅	URL 요청을 함수와 매핑시켜주는 기능
정적 파일 서비스	CSS, 자바스크립트, 이미지 등의 정적인 파일을 다루는 능력
템플릿 엔진	동적인 웹페이지를 HTML과 인스턴스를 사용해 생성하는 기능
요청 데이터 다루기	HTTP 요청을 추상화해 편리하게 다룰 수 있게 하는 기능
응답 데이터 다루기	HTTP 응답을 커스터마이징할 수 있는 기능 파일 내려받기, 이미지 출력 등
파일 업로드	HTTP로 전송된 파일을 읽고 다룰 수 있는 기능
쿠키 및 세션 지원	클라이언트 측 혹은 서버 측의 메모리에 일정 기간 동안 저장해야 하는 데이터를 다루는 기능
리다이렉트	서버의 응답 시 다른 페이지로 전달 시키는 기능
에러 페이지	요청이 잘못되었거나, 서버 에러 시 특정 에러 페이지를 보여주기
미들웨어	요청 혹은 응답 사이에 공통된 기능을 추가하는 능력

 

변경전

const http = require("http");
const url = require("url");

http
  .createServer((req, res) => {
    const path = url.parse(req.url, true).pathname;
    res.setHeader("Content-Type", "text/html");
    if (path in urlMap) {
      // 1
      urlMap[path](req, res); // 2
    } else {
      notFound(req, res);
    }
  })
  .listen("3000", () => console.log("라우터를 리팩토링해보자!"));

const user = (req, res) => {
  const user = url.parse(req.url, true).query;
  res.end(`[user] name : ${user.name}, age: ${user.age}`);
};

const feed = (req, res) => {
  res.end(`<ul>
        <li>picture1</li>
        <li>picture2</li>
        <li>picture3</li>
      </ul>
      `);
};

const notFound = (req, res) => {
  res.statusCode = 404;
  res.end("404 page not found");
};

// 3
const urlMap = {
  "/": (req, res) => res.end("HOME"),
  "/user": user,
  "/feed": feed,
};

 

익스프레스로 변경후

const url = require("url");
const express = require("express");
const app = express();
const port = 3000;

app.listen(port, () => {
  console.log("익스프레스로 라우터 리팩토링하기");
});

app.get("/", (_, res) => res.end("HOME"));
app.get("/user", user);
app.get("/feed", feed);

function user(req, res) {
  const user = url.parse(req.url, true).query;
  res.json(`[user] name : ${user.name}, age: ${user.age}`);
}

function feed(_, res) {
  res.json(`<ul>
        <li>picture1</li>
        <li>picture2</li>
        <li>picture3</li>
      </ul>
      `);
}

 

• 익스프레스로 실행할 경우, app.get() 함수를 사용해서 코드가 더 간단해진 것을 확인할 수 있다.
• 또한 기존 코드에서는 res.end() 함수를 사용했는데, 익스프에스에서는 res.json() 함수를 사용했다. 응답을 JSON 타입으로 보여주기도 하고, 자동으로 한글을 처리할 수 있다.
• 기존 코드에서는 const를 사용했는데 호이스팅을 사용하기 위해 function으로 변경했다.
• feed(_, res)에서 _을 사용한 이유는, 함수 인터페이스 구조상 넣은 것이다.

 

 

호이스팅

hohoisting() : 함수, 변수, 클래스를 끌어 올려서 선언되기 전에 사용하는 기능

let, const, 함수 표현식, 클래스 표현식은 호이스팅 안된다

 

한글 입력 값 깨질 때

res.setHeader("Content-Type", "text/html; charset = utf-8");