로그인세션_body-parser, ejs파일

Node

로그인세션_body-parser, ejs파일

wintertreey 2024. 8. 13. 14:11

c:\work2\node_ex>mkdir login-session

cd login-session

>npm init -y

>npm i express

>npm i ejs

>npm i --save-dev nodemon

>npm i express-session

>npm i body-parser

body-parser

먼저 Parser는 무엇을 의미하는가?

가지고 있는 데이터를 내가 원하는 형태의 데이터로 ‘가공'하는 과정을 parsing 이라 하며 그 과정을 수행하는 모듈 혹은 메소드를 parser 라 일컫는다.

단순히 말하자면 내가 모르는 언어를 내가 원하는 언어의 구조로 바꿔주는 일종의 구문 해석기라고 말할 수도 있다.

여기서 기억해야 할 것은 parser는 구문 해석을 할 뿐 번역을 하진 않는다. 번역의 역할은 compiler에서 담당한다.

내가 원하는 형식에 맞춰 해석하는 용도이므로 bodyParser 뿐만 아니라 cookieParser, JSON.parse, JSON.stringify ..등 파서의 종류는 셀 수 없이 많다.

예를 들어 외국어를 번역할 때 어떤 언어인지 정하고 해당 언어에 맞게 구문을 해석해주는 것을 parser, 그에 따라 실제 번역하는 것을 compiler라고 할 수 있다.

파싱을 하지 않는다는 것은 구글 번역기에 프랑스어를 선택하고 한국어를 쓴 후에 영어로 번역하라는 것과 같으니 필요한 상황에서는 그에 맞는 파싱을 해주어야 한다.

그렇다면 bodyParser는 무엇을 파싱하는가?

express 문서에 따르면 미들웨어 없이req.body 에 접근하는 경우에는 기본으로undefined 가 설정되어 있으므로 bodyParser, multer와 같은 미들웨어를 사용하여 요청 데이터 값에 접근해야 한다는 안내를 찾을 수 있다.
클라이언트 측에서 API post 와 put 메소드로 요청시 (get delete 는 불가하다. 링크 참고) body 를 포함하여 보낼 수 있는데 이 값을 서버 측에서 받는다고 그대로 사용할 수 있는 것이 아니고 서버 내에서 해석 가능한 형태로 변형해야 사용할 수 있게 되는 것이다.
이때 API 요청에서 받은 body 값을 파싱하는 역할을 수행하는 것이 bodyParser 라는 미들웨어이다.

메인파일 server.mjs

import express from 'express';
import session from 'express-session'; //세선모듈
import bodyParser from 'body-parser'; // 요청 본문 파싱용
import path from 'path'; //경로조장
import { fileURLToPath } from 'url'; //url을 파일경로로 변환

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const app = express();
const PORT = 3000;

//bodyParser.urlencoded() 미들웨어 설정. 주로 전송된 폼데이터를 파싱
app.use(bodyParser.urlencoded({extended:true})) //데이터 파싱방법결정

//session 미들웨어 설정
app.use(session({
    secret:'secret-key', //세션암호화를위한 비밀키 설정
    resave:false, //세션이 수정되지 않은 경우에도 세션을 다시 설정유무.
    saveUninitialized:true, //초기화된 않은 저장 여부
    cookie:{maxAge:30 *60 *1000} //30분. 세션유효시간
}));

app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

라우팅

const auth = {
    id:'kor',
    password:'111'
};

app.get('/', (req, res) => { //root로 접속하면
    res.sendFile(path.join(__dirname, 'login.html')); //로그인 페이지 호출

});

app.post('/login', (req, res) => { //root로 접속하면
    const {id, password} =req.body;

    if(id === auth.id && password === auth.password){
        req.session.user = id; //세션에 사용자 id를 저장
        res.redirect('/main'); //로그인 성공시 메인 페이지로 리다이렉션
    }else{
        res.send('로그인 실패 <a href='/'>다시 시도</a>');
    }
});

app.get('/main', (req, res) => {
    //사용자가 로그인 한 경우에 main.ejs파일을 호출
    if(req.session.user) {
        res.render('main', {sessionID:req.sessionID})
    }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'); //sid: 세션아이디. 세션쿠키도 삭제.
    res.redirect('/');

});

app.listen(PORT, () => {
    console.log(`http://localhost:${PORT}로 서비스 시작~~`);
})

ejs파일이란?

EJS (Embedded JavaScript) 파일은 서버 사이드 템플릿 엔진으로, JavaScript와 HTML을 함께 사용할 수 있게 해주는 파일 형식입니다. EJS는 동적인 웹 페이지를 생성하기 위해 사용됩니다. EJS 파일의 확장자는 일반적으로 .ejs입니다.

EJS의 주요 특징

템플릿 엔진: EJS는 서버에서 HTML 페이지를 동적으로 생성할 수 있는 템플릿 엔진입니다. HTML 템플릿 내에 JavaScript 코드를 포함시켜 페이지를 생성합니다.
JavaScript 포함: HTML과 JavaScript 코드가 결합된 형태로, JavaScript 변수, 루프, 조건문 등을 사용하여 동적으로 HTML 콘텐츠를 생성할 수 있습니다.
서버 사이드 렌더링: EJS는 서버에서 템플릿을 렌더링하고 최종 HTML을 클라이언트에게 전송합니다. 클라이언트는 서버에서 전송된 최종 HTML을 받습니다.
간단한 문법: EJS는 직관적인 문법을 가지고 있어 배우기 쉽습니다. JavaScript 코드 블록을 <% %> 태그로 감싸서 HTML 내에서 사용할 수 있습니다.

기본 문법

변수 출력: <%= variable %>
변수를 HTML에 출력합니다. 예: <%= user.name %>
JavaScript 코드: <% code %>
JavaScript 코드를 실행하지만, 출력은 하지 않습니다. 예: <% if (user.isAdmin) { %> <p>Admin</p> <% } %>
주석: <%# comment %>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>
    <p>로그인 성공! 세션 ID : <%= sessionID %></p>
    <form action="/logout" method="get">
        <button type="submit">로그아웃</button>
    </form>
</body>
</html>

출력용 화면

<body>
    <h2>로그인</h2>
    <form action="/login" method="post">
        <div>
            id : <input type="text" name="id" id="id" required>
        </div>
        <div>
            password : <input type="text" name="password" id="password" required>
        </div>
        <button type="submit">로그인</button>

    </form>
</body>

https://velog.io/@yejinh/express-%EB%AF%B8%EB%93%A4%EC%9B%A8%EC%96%B4-bodyParser-%EB%AA%A8%EB%93%88

express 미들웨어 body-parser 모듈

서버 공부를 시작하며 요청에 대한 응답을 주는 과제를 하는 중에 node.js 의 모듈 bodyParser의 존재를 알게 되었다. bodyParser 모듈 없이는 post, put 요청 메소드의 request.body를 읽어올 수 없어 일단 사

velog.io