210127_TIL(REST API, Express)

오늘 배운 것

REST API

JSON server로 로컬호스트와 연결하여 사용한다.

// 정보 은닉
const ajax = (() => {
  const req = (method, url, successCallback, failureCallback, payload) => {
    const xhr = new XMLHttpRequest();

    xhr.open(method, url);
    xhr.setRequestHeader("content-type", "application/json");
    xhr.send(JSON.stringify(payload));

    xhr.onload = () => {
      if (xhr.status === 200 || xhr.status === 201) {
        successCallback(JSON.parse(xhr.response));
      } else {
        failureCallback(xhr.status);
      }
    };
  };

  return {
    get(url, successCallback, failureCallback) {
      req("GET", url, successCallback, failureCallback);
    },
    post(url, payload, successCallback, failureCallback) {
      req("POST", url, successCallback, failureCallback, payload);
    },
    patch(url, payload, successCallback, failureCallback) {
      req("PATCH", url, successCallback, failureCallback, payload);
    },
    delete(url, successCallback, failureCallback) {
      req("DELETE", url, successCallback, failureCallback);
    },
  };
})();

ajax.get("/todos", console.log, console.error);
ajax.post(
  "/todos",
  { id: 6, content: "react", completed: false },
  console.log,
  console.error
);

// 객체 활용
const ajax = {
  load(xhr) {
    xhr.onload = () => {
      if (xhr.status === 200 || xhr.status === 201) {
        console.log(JSON.parse(xhr.response));
      } else {
        console.error(xhr.status);
      }
    };
  },

  get(url) {
    const xhr = new XMLHttpRequest();

    xhr.open("GET", url);
    // xhr.setRequestHeader('content-type', 'application/json');
    xhr.send();
    this.load(xhr);
  },

  post(url, payload) {
    const xhr = new XMLHttpRequest();

    xhr.open("POST", url);
    xhr.setRequestHeader("content-type", "application/json");
    xhr.send(JSON.stringify(payload));

    this.load(xhr);
  },

  patch(url, payload) {
    const xhr = new XMLHttpRequest();

    xhr.open("PATCH", url);
    xhr.setRequestHeader("content-type", "application/json");
    xhr.send(JSON.stringify(payload));

    this.load(xhr);
  },

  remove(url) {
    const xhr = new XMLHttpRequest();

    xhr.open("DELETE", url);
    // xhr.setRequestHeader('content-type', 'application/json');
    xhr.send();

    this.load(xhr);
  },
};

Express

Express는 Node.js에서 사용하는 웹 애플리케이션 프래임워크다.

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

let todos = [
  { id: 3, content: "Javascript", completed: false },
  { id: 2, content: "CSS", completed: false },
  { id: 1, content: "HTML", completed: false },
];

const app = express();

app.use(cors());
app.use(express.static("public"));
app.use(express.json());

app.get("/todos", (req, res) => {
  res.send(todos);
});

app.get("/todos/:id", (req, res) => {
  const id = +req.params.id;

  if (todos.map((todo) => todo.id).includes(id)) {
    res.send(todos.filter((todo) => todo.id === +req.params.id));
  } else {
    res.send({
      error: true,
      reason: `id ${req.body.id}는 존재하지 않는 id입니다.`,
    });
  }
});

app.post("/todos", (req, res) => {
  if (!todos.map((todo) => todo.id).includes(req.body.id)) {
    todos = [req.body, ...todos];
    res.send(todos);
  } else {
    res.send({
      error: true,
      reason: `id ${req.body.id}는 이미 존재하는 id입니다.`,
    });
  }
});

app.patch("/todos/:id", (req, res) => {
  const id = +req.params.id;
  const completed = req.body;

  if (
    todos.map((todo) => todo.id).includes(id) &&
    typeof completed.completed === "boolean"
  ) {
    todos = todos.map((todo) =>
      todo.id === +id
        ? {
            ...todo,
            ...completed,
          }
        : todo
    );
    res.send(todos);
  } else {
    res.send({
      error: true,
      reason: `id ${req.body.id}에 대한 잘못된 접근입니다.`,
    });
  }
});

app.patch("/todos", (req, res) => {
  const completed = req.body;
  todos = todos.map((todo) => ({
    ...todo,
    ...completed,
  }));
  res.send(todos);
});

app.delete("/todos/completed", (req, res) => {
  if (!todos.filter((todo) => todo.completed).length) {
    res.send({
      error: true,
      reason: "완료된 요소가 없음.",
    });
  } else {
    todos = todos.filter((todo) => !todo.completed);
    res.send(todos);
  }
});

app.delete("/todos/:id", (req, res) => {
  const id = +req.params.id;

  if (todos.map((todo) => todo.id).includes(id)) {
    todos = todos.filter((todo) => todo.id !== +id);
    res.send(todos);
  } else {
    res.send({
      error: true,
      reason: `id ${req.body.id}는 존재하지 않는 id입니다.`,
    });
  }
});

app.listen("7000", () => {
  console.log("Server is listening on http://localhost:7000");
});

JSON에서는 사용하지 못하는 app이 제공하는 다양한 메서드를 사용할 수 있다.

Nyong’s GitHub