RESTful API 개념 및 CRUD API 구현
1. RESTful API의 개념
REST(Representational State Transfer)는 웹 애플리케이션의 구조를 정의하는 아키텍처 스타일입니다.
주요 HTTP 메서드:
GET: 서버에서 데이터를 조회
POST: 서버에 데이터를 생성
PUT: 서버에서 데이터를 갱신
DELETE: 서버에서 데이터를 삭제
2. CRUD (Create, Read, Update, Delete) API를 Express.js로 구현
Express.js를 사용하여 RESTful API를 구현
1) express-router-index.js
const express = require('express'); // Express 모듈을 가져옵니다.
const app = express(); // Express 애플리케이션 인스턴스를 생성합니다.
const port = 3000; // 서버가 실행될 포트를 설정합니다.
app.use(express.json()); // JSON 요청 바디를 파싱하기 위한 미들웨어 추가
// 로깅 미들웨어: 모든 요청에 대해 HTTP 메서드와 URL을 로그에 기록합니다.
app.use((req, res, next) => {
console.log(`${req.method} ${req.url}`);
next(); // 다음 미들웨어 또는 라우터로 제어를 넘김
});
// 라우터를 가져옵니다.
const indexRouter = require('./routers/index');
const itemsRouter = require('./routers/items'); // CRUD 작업을 위한 아이템 라우터
// 라우터를 애플리케이션에 연결합니다.
app.use('/', indexRouter);
app.use('/api', itemsRouter); // '/api' 경로 하위에 아이템 라우터를 적용
app.listen(port, () => {
console.log(`서버가 실행 중입니다. http://localhost:${port}`);
});
이렇게 하고 한글 전송안되서 추가하고 주석으로 설명들도 더 추가 접은글
const express = require('express'); //Express 모듈을 가져옵니다.
// import express from 'express';
// import 구문을 사용하려면 ES6모듈 사용에 대한 환경설정을 해야한다 package.json 에 "type": "module" 추가 필요
const app = express(); // Express 애플리케이션을 만듭니다.
const port = 3000; // 서버가 실행될 포트를 설정합니다.
app.use(express.json()); // JSON 파싱을 위한 미들웨어 추가
//app.use(express.urlencoded({ extended: true }));
// 로깅 미들웨어
app.use((req, res, next) => {
console.log(`${req.method} ${req.url}`);
next();
});
// 라우터를 가져옵니다.
const indexRouter = require('./routers/index');
const itemsRouter = require('./routers/items');
// 라우터를 애플리케이션에 적용합니다.
app.use('/', indexRouter);
app.use('/api', itemsRouter);
app.listen(port, () => { // 서버를 지정된 포트에서 실행합니다.
console.log(`서버가 실행 중입니다. http://localhost:${port}`);
// 서버가 실행 중임을 콘솔에 출력합니다.
});
2) items.js (CRUD 라우터 구현)
const express = require('express'); // Express 모듈을 가져옵니다.
const router = express.Router(); // 라우터 인스턴스를 생성합니다.
let items = []; // 아이템 데이터를 저장하기 위한 배열
// Create: 새로운 아이템을 생성하여 추가합니다.
router.post('/items', (req, res) => {
const newItem = req.body; // 요청 바디에서 새로운 아이템 데이터를 가져옵니다.
items.push(newItem); // 배열에 새로운 아이템 추가
res.status(201).send(newItem); // 생성된 아이템을 응답으로 반환
});
// Read: 모든 아이템을 조회합니다.
router.get('/items', (req, res) => {
res.send(items); // 아이템 배열을 응답으로 반환
});
// Read: 특정 ID를 가진 아이템을 조회합니다.
router.get('/items/:id', (req, res) => {
const id = req.params.id; // URL에서 'id' 경로 파라미터를 가져옵니다.
const item = items.find(i => i.id === parseInt(id)); // 배열에서 ID가 일치하는 아이템을 찾습니다.
if (!item) return res.status(404).send('아이템 못찾음'); // 아이템이 없을 경우 404 응답 반환
res.send(item); // 아이템을 응답으로 반환
});
// Update: 특정 ID를 가진 아이템을 업데이트합니다.
router.put('/items/:id', (req, res) => {
const id = req.params.id;
const item = items.find(i => i.id === parseInt(id));
if (!item) return res.status(404).send('아이템 못찾음');
Object.assign(item, req.body); // 기존 아이템에 새 데이터를 병합
res.send(item); // 업데이트된 아이템을 응답으로 반환
});
// Delete: 특정 ID를 가진 아이템을 삭제합니다.
router.delete('/items/:id', (req, res) => {
const id = req.params.id;
const itemIndex = items.findIndex(i => i.id === parseInt(id));
if (itemIndex === -1) return res.status(404).send('아이템 못찾음');
const deletedItem = items.splice(itemIndex, 1); // 배열에서 아이템을 삭제하고 삭제된 아이템 반환
res.send(deletedItem[0]); // 삭제된 아이템을 응답으로 반환
});
module.exports = router; // 라우터 모듈로 내보냄
한글전송 문제로 코드 추가 접은글
router.use(express.json()); // JSON 파싱 미들웨어
router.use(express.urlencoded({ extended: true })); // URL-encoded 파싱 미들웨어
router.use(express.json({ extended: true }));
상단에 이부분 추가
const express = require('express');
const router = express.Router();
router.use(express.json()); // JSON 파싱 미들웨어
router.use(express.urlencoded({ extended: true })); // URL-encoded 파싱 미들웨어
router.use(express.json({ extended: true }));
let items = []; // 임시 데이터 저장용 배열
// Create: 새로운 아이템을 추가
router.post('/items', (req, res)=>{
console.log(req.body); // 들어오는 데이터 확인
....
이것저것 메모
1. .push의 의미
- 배열의 끝에 새 요소를 추가. 이 경우, 새로운 아이템을 items 배열에 추가
2. findIndex의 반환값이 -1일 때의 의미
- findIndex 메서드는 배열에서 조건을 만족하는 요소의 인덱스를 반환합니다. 조건에 맞는 요소가 없으면 -1을 반환
3. express.json()과 express.urlencoded()의 역할
- express.json(): JSON 형식의 요청 바디를 파싱하여 req.body에 저장
- express.urlencoded(): URL-encoded 형식의 요청 바디를 파싱하여 req.body에 저장
4. 아이템 삭제하는 코드의 if 문과 splice 메서드
// Delete: 특정 ID를 가진 아이템을 삭제하는 엔드포인트
router.delete('/:id', (req, res) => {
const id = req.params.id; // URL 경로에서 ID 파라미터를 가져옵니다.
const itemIndex = items.findIndex(i => i.id === id); // items 배열에서 ID가 일치하는 아이템의 인덱스를 찾습니다.
if (itemIndex === -1) return res.status(404).send('아이템 못찾음'); // 아이템이 없는 경우 404 Not Found 상태 코드와 메시지를 응답으로 보냅니다.
const deletedItem = items.splice(itemIndex, 1); // 해당 아이템을 배열에서 삭제합니다.
res.status(204).send(); // 204 No Content 상태 코드를 응답으로 보냅니다.
});
1). itemIndex:
- const itemIndex = items.findIndex(i => i.id === id);
- findIndex 메서드는 배열에서 주어진 조건을 만족하는 첫 번째 요소의 인덱스를 반환
- i => i.id === id 조건을 만족하는 아이템을 찾기
- 만약 조건을 만족하는 요소가 없으면 findIndex는 -1을 반환
2). if (itemIndex === -1):
- if (itemIndex === -1) return res.status(404).send('아이템 못찾음');
- itemIndex가 -1인 경우는 findIndex가 조건을 만족하는 아이템을 찾지 못했음을 의미
- 이 경우, 404 Not Found 상태 코드와 함께 '아이템 못찾음' 메시지를 응답
- 404 상태 코드는 요청된 리소스를 찾을 수 없음
3). splice 메서드:
- const deletedItem = items.splice(itemIndex, 1);
- splice 메서드는 배열에서 요소를 제거하거나 대체할 때 사용
- splice(start, deleteCount) 형식으로 사용
- itemIndex 위치에서 시작하여 1개의 요소를 제거
- 이 메서드는 제거된 요소들을 배열로 반환. 따라서 deletedItem은 삭제된 아이템을 포함한 배열이 된다
- 여기서는 실제로 반환된 deletedItem을 사용하지 않음, const deletedItem = 부분은 생략해도 된다고 함
4). res.status(204).send();:
- res.status(204).send();
- 삭제가 성공적으로 이루어졌다면 204 No Content 상태 코드를 응답으로 보냄
- 204 상태 코드는 요청이 성공적으로 처리되었지만 응답 본문에 보낼 데이터가 없음
서버 실행 후 브라우저에서 API 테스트 할라고 했는데 안되므로... (이전에 다 회사 서버에서 테스트 파일 만들어서 확인함)
Postman을 사용해봤다.
Postman 사용해서 CRUD 작업 확인하는 방법.
postman 사용해서 데이터 넘겨주고 크롬으로 확인해도됨
** CRUD 각 작업에 대한 API 엔드포인트를 테스트하는 방법 접은글
1. Create: POST /api/items
- Postman 사용
- HTTP 메서드를 POST로 설정
- URL은 http://localhost:3000/api/items로 설정
- 요청 본문에서 x-www-form-urlencoded를 선택하고, 필요한 필드(예: id, name 등)를 입력하거나, raw 옵션에서 JSON 형식으로 데이터를 입력
- 예시 JSON 데이터:
json
{
"id": 1,
"name": "Item 1"
}
- "Send" 버튼을 클릭해서 요청보냄
성공적으로 생성되면, 서버로부터 생성된 아이템의 데이터가 반환
2. Read: GET /api/items
- HTTP 메서드를 GET으로 설정
- URL은 http://localhost:3000/api/items로 설정
- "Send" 버튼을 클릭해서 요청보냄
- 서버로부터 현재 저장된 모든 아이템 목록이 반환
- 특정 아이템 조회: GET /api/items/
- URL은 http://localhost:3000/api/items/1 (아이템 ID에 따라 변경)로 설정
"Send" 버튼을 클릭해서 요청 보냄
서버로부터 해당 ID의 아이템 데이터가 반환
3. Update: PUT /api/items/
- HTTP 메서드를 PUT으로 설정
- URL은 http://localhost:3000/api/items/1 (아이템 ID에 따라 변경)로 설정
- 요청 본문에서 x-www-form-urlencoded를 선택하거나, raw 옵션에서 JSON 형식으로 수정할 데이터를 입력
- 예시 JSON 데이터:
{
"name": "Updated Item 1"
}
"Send" 버튼을 클릭해서 요청 보냄
- 성공적으로 업데이트되면, 서버로부터 수정된 아이템의 데이터가 반환
4. Delete: DELETE /api/items/
- HTTP 메서드를 DELETE으로 설정합니다.
- URL은 http://localhost:3000/api/items/1 (삭제할 아이템의 ID에 따라 변경)로 설정합니다.
- "Send" 버튼을 클릭해서 요청 보냄
- 성공적으로 삭제되면, 서버로부터 삭제된 아이템의 데이터가 반환