노드 REST API 서버 만들기

노드

노드 REST API 서버 만들기

포칼이 2023. 4. 13. 12:10

REST API

서버에 요청을 보낼 때는 주소를 통해 요청의 내용을 표현하는 것

/index.html이면 index.html을 보내달라는 뜻이다.
항상 html을 요구할 필요는 없다.
서버가 이해하기 쉬운 주소가 좋다.

REST API(Representational State Transfer)

서버의 자원을 정의하고 자원에 대한 주소를 지정하는 방법이다.
/user면 사용자 정보에 관한 정보를 요청하는 것이다.
/post면 게시글에 관련된 자원을 요청하는 것이다.

HTTP 요청 메서드

GET : 서버 자원을 가져오려고 할 때 사용
POST : 서버에 자원을 새로 등록하고자 할 때 사용(또는 멀 써야할 지 애매할 때)
PUT : 서버의 자원을 요청에 들어있는 자원으로 치환 하고자 할 때 사용
PATCH : 서버 자원의 일부만 수정하고자 할 때 사용
DELETE : 서버의 자원을 삭제 하고자 할 때 사용

HTTP 프로토콜

클라이언트가 누구든 서버와 HTTP 프로토콜로 소통 가능

iOS, 안드로이드, 웹이 모두 같은 주소로 요청 보낼 수 있다.
서버와 클라이언트의 분리

RESTful

REST API를 사용한 주소 체계를 이용하는 서버
GET / user는 사용자를 조회하는 요청, POST / user는 사용자를 등록하는 요청이다.

REST API를 사용하여 간단하게 RESTful한 페이지를 구성해보자.

총 준비물은 5개 이다.

//about.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>RESTful SERVER</title>
  <link rel="stylesheet" href="./restFront.css" />
</head>
<body>
<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>
<div>
  <h2>소개 페이지입니다.</h2>
  <p>사용자 이름을 등록하세요!</p>
</div>
</body>
</html>

//restFront.css
a { color: blue; text-decoration: none; }

//restFront.html
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <title>RESTful SERVER</title>
  <link rel="stylesheet" href="./restFront.css" />
</head>
<body>
<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>
<div>
  <form id="form">
    <input type="text" id="username">
    <button type="submit">등록</button>
  </form>
</div>
<div id="list"></div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="./restFront.js"></script>
</body>
</html>

//restServer.js
const http = require('http');
const fs = require('fs').promises;

const users = {}; // 데이터 저장용

http.createServer(async (req, res) => {
  try {
    if (req.method === 'GET') {
      if (req.url === '/') {
        const data = await fs.readFile('./restFront.html');
        res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
        return res.end(data);
      } else if (req.url === '/about') {
        const data = await fs.readFile('./about.html');
        res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
        return res.end(data);
      } else if (req.url === '/users') {
        res.writeHead(200, { 'Content-Type': 'application/json; charset=utf-8' });
        return res.end(JSON.stringify(users));
      }
      // /도 /about도 /users도 아니면
      try {
        const data = await fs.readFile(`.${req.url}`);
        return res.end(data);
      } catch (err) {
        // 주소에 해당하는 라우트를 못 찾았다는 404 Not Found error 발생
      }
    } else if (req.method === 'POST') {
      if (req.url === '/user') {
        let body = '';
        // 요청의 body를 stream 형식으로 받음
        req.on('data', (data) => {
          body += 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, { 'Content-Type': 'text/plain; charset=utf-8' });
          res.end('ok');
        });
      }
    } else if (req.method === 'PUT') {
      if (req.url.startsWith('/user/')) {
        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;
          res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' });
          return res.end('ok');
        });
      }
    } else if (req.method === 'DELETE') {
      if (req.url.startsWith('/user/')) {
        const key = req.url.split('/')[2];
        delete users[key];
        res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' });
        return res.end('ok');
      }
    }
    res.writeHead(404);
    return res.end('NOT FOUND');
  } catch (err) {
    console.error(err);
    res.writeHead(500, { 'Content-Type': 'text/plain; charset=utf-8' });
    res.end(err.message);
  }
})
  .listen(8082, () => {
    console.log('8082번 포트에서 서버 대기 중입니다');
  });

서버를 만들었다. 그리고 그 서버는 8082번 포트에 연결했다.

응답 부분을 보면 다음과 같다

req는 요청에 대한 부분이다. 주소창에 입력을 하면 그건 GET요청이다. (외우자)

즉, localhost:8082 라고 주소창에 입력을 하면 그건 GET 요청인 것이다. 그리고 사실상 맨뒤에 /를 생략한 것이다.

그러면

if (req.method === 'GET') {
if (req.url === '/') {

}

부분이 실행되게 된다. 이런 흐름으로 다른 요청도 처리된다.

결과를 보자.

GET요청에 대한 응답을 잘 받아온 것을 확인할 수 있다.

다음 포스트에서는 각각의 요청에 대한 처리를 살펴보겠다.