요청과 응답 이해하기
request 요청 : 클라이언트가 서버로 요청
response 응답 : 서버가 클라이언트에 응답
import http from 'http';
http.createServer((req, res)=>{
res.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'});
res.write('<h1>hello</h1>');
res.end('<p>seohee</p>');
})
.listen(8000, ()=>{
console.log('8000포트에서 대기중 입니다');
});
writeHead : 응답에 대한 정보를 기록하는 메서드
write : 클라이언트로 보낼 데이터 -> 데이터가 기록되는 부분을 본문 (body)
end : 클라이언트로 마지막 데이터를 보내고 종료
REST와 라우팅 사용하기
REST : 서버의 자원을 정의하고 자원에 대한 주소를 지정
메서드 GET, POST, PUT, PATCH, DELETE, OPTIONS
restFront.css
a { color: blue; text-decoration: none; }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="/restFront.html">Home</a>
<a href="/about.html">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 = '';
});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="/restFront.html">Home</a>
<a href="/about.html">About</a>
</nav>
<div>
<h2>소개 페이지입니다.</h2>
<p>사용자 이름을 등록하세요!</p>
</div>
</body>
</html>test.js
import { createServer } from 'http';
import { promises as fs } from 'fs';
createServer(async (req, res)=>{
try{
console.log(req.method, req.url);
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);
}
try {
const data = await fs.readFile(`.${req.url}`);
return res.end(data);
} catch(err){
}
}
res.writeHead(404);
return res.end('NOT FOUND');
} catch (err){
console.log(err);
res.writeHead(500, {'Content-Type': 'text/plain; charset=utf-8'});
res.end(err.message);
}
})
.listen(8082, ()=>{
console.log('8082포트에서 대기중입니다');
});
즐기면서 정확하게 나아가는 웹프론트엔드 개발자 https://happhee-dev.tistory.com/ 로 이전하였습니다