TodoList(Node.js)

나는 노드가 어렵다. 서버가 어려운 걸지도 모르겠다.

원래라면 SQL,Node.js, React를 써서 프로젝트를 해야하는데

내가 너무 얕봤다.

SQLD,학은제를 하면서 하기엔 당장은 저 플젝 완성을 못할 거 같는 생각에

투두리스트 먼저 해보기로 했다.(11.07부턴 코드잇 가서 배운다..!)

일단 모습은 이렇고 진짜 별 거 없다. 단순 CRUD가 끝이다.

입력 시 input을 초기화 하는 것과 같은 기능은 안넣었다.

 

파일구조는  이렇게 되어있다.

server..js는 서버코드 , todo.html은 웹에 표기, 함수는 todo.js에 넣어놨다.

express,cors를 사용하였는데 각각 이런 놈들이다.

 

express - 서버 구성을 좀 더 쉽게 해주는 프레임워크

cors -서버에 허용할 도메인을 지정해줘서 보안이랑 요청 관리 쉽게 해주는 라이브러리

---

너무 많은 것을 쓸 순 없으니 간단하게 차이점을 알아보겠다.

 

폴더

node-server : 노드만 사용해서 기능구현

node-express : 노드+express,cors를 사용하여 기능구현

 

 

// node 기본 서버
const http = require("http");

let todo = [
  { id: 1, content: "더미데이터" },
  { id: 2, content: "터미네이터" },
];

const server = http.createServer((req, res) => {
  // setHeader값을 이렇게 쓰면 한국어 안깨지고 가능
  console.log(req.method + "요청이 들어왔어요!");

  res.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500");
  res.setHeader("Access-Control-Allow-Methods", "OPTIONS,GET,POST,PUT,DELETE");
  //preflight 요청 처리
  if (req.method === "OPTIONS") {
    return res.end("요청 보내세요.");
  }

  //PUT
  if (req.method === "PUT") {
    let data;
    req.on("data", (chunk) => {
      data = chunk.toString();
    });
    req.on("end", () => {
      const newTodo = JSON.parse(data);
      todo = todo.map((el) => {
        if (el.id === newTodo.id) {
          return newTodo;
        } else {
          return el;
        }
      });
    });
    return res.end("Todo가 수정됐습니다.");
  }


//만든 서버 열기
server.listen(3000, () => {
  console.log("서버가 열렸어요");
});

 

// express

const express = require("express");
const cors = require("cors");


let todo = [
  { id: 1, content: "더미데이터" },
  { id: 2, content: "터미네이터" },
];
//express 사용하겠습니다.
const app = express();

// cors를 손쉽게 설정한다. origin:주소 | method : 주소에 허용되는 메소드
app.use(
  cors({
    origin: "http://127.0.0.1:5500",
    methods: ["OPTION", "GET", "POST", "PUT", "DELETE"],
  })
);
// 데이터를 json,text 등으로 원할히 주고 받기 위한 코드
app.use(express.json());
app.use(express.text());

// options: preflight(내가 보내려는 요청이 괜찮나?라고 서버에게 먼저 물어보기)
app.options("/", (req, res) => {
  return res.send("요청 보내세요");
});


app.put("/", (req, res) => {
  todo = todo.map((el) => {
    if (el.id === req.body.id) {
      return req.body; // 전체 객체로 반환
    } else {
      return el;
    }
  });
  return res.send("Todo가 수정됐습니다.");
});

 

코드는 이러한데, 간단히 요약하면

cors - cors설정이 편리해진다.

 

express : 경로별로 처리하는 코드가 훨씬 간결해지고 에러핸들링이 편해진다.

미들웨어 지원,cors, helmet, body-parser 같은 라이브러리를 손쉽게 통합 등 여러 이점이 있지만

무엇보다 코드가 간결해지는 게 가장 큰 장점인 거 같다.