Server

학습 키워드

• Express 이용한 간단한 Server 구축

• Fetch API

• Axios

Express 이용한 간단한 Server 구축

필요한 패키지 설치

• cors

• express

• nodemon

• uuid

npm init -y

npm i express nodemon uuid

Server 구동 방법

• 해당 방식은 수정사항을 반영해주지 않아, server off 하고 재구동

node server.js // 👈🏻 구동할 파일

• nodemon은 server.js의 수정사항을 감지해서 바로 반영해주기 때문에 사용

npx nodemon server.js

📚 API를 사용하기 위해서 알아야 하는 개념

• 웹브라우저와 서버의 통신 하기위해서 HTTP 프로토콜을 사용

• HTTP Protocol : TCP/IP 기반으로 클라이언트와 서버 사이에 이루어지는 요청/응답 프로토콜

• TCP/IP 기반으로 클라이언트와 서버 사이에 이루어지는 요청/응답 프로토콜

• HTTP : TCP/IP

• QUIC : UDP 기반으로 빠른 전송 속도를 가지는 프로토콜

• HTTP Method : GET, POST, PUT, PATCH, DELETE, OPTIONS, HEAD, TRACE

  • GET : 데이터를 요청하기 위해 사용되는 메소드 → 보안의 약함

  • POST : 데이터를 생성하기 위해 사용되는 메소드 → 보안상 안정성 높음

  • PUT : 데이터를 업데이트하기 위해 사용되는 메소드 → 데이터를 전체적으로 업데이트

  • PATCH : 데이터를 업데이트하기 위해 사용되는 메소드 → 데이터를 일부분만 업데이트

  • DELETE : 데이터를 삭제하기 위해 사용되는 메소드

• Http/Https : Https(보안 인증서가 추가된 프로토콜) → 인프라 영역

🤔 RESTful, REST 호출한다라는 의미는? HTTP Method를 규칙에 맞는 API 설계 전략

👩🏻‍💻 TodoList의 API 생성

GET : Todos 조회

let todos = [];

app.get('/todos', (req, res) => {
  res.status(200).json(todos);
});

POST : Todo 생성

const bodyParser = require('body-parser');
const { v4: uuidv4 } = require('uuid');

app.post('/todos', (req, res) => {
  const { task } = req.body;
  const newTodo = {
    id: uuidv4(),
    task,
    completed: false,
  };
  res.status(200).json(newTodo);
});

PATCH : Todo Completed Update

app.patch('/todos/:id', (req, res) => {
  const { id } = req.params;
  const findTodo = todos.find((todo) => todo.id === id);

  if (!findTodo) {
    res.status(400).send('Not found Todo');
  }

  todos = todos.map((todo) =>
    todo.id === id ? { ...todo, completed: !todo.completed } : todo
  );

  res.status(200).send(findTodo);
});

PUT : Todo Task Update

app.put('/todos/:id', (req, res) => {
  const { id } = req.params;
  const { task } = req.body;
  const findTodo = todos.find((todo) => todo.id === id);

  if (!findTodo) {
    res.status(400).send('Not found Todo');
  }

  todos = todos.map((todo) => (todo.id === id ? { ...todo, task } : todo));

  res.status(200).send(todos.find((todo) => todo.id === id));
});

DELETE : 할일 삭제

app.delete('/todos/:id', (req, res) => {
  const { id } = req.params;
  const findTodo = todos.find((todo) => todo.id === id);

  if (!findTodo) {
    res.status(400).send('Not found Todo');
  }

  todos = todos.filter((todo) => todo.id !== id);
  res.status(200).send('Todo Delete Success');
});

Fetch API

CORS

• 해결하는 주체는 Backend (근본)

🚨 Access to fetch at 'http://localhost:4000/todos' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

학습을 목적임으로, Express 미들웨어로 해결

npm i cors

// server.js
const cors = require('cors');

app.use(cors());

GET

• 기본 사용법

const fetchDate = () => {
  fetch('http://localhost:4000/todos') // 👈🏻 Promise 반환
    .then((res) => res.json())
    .then((data) => console.log(data))
    .catch((e) => console.log(e));
};

• async/await 과 함께 사용하는 방법

const fetchDateAsync = async () => {
  try {
    const response = await fetch('http://localhost:4000/todos');
    const data = await response.json();
    console.log(data);
  } catch (e) {
    console.log(e);
  }
};

const fetchDateAsync = async () => {
  try {
    const data = await (await fetch('http://localhost:4000/todos')).json();
    console.log(data);
  } catch (e) {
    console.log(e);
  }
};

POST

const fetchAdd = async () => {
  await fetch('http://localhost:4000/todos', {
    method: 'POST', // 👈🏻 항상 대문자로
    headers: {
      'Content-Type': 'application/json', // 👈🏻 꼭 Data의 타입을 명시해주어야 한다.
    },
    body: JSON.stringify({ text: 'Learn React' }),
  });
};

PATCH

const fetchToggle = async () => {
  await fetch(`http://localhost:4000/todos/${id}`, {
    method: 'PATCH',
  });
};

DELETE

const fetchDelete = async () => {
  await fetch(`http://localhost:4000/todos/${id}`, {
    method: 'DELETE',
  });
};

Axios

• 설치

npm i axios

🧐 면접질문 : 둘다 http 리퀘스트를 만드는건 동일하다. fetch API 내장 함수이고, axios는 라이브러리이기 때문에 fetch API 보다 더 넓은 범위를 커버 할 수 있다. (사용에 있어 편의성을 제공하는 장점이 있다.)

GET

const axiosDate = () => {
  axios
    .get('http://localhost:4000/todos')
    .then((res) => {
      console.log(res);
      console.log(res.data);
    })
    .catch((e) => console.log(e));
};

const axiosDateAsync = async () => {
  try {
    const response = await axios.get('http://localhost:4000/todos');
    console.log(response.data);
  } catch (e) {
    console.log(e);
  }
};

POST

const axiosPost = async () => {
  try {
    await axios.post('http://localhost:4000/todos', {
      text: 'Learn React Axios',
    });
  } catch (e) {
    console.log(e);
  }
};

Patch

const axiosPatch = async () => {
  try {
    await axios.patch(`http://localhost:4000/todos/${id}`);
  } catch (e) {
    console.log(e);
  }
};

Delete

const axiosDelete = async () => {
  try {
    await axios.delete(`http://localhost:4000/todos/${id}`);
  } catch (e) {
    console.log(e);
  }
};