NODE.JS 활용 (5)

이이태태영영 2024. 4. 4. 17:38

2024. 4. 4. 17:38

NODE.JS 암호화

암호화 기능 설치 : npm install bcrypt --save

bcrypt.hashSync(pwd, 10) : pwd를 암호화하는 역할, 숫자가 높을수록 더 복잡하게 암호화

bcrypt.compareSync(pwd, 암호화한 변수) : 암호화된 값과 일반 값을 비교하는 역할 (true, false)

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

app.get("/", (req, res) => {
  const pwd = "test";
  //const changePwd = bcrypt.hash(pwd, 10);
  //console.log(changePwd);
  //changePwd.then((res) => console.log(res));
  const changePwd = bcrypt.hashSync(pwd, 10); // pwd를 암호화하는 역할, 숫자가 높을수록 더 복잡하게 암호화
  console.log(changePwd);
  const result = bcrypt.compareSync(pwd, changePwd); // 암호화된 값과 일반 값을 비교하는 역할
  console.log(result)
  res.send("/경로");
});

app.listen(3000, () => console.log("3000 실행 ..."));

실행 결과

NODE.JS fetch

__dirname : 현재 파일이 속해있는 폴더까지의 절대경로를 알려주는 역할

* location은 전체 페이지를주고 받지만 fetch는 데이터만 주고 받는다.

* 따라서 페이지가 다시 로드되지는 않는다.

.json() : json형식으로 변환하는 역할

<script>
  function test() {
    //location.href = "fetch01";
    //fetch("/fetch01");
    /*
    const result = fetch("/get_count");
    console.log("result : ", result);
    result.then((res) => {
        console.log("res : ", res);
        return res.json();
    })
    .then((data) => {
        console.log("data : ", data);
        document.getElementById("cnt").innerHTML = data.cnt;
    });
    */
    fetch("/get_count")
      .then((res) => res.json())
      .then((data) => {
        console.log("data : ", data);
        document.getElementById("cnt").innerHTML = data.cnt;
      });
  }
  async function test2() {
    const result = await fetch("/get_count");
    console.log("result ; ", reuslt);
    const data = await reuslt.json();
    console.log("data : ", data);
    document.getElementById("cnt").innerHTML = data.cnt;
  }
</script>
<h1>일</h1>
<h1>일</h1>
<h1>일</h1>
<h1>일</h1>
<h1>일</h1>
<h1>일</h1>
<button onclick="test()">클릭</button>
<button onclick="test2()">클릭2</button>
<span id="cnt"><%= count %></span>

실행 결과

NODE.JS fetch (2)

get : 데이터를 얻어올 때

post : 추가

put : 수정

delete : 삭제

rest.ejs
<script>
  let txt;
  window.onload = () => {
    txt = document.getElementById("text");
  };
  const getFunc = () => {
    fetch("/test", { method: "get" })
      .then((res) => res.json())
      .then((data) => (txt.innerHTML = data));
  };
  const postFunc = () => {
    fetch("/test", { method: "post" })
      .then((res) => res.json())
      .then((data) => (txt.innerHTML = data));
  };
  const putFunc = async () => {
    const res = await fetch("/test", {method : "put"});
    const data = await res.json();
    txt.innerHTML = data
  }
  const deleteFunc = async () => {
    const res = await fetch("/test", {method : "delete"});
    const data = await res.json();
    txt.innerHTML = data
  }
</script>
<span id="text">내용</span>
<hr />
<button type="button" onclick="getFunc()">getFunc</button>
<button type="button" onclick="postFunc()">postFunc</button>
<button type="button" onclick="putFunc()">putFunc</button>
<button type="button" onclick="deleteFunc()">deleteFunc</button>

실행 결과

NODE.JS fetch (3)

SPA(single page application) : 여러 기능들이 한 페이지에서 작동

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);
});

app.listen(3000, () => console.log("3000 실행 ..."));

