전영호의 개발 블로그

get, post, put, delete

{
  "scripts": {
    "start": "npx supervisor app03.js"
  },
  "dependencies": {
    "bcrypt": "^5.1.1",
    "body-parser": "^1.20.2",
    "ejs": "^3.1.9",
    "express": "^4.19.2",
    "supervisor": "^0.12.0"
  }
}

package.json

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script>

    let content;
    window.onload = () => {
        content = document.getElementById("content");
        const getM = document.getElementById("getMembers");
        getM.addEventListener("click", getMembers);
        const regView = document.getElementById("regView");
        regView.addEventListener("click", registerView);
    }
    const register = () => {
        const arr = $("#form").serializeArray();
        // form 태그 안의 내용을 jquery 가 배열로 만들어준다
        console.log("arr : ", arr);
        let data = {};
        arr.forEach( d => data[d.name] = d.value );
        console.log("data : ", data);
        fetch("/register",{
            method : "post",
            headers : {"Content-Type":"application/json"},
            body : JSON.stringify(data)
            // 보내는 데이터를 json 방식으로 변환하여 보낸다
        })
        .then( res => res.json() )
        .then( result => {
            console.log( result )
            if(result === 1){
                alert("회원가입 성공!!!");
                getMembers();
            }
        })
    }
    const registerView = () => {
        let msg = `<form id="form">
            <input type="text" name="id" id="id" placeholder="input id"><br>
            <input type="text" name="pwd" id="pwd" placeholder="input pwd"><br>
            <input type="text" name="name" id="name" placeholder="input name"><br>
            <input type="text" name="addr" id="addr" placeholder="input addr"><br>
            <input type="button" id="btn" value="저장">
            </form>`;
        
        content.innerHTML = msg;
    }
    const getMembers = () => {
        fetch("get_members", {method:"get"})
        .then(res => res.json())
        .then(m => {
        let msg = "<table border='1'>";
            msg += "<tr><th>아이디</th><th>이름</th><th>주소</th></tr>"
            m.forEach((mem) => {
                msg += "<tr>";
                msg += `<td>${mem.id}</td>
                        <td style="cursor:pointer;" onclick="info('${mem.id}')">${mem.name}</td>
                        <td>${mem.addr}</td>`;
                msg += "</tr>";
            })
            msg += "</table>"
            content.innerHTML = msg;
        })
    }
    const info = (id) => {
        console.log("id : ", id);
        fetch("/search/"+id, {method:"get"})
        .then(res => res.json())
        .then(data => {
            console.log("data : ", data);
            content.innerHTML = `id : ${data.id}<br>
                                pwd : ${data.pwd}<br>
                                name : ${data.name}<br>
                                addr : ${data.addr}<hr>
                                <span style=cursor:pointer;
                                onclick="getMembers()"">
                                목록으로 이동
                                </span>
                                &nbsp; / &nbsp;
                                <span style=cursor:pointer;
                                onclick="modify_form('${data.id}')">
                                수정
                                </span>
                                &nbsp; / &nbsp;
                                <span style=cursor:pointer;
                                onclick="deleteM('${data.id}')">
                                삭제
                                </span>`;
        })
    }
    const modify_form = async (id) => {
        registerView();
        $("#btn").click(modify)
        $("#btn").val("수정 완료")
        const res = await fetch("/search/"+id, {method:"get"});
        const data = await res.json();
        console.log("data : ", data);
        $("#id").val(data.id);
        $("#pwd").val(data.pwd);
        $("#name").val(data.name);
        $("#addr").val(data.addr);
    }
    const modify = () => {
        const arr = $("#form").serializeArray();
        let data = {};
        arr.forEach( d => data[d.name] = d.value );
        fetch("modify", {
            method : "put",
            headers : {"Content-Type":"application/json"},
            body : JSON.stringify( data )
        })
        .then(res => res.json())
        .then(result => {alert("수정 성공"); info(data.id);})
    }
    const deleteM = async (id) => {
        const res = await fetch("/delete", {
            method : "delete",
            headers : {"Content-Type":"application/json"},
            body : JSON.stringify({id : id})
        })
        const result = await res.json();
        if(result == 1){
            alert("삭제 완료!!!");
            getMembers();
        }
    }
</script>

<div id="content">

</div>
<hr>
<button type="button" id="getMembers">목록보기</button>
<button type="button" id="regView">회원가입</button>

index.ejs

const express = require("express");
const app = express();

app.set("views", __dirname + "/views");
app.set("view engine", "ejs");

let members = [
    {id : "aaa", pwd : "aaa", name : "홍길동a", addr : "a산골짜기"},
    {id : "bbb", pwd : "bbb", name : "홍길동b", addr : "b산골짜기"},
    {id : "ccc", pwd : "ccc", name : "홍길동c", addr : "c산골짜기"},
]

app.get("/", (req, res) => {
    res.render("index");
})

app.get("/get_members", (req, res) => {
    res.json(members);
})

const bodyParser = require("body-parser");
app.use(bodyParser.json());
// post 로 받아오는 데이터를 json 형식으로 받아온다는 의미
app.post("/register", (req, res) => {
    console.log("req.body : ", req.body);
    members = members.concat(req.body);
    res.json(1);
    // 프론트한테 정상적으로 받았기 때문에 1 응답
})

app.get("/search/:id", (req, res) => {
    console.log(req.params);
    const result = members.filter(mem => mem.id === req.params.id)
    console.log("result : ", result);
    res.json(result[0]);
})

app.put("/modify", (req, res) => {
    members = members.filter(mem => mem.id !== req.body.id);
    members = members.concat(req.body);
    res.json(1);
})

app.delete("/delete", (req, res) => {
    members = members.filter(mem => mem.id !== req.body.id);
    res.json(1);
})

app.listen(3000, () => {console.log("3000server")})

app03.js