앞선 아티클에서 작성하던 RESTful 서버 구현 예제를 이어서 계속 진행해 보겠습니다.
[restFront.css]
a {
color: blue;
text-decoration: none;
}
[restFront.html]
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RESTful SERVER EXAMPLE</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);
}
}
// 화면이 로드될 때 getUser 호출
window.onload = getUser;
// form 제출(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 = '';
});
[about.html]
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
[restServer.js]
const http = require('http');
const fs = require('fs').promises;
const path = require('path');
http.createServer(async (req, res) => {
try {
console.log(req.method, req.url);
if (req.method === 'GET') {
if (req.url === '/') {
const data = await fs.readFile(path.join(__dirname, 'restFront.html'));
res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8'})
return res.end(data);
}
// 주소가 /도, /about도 아닐 경우
try {
const data = await fs.readFile(path.join(__dirname, req.url));
return res.end(data);
} catch (err) {
// 주소에 해당하는 라우트 찾기 불가로 404 not found error 발생
}
}
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번 포트 대기 중');
});
restServer.js가 여기서 핵심입니다. 아직 완성된 코드는 아니니, 다음 아티클에서 주요 내용을 짚어본 다음 전체 코드를 작성해 보겠습니다.
'Programming > Node.js' 카테고리의 다른 글
| 5. http 모듈로 서버 만들기 (2) - REST와 라우팅 [7] (0) | 2024.07.09 |
|---|---|
| 5. http 모듈로 서버 만들기 (2) - REST와 라우팅 [6] (0) | 2024.07.08 |
| 5. http 모듈로 서버 만들기 (2) - REST와 라우팅 [4] (0) | 2024.07.06 |
| 5. http 모듈로 서버 만들기 (2) - REST와 라우팅 [3] (0) | 2024.07.05 |
| 5. http 모듈로 서버 만들기 (2) - REST와 라우팅 [2] (0) | 2024.07.04 |