<script>
  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산골짜기" },
  ];
  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 getMembers = () => {
    fetch("/get_members")
      .then((res) => res.json())
      .then((m) => {
        let msg = "<table border='1'>";
        msg += "<tr><th>아이디</th> <th>이름</th> <th>주소</th></tr>";
        members.forEach((mem) => {
          msg += "<tr>";
          msg += `<td>${mem.id}</td><td>${mem.name}</td><td>${mem.addr}</td>`;
          msg += "</tr>";
        });
        msg += "</table>";
        content.innerHTML = msg;
      });
  };
  const registerView = () => {
    let msg = `<form id="form">
  <input type="text" name="id" placeholder="input id" /><br />
  <input type="text" name="pwd" placeholder="input pwd" /><br />
  <input type="text" name="name" placeholder="input name" /><br />
  <input type="text" name="addr" placeholder="input addr" /><br />
  <input type="button" onclick="register()" value="저장" />
</form>`;
    content.innerHTML = msg;
  };
</script>

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

실행 결과

NODE.JS fetch (4)

$(태그명).serializeArray() : 해당하는 태그에 name을 키값으로, 입력한 값을 밸류값으로 만들어주는 역할

JSON.stringify(데이터) : 해당하는 data를 JSON형식으로 변환

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());
app.post("/register", (req, res) => {
  console.log("req.body : ", req.body);
  members = members.concat(req.body);
  res.json(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.listen(3000, () => console.log("3000 실행 ..."));

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script>
  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산골짜기" },
  ];
  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 getMembers = () => {
    fetch("/get_members")
      .then((res) => res.json())
      .then((m) => {
        let msg = "<table border='1'>";
        msg += "<tr><th>아이디</th> <th>이름</th> <th>주소</th></tr>";
        members.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 register = () => {
    const arr = $("#form").serializeArray(); // 해당하는 태그에 name을 키값으로, 입력한 값을 밸류값으로 만들어주는 역할
    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), // 해당하는 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" placeholder="input id" /><br />
  <input type="text" name="pwd" placeholder="input pwd" /><br />
  <input type="text" name="name" placeholder="input name" /><br />
  <input type="text" name="addr" placeholder="input addr" /><br />
  <input type="button" onclick="register()" value="저장" />
</form>`;
    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}<br>
                <span style=cursor:pointer; onclick="getMembers()">
                    목록으로 이동</span>`;
      });
  };
</script>

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

실행 결과

NODE.JS fetch (5)

addEventListner() : 괄호안에 함수를 넣어 줄 때 시작할 때 뜨지 않게 하려면 함수 뒤 ()를 생략해야한다

* 위 내용은 window.onload안에 있을 때 일이다

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());
app.post("/register", (req, res) => {
  console.log("req.body : ", req.body);
  members = members.concat(req.body);
  res.json(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("3000 실행 ..."));

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script>
  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산골짜기" },
  ];
  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 getMembers = () => {
    fetch("/get_members")
      .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 register = () => {
    const arr = $("#form").serializeArray(); // 해당하는 태그에 name을 키값으로, 입력한 값을 밸류값으로 만들어주는 역할
    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), // 해당하는 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 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();
    }
  };

  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}<br>
                <span style=cursor:pointer; onclick="getMembers()">
                    목록으로 이동</span>
                    &nbsp; / &nbsp;
                    <span style=cursor:pointer; onclick="modify_form('${id}')">
                    수정</span>
                    &nbsp; / &nbsp;
                    <span style=cursor:pointer; onclick="deleteM('${id}')">
                    삭제</span>`;
      });
  };
</script>

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

실행 결과

'node.js' 카테고리의 다른 글

NODE.JS 활용 (7) (0)	2024.04.08
NODE.JS 활용 (6) (0)	2024.04.05
NODE.JS 활용 (4) (0)	2024.04.02
NODE.JS 활용 (3) (0)	2024.04.01
NODE.JS 활용 (2) (0)	2024.04.01

개발 필기장

NODE.JS 활용 (5)

NODE.JS 암호화

NODE.JS fetch

NODE.JS fetch (2)

NODE.JS fetch (3)

NODE.JS fetch (4)

NODE.JS fetch (5)

'node.js' 카테고리의 다른 글

+ Recent posts

티스토리툴바