직접 만들어보는 To Do List - Express.js + React.js + SQLite (2)
첫번째 연재글을 통해서 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 요청을 받아서 CRUDCreate, 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 삭제`})
})
...이제부터는 JSON 형식으로 데이터가 전달되고, 우리는 이걸 받아서 리액트에서 처리할 것입니다. 다음 포스팅에서 이어서 작성하겠습니다.