Node.js
3-3. 노드 REST API 서버 만들기
홍주누
2023. 4. 13. 13:46
I. REST API
1. 서버에 요청을 보낼 때는 주소를 통해 요청의 내용을 표현
- /index.html 이면 index.html 을 보내달라는 뜻
- 항상 html 을 요구할 필요는 없음
- 서버가 이해하기 쉬운 주소가 좋음
2. REST API (Representational State Transfer)
- 서버의 자원을 정의하고 자원에 대한 주소를 지정하는 방법
- /user 이면 사용자 정보에 관한 정보를 요청하는 것
- /post 면 게시글에 관련된 자원을 요청하는 것
3. HTTP 요청 메서드
① GET : 서버 자원을 가져오려고 할 때 사용
② POST : 서버에 자원을 새로 등록하고자 할 때 사용 (또는 뭘 써야할 지 애매할 때)
③ PUT : 서버의 자원을 요청에 들어있는 자원으로 치환하고자 할 때 사용
④ PATCH : 서버 자원의 일부만 수정하고자 할 때 사용
⑤ DELETE : 서버의 자원을 삭제하고자 할 때 사용
II. HTTP 프로토콜
1. 클라이언트가 누구든 서버와 HTTP 프로토콜로 소통 가능
- iOS, 안드로이드, 웹이 모두 같은 주소로 요청을 보낼 수 있음
- 서버와 클라이언트 분리
2. RESTful
- REST API를 사용한 주소 체계를 이용하는 서버
- GET / user는 사용자를 조회하는 요청, POST / user는 사용자를 등록하는 요청
III. REST 서버 만들기
// about.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>RESTful SERVER</title>
<link rel="stylesheet" href="./restFront.css" />
</head>
<body>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
<div>
<h2>소개 페이지입니다.</h2>
<p>사용자 이름을 등록하세요!</p>
</div>
</body>
</html>// restFront.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>RESTful SERVER</title>
<link rel="stylesheet" href="./restFront.css" />
</head>
<body>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
<div>
<form id="form">
<input type="text" id="username">
<button type="submit">등록</button>
</form>
</div>
<div id="list"></div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="./restFront.js"></script>
</body>
</html>// restFront.js
async function getUser() { // 로딩 시 사용자 가져오는 함수
try {
const res = await axios.get('/users');
const users = res.data;
const list = document.getElementById('list');
list.innerHTML = '';
// 사용자마다 반복적으로 화면 표시 및 이벤트 연결
Object.keys(users).map(function (key) {
const userDiv = document.createElement('div');
const span = document.createElement('span');
span.textContent = users[key];
const edit = document.createElement('button');
edit.textContent = '수정';
edit.addEventListener('click', async () => { // 수정 버튼 클릭
const name = prompt('바꿀 이름을 입력하세요');
if (!name) {
return alert('이름을 반드시 입력하셔야 합니다');
}
try {
await axios.put('/user/' + key, { name });
getUser();
} catch (err) {
console.error(err);
}
});
const remove = document.createElement('button');
remove.textContent = '삭제';
remove.addEventListener('click', async () => { // 삭제 버튼 클릭
try {
await axios.delete('/user/' + key);
getUser();
} catch (err) {
console.error(err);
}
});
userDiv.appendChild(span);
userDiv.appendChild(edit);
userDiv.appendChild(remove);
list.appendChild(userDiv);
console.log(res.data);
});
} catch (err) {
console.error(err);
}
}
window.onload = getUser; // 화면 로딩 시 getUser 호출
// 폼 제출(submit) 시 실행
document.getElementById('form').addEventListener('submit', async (e) => {
e.preventDefault();
const name = e.target.username.value;
if (!name) {
return alert('이름을 입력하세요');
}
try {
await axios.post('/user', { name });
getUser();
} catch (err) {
console.error(err);
}
e.target.username.value = '';
});// restServer.js
const http = require('http');
const fs = require('fs').promises;
const users = {}; // 데이터 저장용
http.createServer(async (req, res) => {
try {
if (req.method === 'GET') {
if (req.url === '/') {
const data = await fs.readFile('./restFront.html');
res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
return res.end(data);
} else if (req.url === '/about') {
const data = await fs.readFile('./about.html');
res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
return res.end(data);
} else if (req.url === '/users') {
res.writeHead(200, { 'Content-Type': 'application/json; charset=utf-8' });
return res.end(JSON.stringify(users));
}
// /도 /about도 /users도 아니면
try {
const data = await fs.readFile(`.${req.url}`);
return res.end(data);
} catch (err) {
// 주소에 해당하는 라우트를 못 찾았다는 404 Not Found error 발생
}
} else if (req.method === 'POST') {
if (req.url === '/user') {
let body = '';
// 요청의 body를 stream 형식으로 받음
req.on('data', (data) => {
body += data;
});
// 요청의 body를 다 받은 후 실행됨
return req.on('end', () => {
console.log('POST 본문(Body):', body);
const { name } = JSON.parse(body);
const id = Date.now();
users[id] = name;
res.writeHead(201, { 'Content-Type': 'text/plain; charset=utf-8' });
res.end('ok');
});
}
} else if (req.method === 'PUT') {
if (req.url.startsWith('/user/')) {
const key = req.url.split('/')[2];
let body = '';
req.on('data', (data) => {
body += data;
});
return req.on('end', () => {
console.log('PUT 본문(Body):', body);
users[key] = JSON.parse(body).name;
res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' });
return res.end('ok');
});
}
} else if (req.method === 'DELETE') {
if (req.url.startsWith('/user/')) {
const key = req.url.split('/')[2];
delete users[key];
res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' });
return res.end('ok');
}
}
res.writeHead(404);
return res.end('NOT FOUND');
} catch (err) {
console.error(err);
res.writeHead(500, { 'Content-Type': 'text/plain; charset=utf-8' });
res.end(err.message);
}
})
.listen(8082, () => {
console.log('8082번 포트에서 서버 대기 중입니다');
});// restFront.css
a { color: blue; text-decoration: none; }
✨ restServer.js 에 주목
- GET 메서드에서 /, /about 요청 주소는 페이지를 요청하는 것이므로 HTML 파일을 읽어서 전송한다.
AJAX 요청을 처리하는 /users 에서는 users 데이터를 전송한다.
JSON 형식으로 보내기 위해 JSON.stringify 를 해주었다.
그 외의 GET 요청은 CSS 나 JS 파일을 요청하는 것이므로 찾아서 보내주고,
없다면 404 NOT FOUND 에러를 응답한다.
- 해당하는 주소가 없을 경우, 404 NOT FOUND 에러를 응답한다.
✨ 아래는 GET 메서드를 실행한 결과이다.
- Home 화면 ( / )
- About 화면 ( /about )
- "홍준우" 이름을 등록 후의 화면 ( /users )
