Vanilla Node로 REST API 살펴보기

📌 REST API (REpresentiational State Transfer)

  서버에 자원(회원 정보, 댓글 등)을 요청할 때는 보통 주소를 통해 들어옵니다. 예를 들어 /user로 접속하면 사용자 정보에 대한 자원을 요청하는 것이라고 할 수 있습니다. 구체적으로, 서버에 정보를 요청하는 방식으로 <HTTP 요청 메소드 + 주소>와 같이 요청의 방식을 구조화하는 방식을 REST API라고 합니다. 그리고 REST API를 사용하는 서버를 RESTful하다고 합니다.
  REST API의 규칙으로 자원이 명사형이어야하는 등의 규칙이 존재하나 이번 포스팅의 의의가 REST API가 무엇인지 정도로 알고 넘어가자는 것이므로 융통성있게 작성하겠습니다.

프론트엔드와 백엔드가 소통하는 엔드포인트, RESTful API

📌 HTTP 요청 메서드

GET www.myblog.com/user 사용자 정보 가져오기
POST www.myblog.com/user 사용자 정보 등록(생성)

PUT www.myblog.com/user/1 : 1번 사용자 정보를 통째로 바꿉니다.
PATCH www.myblog.com/user/3 : 3번 사용자 정보를 부분 수정합니다.
DELETE www.myblog.com/user/2 : 2번 사용자 정보를 삭제합니다.

 

PATCH를 제외한 각 메소드별 행동들을 코드했습니다. 이런 방식으로 Front를 제어합니다. 여담으로, 굉장히 코드가 더러운데 express 프레임워크를 이용하면 아래와 같이 간단하게 표현할 수 있으므로 코드를 하나하나 뜯어볼 필요는 없습니다. 그저 이런 방식으로 작동한다는 것을 알아둡시다.

// express framework를 이용하면 이렇게 편리합니다.
app.get("/")
app.post("/user)

 

Node에서 제공하는 Hello World 코드는 다음과 같습니다.

const http = require("http");

const hostname = "127.0.0.1";
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader("Content-Type", "text/plain");
  res.write("Hello World!\n");
  res.end("Hello World!\n");
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

 

이 코드를 변형해 다음과 같이 만들 수 있습니다.

import http from "http";
import fs from "fs";

const users = {};

http
  .createServer((req, res) => {
    // GET 메소드를 처리합니다.
    if (req.method === "GET") {
      if (req.url === "/") {
        return fs.readFile("./restFront.html", (err, data) => {
          if (err) {
            throw err;
          }
          res.end(data);
        });
      } else if (req.url === "/about") {
        return fs.readFile("./about.html", (err, data) => {
          if (err) {
            throw err;
          }
          res.end(data);
        });
      } else if (req.url === "/users") {
        return res.end(JSON.stringify(users));
        }
        //url 체크가 끝났다면 css와 같은 정적 파일들을 로드합니다.
      return fs.readFile(`.${req.url}`, (err, data) => {
        if (err) {
          res.writeHead(404, "NOT FOUND");
          return res.end("NOT FOUND");
        }
        return res.end(data);
      });
    } // POST 메소드를 처리합니다.
    else if (req.method === "POST") {
      if (req.url === "/users") {
        let body = ""; // 빈 문자열 생성
        req.on("data", data => {
          body += data;
        }); //data가 들어오면 body에 추가합니다.
        return req.on("end", () => {
          console.log("POST 본문(Body):", body);
          const { name } = JSON.parse(body);
          const id = Date.now();
          users[id] = name;
          res.writeHead(201);
          res.end("등록 성공");
        });
      }
    } // PUT 메소드를 처리합니다.
    else if (req.method === "PUT") {
      if (req.url.startsWith("/users/")) {
        const key = req.url.split("/")[2];
        let body = "";
        req.on("data", data => {
          body += data;
        });
        return req.on("end", () => {
          console.log("PUT 본문(Body):", body);
          users[key] = JSON.parse(body).name;
          return res.end(JSON.stringify(users));
        });
      }
    } // DELETE 메소드를 처리합니다.
    else if (req.method === "DELETE") {
      if (req.url.startsWith("/users/")) {
        const key = req.url.split("/")[2];
        delete users[key];
        return res.end(JSON.stringify(users));
      }
    }
    res.writeHead(404, "NOT FOUND");
    return res.end("NOT FOUND");
  })
  .listen(8085, () => {
    console.log("8085번 포트에서 서버 대기중입니다");
  });

 

페이지 하나를 추가할 때마다 분기문을 계속 생성하는 것은 가독성에 좋지 않습니다. 때문에 express framework를 사용하는 것이 일반적입니다.