backend

직접 만들어보는 To Do List - Express.js + React.js + SQLite (2)

Express를 사용하여 API 서버를 구축하는 과정을 설명합니다. get, post, put, delete 메소드를 사용하여 CRUD를 구현하는 방법입니다. JSON 형태로 데이터를 전송하기 위한 설정 변경과 라우팅 처리 방법을 소개합니다.

Photo by Mathew Schwartz / Unsplash

첫번째 연재글을 통해서 Express를 이용해서 간단한 서버를 구축해봤습니다.

간단하게 진행 방향을 잡아보겠습니다.

API 서버 구축 후 React와 연결된 구성으로 만들 예정입니다. 현재로서는 API 서버 구축에 집중해서 진행하겠습니다.

이전 포스팅에서 작성한 server.js를 이어서 보겠습니다.

// backend/server.js
const express = require('express')
const app = express()
const PORT = 5000

// Todo : to do 조회, 작성, 수정, 삭제 구현

app.listen(PORT, () => {
    console.log(`http://localhost:${PORT} 에서 서버 실행중`)
})

Route(라우팅) 처리

아래와 같이 추가해주었습니다.

// backend/server.js
const express = require('express')
const app = express()
const PORT = 5000

/** 새로 추가된 부분 시작 */


// 전체 할 일 조회
app.get('/api/todos', (req, res) => {
    res.send('전체 To Do List')
})

// 개별 할 일 조회
app.get('/api/todos/:id', (req, res) => {
    res.send(`To Do ${req.params.id}`)
})

// 새로운 할 일 추가
app.post('/api/todos/create', (req, res) => {
    res.send('To Do 생성')
})

// 개별 할 일 수정
app.put('/api/todos/:id', (req, res) => {
    res.send(`${req.params.id} To Do 수정`)
})

// 개별 할 일 삭제
app.delete('/api/todos/:id', (req, res) => {
    res.send(`${req.params.id} To Do 삭제`)
})

/** 새로 추가된 부분 끝 */

app.listen(PORT, () => {
    console.log(`http://localhost:${PORT} 에서 서버 실행중`)
})

전체적인 맥락을 보면 아래와 같이 네 가지 메소드를 사용합니다.

app.get() - 조회
app.post() - 생성
app.put() - 수정
app.delete() - 삭제

Express에서 get, post, put, delete 메소드는 HTTP 요청을 받아서 CRUD_{Create, Read, Update, Delete}를 구현할 때 사용됩니다.

쉽게 이야기해서 아래와 같은 경로로 접근했을 때 할 일 들을 만들어준 셈입니다.

http://localhost:5000/api/todos
http://localhost:5000/api/todos/create
http://localhost:5000/api/todos/1

사용자가 http://localhost:5000/api/todos 로 요청(GET)이 들어올 때는 전체 목록을 보내줄 것이고, http://localhost:5000/api/todos/create로 요청(POST)이 들어오면 새로운 할 일을 생성을 해줄 것입니다.

http://localhost:5000/api/todos/1 로 요청이 들어올 경우엔 3가지 경우를 처리하도록 작성해줬습니다.

GET 요청 - 해당 아이디(1번 아이디)의 내용 전송
PUT 요청 - 해당아이디(1번 아이디) 내용 수정
DELETE 요청 - 해당 아이디(1번 아이디) 삭제

이렇게 어떤 방식으로 요청이 들어오냐에 따라 하는 일이 달라집니다.

매개변수 - Request, Response

지금까지 설정한 Route 부분에서 핸들러 함수를 넘겨주는 부분을 보면, req, res 라는 매개변수로 값을 넘겨주는 것을 볼 수 있습니다.

req와 res는 임의로 넣은 이름 - 통상적으로 많이 쓰이는 명명이기도 합니다 - 이고, request(요청), response(응답)를 의미합니다.

req _Request - 사용자가 보낸 요청
res _Response - 서버에서 보내주는 응답

두 매개변수는 위와 같은 역할을 합니다.

그래서 req는 클라이언트 보낸 요청 값을 받아올 때 사용하고, res는 서버에서 처리한 결과를 보내줄 때 사용합니다.

요청에 대한 처리만 간략하게 둘러보았습니다.

실제로 해당 주소로 접속해보면 아래와 같이 확인할 수 있습니다.

JSON 설정

프론트엔드를 연결하기 전에 약간 더 소스를 고쳐주겠습니다.

리액트와 REST API 형식으로 통신할 것이기 때문에 JSON 형태로 값을 넘겨주어야하는데, 현재는 그냥 문자열로 보내주는 상황입니다.

JSON을 사용할 수 있도록 소스를 아래와 같이 바꿔주세요.

// backend/server.js
const express = require('express')
const app = express()
const PORT = 5000

// JSON 설정 
app.use(express.json())

// HTML부터 오는 폼데이터를 처리하기 위한 설정
app.use(express.urlencoded({ extended: true }))

(... 라우팅 처리 내용 생략)

JSON설정과 HTML 요청 처리 부분은 그냥 프론트엔드와 통신할 때 필요한 설정이다 정도로만 이해하고 넘어가겠습니다.

이렇게 설정하고 나면, 라우팅 처리도 아래와 같이 바꿔주도록 합니다.

...
// 전체 할 일 조회
app.get('/api/todos', (req, res) => {
    res.json({message:"전체 To Do List"})
})

// 개별 할 일 조회
app.get('/api/todos/:id', (req, res) => {
    res.json({message:`To Do ${req.params.id}`})
})

// 새로운 할 일 추가
app.post('/api/todos/create', (req, res) => {
    res.json({message:"To Do 생성"})
})

// 개별 할 일 수정
app.put('/api/todos/:id', (req, res) => {
    res.json({message:`${req.params.id} To Do 수정`})
})

// 개별 할 일 삭제
app.delete('/api/todos/:id', (req, res) => {
    res.json({message:`${req.params.id} To Do 삭제`})
})
...