-
06/08 node.js게임 웹 프로그래밍/node.js 2021. 6. 8. 18:18
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]; //수정 버튼 만들기 let edit = document.createElement("button"); edit.textContent = "수정"; edit.addEventListener("click", () => { let name = prompt("바꿀 이름을 입력하세요"); if(!name) { return alert("이름을 반드시 입력하세요") }else { console.log(users[key] + "---->" + name); } let xhr = new XMLHttpRequest(); xhr.onload = () => { //응답을 받았다면 if(xhr.status === 200){ getUser();//리프래시 } else { console.error(xhr.responseText); } }; xhr.open('PUT', '/users/' + key); xhr.setRequestHeader("Content-Rype", "application/json"); let user = { name }; //{ name : name } let json = JSON.stringify(user); xhr.send(json); }); //삭제 버튼 만들기 let remove = document.createElement('button'); remove.textContent = '삭제'; remove.addEventListener('click', ()=>{ //삭제버튼이 클릭 되었다면 실행되는 콜백 함수 alert(users[key] + "님을 삭제합니다."); let xhr = new XMLHttpRequest(); //AJAX에 필요한 API 객체 xhr.onload = () => { if(xhr.status === 200) { getUser(); } else { console.error(xhr.responseText); } }; //응답을 받으면 처리하는 콜백 함수 xhr.open('DELETE', '/users/' + key); // xhr.send(); }); userDiv.appendChild(span); userDiv.appendChild(remove); userDiv.appendChild(edit); 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; }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('등록성공'); }); } }else if(req.method === 'PUT') { if(req.url.startsWith('/users/')) { const key = req.url.split('/')[2]; let body = ''; req.on('data', (data)=> { body += data; }); //데이터를 받았다면 실행하는 콜백 함수 return req.on('end', () => { console.log(body); users[key] = JSON.parse(body).name; //직렬화 해서 속성 찾은걸로 변경 return res.end(JSON.stringify(users)); //역직렬화 해서 응답 }); } }else if(req.method === 'DELETE'){ if( req.url.startsWith("/users/")) { const key = req.url.split('/')[2]; //키를 가져옴 delete users[key]; // 객체의 속성을 삭제 res.end(JSON.stringify(users)); //직렬화 해서 응답함 } } }); server.listen(8085, () => { console.log("8085번 포트에서 서버 대기중..."); });npm
Node Package Manager
package.json
패키지의 버전정보를 기록
npm init
로 자동 생성
전역설치
--global
-g
버전명
버전의 첫번째 자리는 major 버전
두번째는 manor
세번재는 patch버전
주 버전(major버전)이 0이면 초기 개발중
npm update
업데이트 가능한 모든 패키지가 wanted에 적힌 버전으로 업데이트
express
웹 프레임워크
express 프로젝트 생성
1. npm i express-generator -g
2. express 프로젝트 명 //cmd로 진행
3. cd 프로젝트 명
4. npm install
5. npm start
미들웨어
요청과 응답 중간에 위치
미들웨어는 요청과 응답을 조작하여 기능을 추가하기도 하고, 나쁜 요청을 걸러내기도 함
app.use와함께 사용
커스텀미들웨어
app.use(function (req,res,next) { console.log(req.url, "미들웨어 테스트"); next(); });next()를 사용하지 않으면 다음 미들웨어로 넘어가지 않음
next()
next('router')
app.use에 미들웨어를 여러개 장착 가능
morgan
winston
body-parser
본문 해석 모듈
최근에는 express에서 지원
express.json()
static
로그인
인증 인가
세션
DB에 저장되는 정보
'게임 웹 프로그래밍 > node.js' 카테고리의 다른 글
06/10 node.js express를 사용한 rest api 연습 (0) 2021.06.10 06/09 node.js (0) 2021.06.09 06/04 node.js (0) 2021.06.04 06/03 node.js 서버 (0) 2021.06.03 06/02 node.js (0) 2021.06.02