-
06/04 node.js게임 웹 프로그래밍/node.js 2021. 6. 4. 14:31
1. rest api와 라우팅
rest api
네트워크 구조의 한 형식
서버의 자원을 정의하고 자원에 대한 주소를 지정하는 방법
주소는 명사로 구성
주소 외에도 http요청 메서드를 사용
http 메서드
GET
서버 자원을 가져오고자 할 때 사용
요청의 본문에 데이터를 넣지 않음
데이터를 서버로 보내야 한다면 쿼리스트링을 사용
POST
요청의 본문에 새로 등록할 데이터를 넣음
PUT
서버에 자원을 요청에 들어 있는 자원으로 치환할 때 사용
PATCH
서버에 자원의 일부를 요청에 들어 있는 자원으로 치환할 때 사용
DELETE
서버의 자원을 삭제할 때 사용
주소 하나가 요청메서드를 여러개 가질 수 있음
서버확장
Scaling
주소설계
프로토콜 문서 작성
주소, 메서드, 어떤 역할, 어떻게 보내고 받나
restServer.js
const http = require("http"); const fs = require("fs"); const users = {}; const server = http.createServer((req,res) => { if(req.method == 'GET') { console.log(req.method + ", " + req.url); if( req.url == '/') { return fs.readFile('./restFront.html', (err, data) => { if(err) throw err; res.end(data); }) } else if (req.url === "/users") { return res.end(JSON.stringify(users)); } 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") { if (req.url === "/users") { let body = ""; req.on("data", data => { body += data; }); return req.on('end', ()=>{ const {name} = JSON.parse(body); const id = +new Date(); users[id] = name; console.log(users); res.writeHead(201); res.end('등록성공'); }); } } }); server.listen(8085, () => { console.log("8005번 포트에서 서버 대기중..."); });restfront.js
function getUser() { console.log("getUser"); let xhr = new XMLHttpRequest(); xhr.onload = function() { if(xhr.status === 200) { let users = JSON.parse(xhr.responseText); 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(); } window.onload = getUser; document.getElementById("form").addEventListener("submit", function(e) { e.preventDefault(); let name = e.target.useranme.value; if(!name) { return alert("이름을 입력하세요"); } console.log(name); let xhr = new XMLHttpRequest(); xhr.onload = function () { if(xhr.status === 201) { getUser(); } else { console.error(); } }; xhr.open("POST", "/users"); xhr.setRequestHeader("Content-Type", "application/json"); xhr.send(JSON.stringify({name})); e.target.useranme.value = ""; });restfront.html
<!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" type="text/css" href="./restfront.css" /> <title>RESTful SERVER</title> </head> <body> <a >asdf</a> <form id="form"> <input type="text" id="useranme"/> <button type="submit">등록</button> </form> <div id="list"> </div> </body> <script src="./restfront.js"></script> </html>restfront.css
a { color: blue; text-decoration: none; }
'게임 웹 프로그래밍 > node.js' 카테고리의 다른 글
06/09 node.js (0) 2021.06.09 06/08 node.js (0) 2021.06.08 06/03 node.js 서버 (0) 2021.06.03 06/02 node.js (0) 2021.06.02 06/01 node.js (0) 2021.06.01