[Express.js] Express를 사용해 간단한 백엔드 서버 API 구축하기

바닐라 자바스크립트로 투두리스트를 만들어보고 있다.

 

투두리스트에 대한 데이터는 로컬 스토리지에 저장해 관리하는 방식으로 만들다가, fetch API를 사용해 http 통신을 구현하고 싶어 직접 서버를 구축하지 않아도 사용할 수 있는 json-server 라이브러리를 사용해 CRUD를 구현했다. 

 

원래는 여기까지만 해볼 생각이었지만, 괜히 욕심이 든다. 어차피 투두리스트 별 것 없는데 간단한 CRUD 백엔드 코드는 나도 만들어볼 수 있지 않을까 싶어 Express를 사용해 간단한 백엔드 서버를 만들어보게 되었다.

 

데이터베이스는 우선 뒤로 하고 우선은 코드 내에서 배열로 목데이터를 관리하기로.

const todos = [
  {
    id: 1,
    checked: false,
    todo: '자바스크립트 공부하기',
    date: '24. 12. 4.',
  },
  {
    id: 2,
    checked: false,
    todo: '알고리즘 강의 듣기',
    date: '24. 12. 4.',
  },
  {
    id: 3,
    checked: false,
    todo: '투두리스트 만들기',
    date: '24. 12. 5.',
  },
];

 

GET 요청

전체 Todo 리스트 가져오기

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

 

특정 Todo 아이템 가져오기

app.get('/api/todos/:id', (req, res) => {
  const parsedId = parseInt(req.params.id);
  const findTodo = todos.find((todo) => todo.id === parsedId);
  if (isNaN(parsedId)) return res.status(400).send({ message: 'Bad Request. Invalid ID.' });
  if (!findTodo) return res.sendStatus(404);
  else return res.status(200).send(findTodo);
});

• 참고로 status 메서드와 sendStatus 메서드의 차이점은 다음과 같다:

세부적인 응답 처리가 필요하면 status를, 간단히 상태 코드만 보내고 끝내려고 한다면 sendStatus를 사용하면 된다.

 

 

POST 요청

app.post('/api/todos', (req, res) => {
  const newTodo = {
    id: todos[todos.length - 1].id + 1,
    ...req.body,
  };
  todos.push(newTodo);
  res.status(200).send(newTodo);
});

 

 

PATCH 요청

app.patch('/api/todos/:id', (req, res) => {
  const parsedId = parseInt(req.params.id);
  if (isNaN(parsedId)) return res.status(400).send({ message: 'Bad Request. Invalid ID.' });
  
  const findTodoIndex = todos.findIndex((todo) => todo.id === parsedId);
  if (findTodoIndex === 1) return response.sendStatus(404);
  
  todos[findTodoIndex] = { ...todos[findTodoIndex], ...req.body };
  res.sendStatus(200);
});

 

 

DELELTE 요청

app.delete('/api/todos/:id', (req, res) => {
  const parsedId = parseInt(req.params.id);
  if (isNaN(parsedId)) return res.status(400).send({ message: 'Bad Request. Invalid ID.' });

  const findTodoIndex = todos.findIndex((todo) => todo.id === parsedId);
  if (findTodoIndex === 1) return response.sendStatus(404);

  todos.splice(findTodoIndex, 1);
  res.sendStatus(200);
});

 

 

참고

Express JS Full Tutorial Playlist 2024