241206 에이콘 아카데미 수업에 기반하여 작성되었음을 알립니다.
노드 실습 (세션)
환경 설정
mkdir project06
npm init -y
npm i express
npm i nodemon
npm i express-session
npm i body-parser
server.mjs
import express from "express";
import session from "express-session";
import bodyParser from "body-parser";
import path from "path";
import { fileURLToPath } from "url";
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const app = express();
// app.use(bodyParser.json()) // 요청을 JSON으로 파싱
// app.use(bodyParser.urlencoded({extended: false}))
app.use(express.urlencoded({extended: false})); // 위의 코드를 한번에 써준 것
app.use(
session({
secret: "secret-key", // 세션 암호화를 위한 비밀키 설정
resave: false, // 세션이 수정되지 않았다면 저장을 할지 말지 정함
saveUninitialized: true, // 초기화되지 않은 세션에 대한 저장 여부 결정
cookie: { maxAge: 30 * 60 * 1000 }, // 세션 유효기간 설정, 설정해주지 않으면 기본 30분
})
);
app.set("view engine", "ejs"); // ejs를 템플릿 엔진으로 설정 (자바의 경우 jsp와 같다.)
app.set("views", path.join(__dirname, "views"));
const auth = {
id: "yyummmmmmmm",
password: "1111",
};
app.get("/", (req, res) => {
res.sendFile(path.join(__dirname, "login.html"));
});
app.post("/login", (req, res) => {
const { id, password } = req.body;
if (id === auth.id && password === auth.password) {
req.session.user = id; // session에 사용자 id를 저장
res.redirect("/main");
} else {
res.send('로그인 실패 <a href="/">다시!</a>');
}
});
app.get("/main", (req, res) => {
if (req.session.user) {
res.render("main", { sessionID: req.sessionID }); // 로그인 성공시 sessionID를 가지고 main.ejs 호출
} else {
res.send('접근 권한 없어 <a href="/">다시!</a>');
}
});
app.get("/logout", (req, res) => {
req.session.destroy((err) => {
if (err) {
return res.redirect("/main");
}
res.clearCookie("connect.sid"); // 세션을 저장했던 쿠키 삭제
res.redirect("/");
});
});
app.set("port", process.env.PORT || 3000);
app.listen(app.get("port"), () => {
console.log(app.get("port"), "번 포트에서 웹 서버 서비스 시작!");
});💡 Body-parser
body-parser는 Node.JS의 모듈 중 하나로, 클라이언트가 보내는 Request Data의 Body로부터 파라미터를 편리하게 추출 할 수 있다.
app.use(bodyParser.json()) // 요청을 JSON으로 파싱
app.use(bodyParser.urlencoded({extended: false}))
🔽
app.use(express.json()); // 위의 코드를 한번에 써준 것
출처 : https://pinomaker.com/89
💡 node.js의 template engine (ejs)
ejs : https://github.com/visionmedia/ejs <- JSP와 유사한 형태로 구성되어 있다.
EJS (Embedded JavaScript Templates)는 Node.js에서 사용되는 템플릿 엔진으로, HTML 파일 내에서 JavaScript 코드를 삽입하여 동적인 웹 페이지를 생성할 수 있다. 주로 Express와 함께 사용된다.
주요 특징 - 템플릿 엔진: HTML과 JavaScript를 혼합하여 동적인 콘텐츠를 생성. - 간단한 문법: <% %> 및 <%= %>와 같은 태그를 사용. - 빠른 렌더링: 빠르고 경량화된 엔진. - 서버 사이드 렌더링: 서버에서 데이터를 HTML로 렌더링하여 클라이언트에 전달.
설치 : npm install ejs
출처 : https://cafe.daum.net/flowlife/RM66/12
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>로그인</h2>
<form action="/login" method="post">
ID : <input type="text" name="id" />
PW : <input type="password" name="password" />
<button type="submit">로그인</button>
</form>
</body>
</html>
로그인 화면
로그인 실패
main.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>로그인 성공 후 메인 페이지</h2>
<p>세션 ID : <%= sessionID %></p>
<form action="/logout" method="get">
<button type="submit">로그아웃</button>
</form>
</body>
</html>
로그인 성공
'Study > Acorn' 카테고리의 다른 글
| 241210 노드 (RESTful DB 연동) (0) | 2024.12.10 |
|---|---|
| 241209 노드 (RESTful) (0) | 2024.12.09 |
| 241205 노드 (get/post, 쿠키) (0) | 2024.12.05 |
| 241204 노드 (웹서버 구축, npm, expess, 라우팅, express 라우팅) (0) | 2024.12.04 |
| 241203 노드 (이벤트 처리, DB 연결) (0) | 2024.12.03 |