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>
/
<span style=cursor:pointer; onclick="modify_form('${id}')">
수정</span>
/
<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>
실행 결과
