06/08 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에 저장되는 정보