[http 모듈로 서버] (2) REST로 RESTful 한 웹 서버 만들기

👩‍💻 백엔드(Back-End)/Node js

[http 모듈로 서버] (2) REST로 RESTful 한 웹 서버 만들기

징징알파카 2023. 4. 16. 01:59

728x90

<본 블로그는 Node.js 교과서를 참고해서 공부하며 작성하였습니다 :-)>

🎀 REST (REpresentational State Transfer)

: 서버의 자원을 정의하고 자원에 대한 주소를 지정하는 방법

🎀 RESTful

: REST를 따르는 서버

🎀 HTTP 요청 메서드

GET : 서버 자원을 가져오고자 할 때 사용

POST : 서버에 자원을 새로 등록할 때 사용

PUT : 서버의 자원을 요청에 들어 있는 자원으로 치환할 때 사용

PATCH : 서버 자원의 일부만 수정할 때 사용

DELETE : 서버의 자원을 삭제 할 때 사용

OPTIONS : 요청을 하기 전에 통신 옵션 설명하기 위해 사용

🎀 REST로 RESTful 한 웹 서버 만들기

🌿 about.html

<!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">
  <title>RESTful SERVER</title>
</head>

<body>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
  <div>
    <h2>소개 페이지</h2>
    <p>사용자 이름을 등록하세요!</p>
  </div>
</body>
</html>

🌿 restFront.html

<!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">
  <title>RESTful SERVER</title>
</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>

🌿 restFront.js

// 로딩 시 사용자 정보 가져오기
async function getUser() {
  try {
    const res = await axios.get("/users");
    const users = res.data;
    const list = document.getElementById("list");
    list.innerHTML = "";

    // 사용자마자 반복적으로 화면 표시 및 이벤트 연결
    Object.keys(users).map(function (key) {
      const userDiv = document.createElement("div");
      const span = document.createElement("span");
      span.textContent = users[key];
      const edit = document.createElement("button");
      edit.textContent = "수정";
      edit.addEventListener("click", async () => {
        const name = prompt("바꿀 이름을 입력하세요");
        if (!name) {
          return alert("이름을 반드시 입력!");
        }
        try {
          await axios.put("/user/" + key, { name });
          getUser();
        } catch (err) {
          console.error(err);
        }
      });

      const remove = document.createElement("button");
      remove.textContent = "삭제";
      remove.addEventListener("click", async () => {
        try {
          await axios.delete("/user/" + key)
          getUser();
        } catch (err) {
          console.error(err);
        }
      });
      userDiv.appendChild(span);
      userDiv.appendChild(edit);
      userDiv.appendChild(remove);
      list.appendChild(userDiv);
      console.log(res.data);
    });
  } catch (err) {
    console.error(err);
  }
}

// 화면 로딩 시 getUser 호출
window.onload = getUser;
// 폼 제출 시 실행
document.getElementById("form").addEventListener("submit", async (e) => {
  e.preventDefault();
  const name = e.target.username.value;
  if (!name) {
    return alert("이름을 반드시 입력!");
  }
  try {
    await axios.post("/user", { name });
    getUser();
  } catch (err) {
    console.log(err);
  }
  e.target.username.value = "";
});

🌿 restFront.css

a {color:blue; text-decoration: none;}

🌿 restServer.js

const http = require("http");
const fs = require("fs").promises;

const users = {};

http.createServer(async (req, res) => {
  try {
    console.log(req.method, req.url);
    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": "text/plain : charset=utf-8" });
        return res.end(JSON.stringify(users));
      }
      try {
        const data = await fs.readFile(`.${req.url}`);
        return res.end(data);
      } catch (err) {
        // 404 not found
      }
    } else if (req.method === "POST") {
      if (req.url === "/user") {
        let body = "";
        // 요청의 body를 stream 형태로 받음
        req.on("data", (data) => {
          body += data;
        });

        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("등록 성공");
        });
      }
    } else if (req.method === "PUT") {
      if (req.url.startsWith("/user/")) {
        const key = req.url.split("/")[2];
        let body = "";
        // 요청의 body를 stream 형태로 받음
        req.on("data", (data) => {
          body += data;
        });
        console.log("hi")
        return req.on("end", () => {
          console.log("PUT 본문(body) : ", body);
          users[key] = JSON.parse(body).name;
          return res.end(JSON.stringify(users));
        });
      }
    } else if (req.method === "DELETE") {
      if (req.url.startsWith("/user/")) {
        const key = req.url.split("/")[2];
        delete users[key];
        return res.end(JSON.stringify(users));
      }
    }
    res.writeHead(404);
    return res.end("NOT FOUND");
  } catch (err) {
    console.error(err);
    res.writeHead(500);
    res.end(err);
  }
})

  .listen(8082, () => {
    console.log("8082번 포트에서 서버 대기중");
  });

728x90

저작자표시