Node 수업내용 21.06.04 Node.js - Rest API와 라우팅
Representational state transfer
네트워크의 구조의 한 형식
서버의 자원을 정의, 자원에 대한 주소를 지정하는 방법. 주소는 의미전달의 효율을 위해 명사로 구성하는 것을 권장.
HTTP요청 메서드를 사용
Get, Post가 요청메서드, Put, Patch DELETE 도 많이사용
GET : 서버 자원을 가져오고자 할 때 사용
요청의 본문에 데이터를 넣지 않는다.
데이터를 서버로 보내야 한다면 쿼리스트링을 사용한다.
POST : 서버에 자원을 새로 등록하고 할 때 사용. 요청의 본문에 새로 등록할 데이터를 넣어 보낸다.
PUT(ALL / 전부) : 서버에 있는 자원을 수정
PATCH(SOME / 일부) : 일부 자원을 수정
DELETE(삭제) : 삭제
주소 하나가 요청메서드를 여러개 가질 수 있다
IOS, 안드로이드, 웹이 모두 같은 주소로 요청을 보낼 수 있다.
서버를 확장할 때 클라이언트에 구애되지 않아 좋다.
주소를 설계하는 것이 좋다.
html은 서버를 정적으로 표현(구조) // 유저인터랙션 - js // 예쁘게 디자인 - css
html이 브라우저에서 코드를 위에서부터 컴파일링하며 내용들을 로딩함
스크립트<script>의 위치에 따라 스크립트<script>가 언제 로딩되는지 알 수 있다.
버튼을 누르니 네트워크에 로딩된 파일들이 나온다.
a{
color: blue;
text-decoration: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./RESTFront.css" />
<title>RESTful SERVER</title>
</head>
<body>
<nav>
<a href="http://www.naver.com">naver</a>
<a href="/">home</a>
<a href="/about">about</a>
</nav>
<div>
<form id="form">
<input type = "text" id="username"/>
<button>등록</button>
</form>
</div>
<div id="list"></div>
<script src = "./RESTFront.js"></script>
</body>
</html>//로딩시 사용자가 가져오는 함수
function getUser(){
console.log("getUser");
let xhr = new XMLHttpRequest();
xhr.onload = function () {
alert(xhr.status)
//응답 받았을 때
if(xhr.status == 200){
console.log(xhr.responseText);
//역직렬화
let users = JSON.parse(xhr.responseText);
//list이름으로 HTML요소를 가져온다
let list = document.getElementById(`list`);
list.innerHTML = ``;
Object.keys(users).map(function(key){
let userDiv = document.createElement(`div`);
let span = document.createElement(`span`);
span.textContent = users[key];
userDiv.appendChild(span);
list.appendChild(userDiv);
});
}
};
xhr.open(`GET`,`/users`);
xhr.send();
}
//로딩시 getUser호출
window.onload = getUser;
document.getElementById("form").addEventListener(`submit`, function(e){
//이벤트 전파를 막는다
e.preventDefault();
//인풋 텍스트의 값을 가져온다.
//만약에 값이 비어있다면 alert창을 띄운다.
let name = e.target.username.value;
if(!name){
return alert("이름을 입력하세요");
}
console.log(e.target.username.value);
//AJAX
let xhr = new XMLHttpRequest();
//응답을 받으면 호출되는 콜백
xhr.onload = function () {
console.log("xhr.status" + xhr.status);
if(xhr.status === 201){//등록이 완료 되었다면
getUser();
}else{
console.error(xhr.responseText);
}
};
//어디에
xhr.open("POST", "/users");
//JSON형식으로
xhr.setRequestHeader("Content-Type", "application/json");
//서버에 데이터를 보낸다.(객체를 문자열로)
xhr.send(JSON.stringify({name}));
//인풋 텍스트 초기화
e.target.username.value = "";
});
const http = require(`http`);
const fs = require(`fs`);
const users = {};
//서버 생성 + 요청콜백 등록
const server = http.createServer((req,res)=>{
//GET방식으로 요청을 받았을 때
if(req.method == `GET`){
//URL이 /라면
if(req.url == `/`){
//RESTFront.html파일을 읽고 응답한다.
return fs.readFile(`./RESTFront.html`, (err,data)=>{
//파일을 읽다가 문제가 생기면 err매개변수에 값이 들어옴
//정상적으로 읽었다면 data에 값이 들어옴 (buffer)
if(err) throw err;
//응답을 하고 종료한다.
res.end(data);
});
}
return fs.readFile(`.${req.url}`, (err, data)=>{
if(err){
res.writeHead(404, `NOT FOUND`);
return res.end(`NOT FOUND`);
}
return res.end(data);
});
}else if(req.method ==="POST"){
req.on("data", data=>{
console.log(data);
});
return req.on("end", ()=>{
res.writeHead(201);
res.end("등록성공");
});
}
res.writeHead(404, "Not Found");
return res.end("404 Not FOund");
});
//서버 시작
server.listen(2021, ()=>{
console.log("2021번 포트에서 서버 대기중...");
});
새로운 유저를 등록할 때마다 유저 리스트가 갱신된다.
다만 유저를 등록할 때마다 200 alert가 팝업되는 코드는 지우는게 수월할 듯 싶다.