1. 실습 내용
- 이번 실습에서는 Node.js의 Express 프레임워크를 이용하여 세션(session)을 활용한 로그인 및 로그아웃 기능을 구현
- 세션을 통해 사용자의 로그인 상태를 관리하며, 일정 시간이 지나면 자동으로 세션이 만료되도록 설정하는 기능을 학습
2. 실습 결과
- 사용자 로그인 여부에 따라 페이지에 다른 메시지를 출력.
- 로그인 시 세션을 생성하여 상태를 유지.
- 로그아웃 시 세션을 삭제하여 상태 해제.
- UI는 EJS 템플릿 엔진을 활용하여 구현.
- Bootstrap을 이용한 간단한 네비게이션 바 추가.
3. 사용한 코드 및 기능 설명
3.1 app.js
- 기능: 서버 초기화, EJS 설정, 정적 파일 제공, 페이지 렌더링, 로그인/로그아웃 처리 준비.
const express = require("express");
const app = express();
const PORT = 8080;
app.set("view engine", "ejs");
app.use("/static", express.static(__dirname + "/static"));
// 세션 설정, 10분 뒤 세션 종료하도록
// 홈 페이지 렌더링
app.get("/", (req, res) => {
res.render("index"); // 홈 화면 렌더링
});
// 로그인 페이지 렌더링
app.get("/login", (req, res) => {
res.render("login"); // 로그인 화면 렌더링
});
const userInfo = {
userId: "cocoa",
userPw: "1234",
};
// 로그인 요청 처리
app.post("/login", (req, res) => {
// 로그인 로직 (세션 추가 예정)
});
// 로그아웃 요청 처리
app.get("/logout", (req, res) => {
// 로그아웃 로직 (세션 삭제 예정)
});
// 서버 실행
app.listen(PORT, () => {
console.log(`http://localhost:${PORT}`);
});3.2 index.ejs
- 기능: 홈 화면 구성 및 로그인 여부에 따른 메시지 표시.
<!DOCTYPE html>
<html lang="ko">
<head>
<%- include('include', {title: 'Home'}) %>
</head>
<body>
<%- include('header') %>
<h1>실습. Session 연습</h1>
<p>여기는 Home 입니다! 🏡</p>
<%# if (로그인 되었다면) { %>
<p>~~~ 님 환영합니다 🙌🏻</p>
<%# } else { %>
<p>로그인을 아직 하지 않으셨군요! 로그인을 진행해보세요!</p>
<%# } %>
</body>
</html>3.3 login.ejs
- 기능: 로그인 폼 제공 및 로그인 요청 전송.
<!DOCTYPE html>
<html lang="ko">
<head>
<%- include('include', {title: 'Login'}) %>
<link rel="stylesheet" href="/static/login.css" />
</head>
<body>
<div class="login-box">
<h1>로그인</h1>
<p>
참고! 정답 아이디는 <b>cocoa</b> 이고<br />
비밀번호는 <b>1234</b> 입니다.
</p>
<!-- 로그인 폼 -->
<form action="/login" method="POST">
<div class="input-group mb-3">
<span class="input-group-text" id="id">ID</span>
<input type="text" class="form-control" name="id" />
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="pw">PW</span>
<input type="password" class="form-control" name="pw" />
</div>
<button type="submit" class="btn btn-dark">Login</button>
<br />
<a href="/">Home 이동하기</a>
</form>
</div>
</body>
</html>3.4 header.ejs
- 기능: 네비게이션 바 생성 및 로그인 상태에 따라 메뉴 항목 변경.
<nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Codingon</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#myHeader">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="myHeader">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" href="#">Menu1</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Menu2</a>
</li>
<%#if (로그인 되었다면) { %>
<li class="nav-item">
<a class="nav-link active" href="/logout">Logout</a>
</li>
<%# } else { %>
<li class="nav-item">
<a class="nav-link active" href="/login">Login</a>
</li>
<%# } %>
</ul>
</div>
</div>
</nav>4. 결론
- 기본적인 세션 관리 개념과 사용법 중점으로 실습
- Express 프레임워크를 사용하여 세션 기반 로그인 상태를 유지하거나 종료하는 기능을 구현
Name : 최윤석(YoonSuk Choi)