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);
  }
};

Last updated