Node.js와 MySQL연동해보기(2)

세션을 저장하고 사용하기 위한 두가지 모듈

저번 글에서는 사용 했던 모듈은 mysql, express, ejs, body-parser이 4가지 였습니다.

 

추가

• npm install express-session

  - Node.js 및 Express 프레임워크 기반의 웹 애플리케이션에서 세션 관리를 위한 미들웨어입니다.

  - Express 애플리케이션에서 세션을 쉽게 구현할 수 잇게 해줍니다.

  - 사용자의 상태를 유지하고 다양한 인증 및 권한 부여 기능을 구현하는데 도움이 됩니다.

• npm isntall session-file-store

  - Node.js 프로젝트에서 세션 데이터를 파일 시스템에 저장하는 데 사용합니다. 

  - 세션 데이터를 영구적으로 저장하고 관리할 수 있도록 도와줍니다.

 

모듈을 다 추가하였다면

 

위와 같이 모듈들과 세션, package들이 생기는 걸 볼수가 있습니다.

 

위 모듈들을 추가로 사용하여 mysql과 함께 연동되는 페이지를 만들어 보겠습니다.

 

우선 모듈화 된 세션을 사용하기 위해 미들웨어 등록을 해야합니다. 

 app.use(session({
     secret: '---',	// 원하는 문자 입력
     resave: false, 
     saveUninitialized: true, 
     store: new FileStore(),
 }))

• secret

  - 세션 데이터를 서명하기 위한 비밀키

  - 랜덤하고 안전한 문자열로 설정하는 것이 좋습니다.

• resave: false

  - resave를 false로 설정하면 세션이 변경되지 않은 경우에도 세션을 저장합니다.

  - express-session은 변경된 부분만 저장하는 것이 기본동작이지만 false로 설정하여 항상 저장되도록 설정할수 있습니다.

  - 기본값은 true

• saveUninitialized: true

  - saveUninitialized를 true로 설정하면 초기화 되지 않은 세션도 저장됩니다.

  - 예를 들어 사용자가 로그인을 하지 않은 경우에도 세션을 자동으로 초기화 하고 저장하도록 하는 옵션입니다.

    * 로그인을 하지 않은 사용자에게도 세션을 할당하고 초기화 하면 사용자 추적 및 경험 개선에  도움이 됩니다.

    * 세션이 초기화 되지 않은 상태에서 세션 식별자를 부여하면 다른 상호작용을 할 때에도 세션을 더 쉽게 관리 할수 있습니다.

• store: new FileStore()

  - 세션 데이터를 저장할 곳을 지정합니다. 위에서는 session-file-store를 사용하여 파일 시스템을 저장하도록 설정하였습니다.

 

데이터 베이스 연동

// sql 연결 설정
var mysql = require('mysql');
var pool = mysql.createPool({
    connectionLimit: 10,
    host: 'localhost',
    user: 'coriny',
    password: '1234',
    database: 'memberinfo'
});

이전과 마찬가지로 설정을 해주었습니다.

 

 

로그인 페이지

app.post('/login', (req, res) => {
    const id = req.body.id;
    const password = req.body.password;

    pool.getConnection(function (err, connection) {
        if (err) throw err;

        const sql = 'SELECT * FROM memberinfo WHERE id = ? AND password = ?';
        connection.query(sql, [id, password], function (error, results, fields) {
            if (error) {
                console.error('Error executing query:', error);
                res.status(500).json({ error: 'Internal Server Error' });
                return;
            }

            // 세션 닉네임 세션에 대입
            req.session.id = id;
            console.log('Session after login:', req.session); // 세션 확인

            connection.release();
            res.redirect(`/main`);

        });
    });
});

데이터가 들어간 것을 확인을 했으니 로그인 페이지에서 로그인에 사용한 id를 가져와서 메인페이지에 띄우기 위해

세션에 사용한 아이디를 저장하고 메인페이지로 리다이렉트를 해주었습니다.

// 메인페이지
app.get('/mainpage', (req, res) => {
    // 메인페이지에서 세션 사용
    console.log('Session in mainpage:', req.session);
    var html = `
        <h2>메인 페이지에 오신 것을 환영합니다</h2>
        <p>${req.session.id}님 로그인에 성공하셨습니다.</p>
    `;
    res.send(html);
});

제가 저장하고자 하는 로그의 id가 아니였습니다.

저 출처 모를 문자열은 어떤것인지 하고 찾아봤습니다.

F12의 네트워크를들어가서 찾아보니 쿠키의 value에 출처모를 문자열이 섞여있었습니다. 

req.session.id는 세션의 아이디를 불러오는것이라는 걸 알게 되었습니다.

 

그 다음 

req.session.nickname = id;

위와 같이 로그인 페이지와 메인페이지에 수정을 한뒤 재 실행 하였습니다.

값을 찾지 못하는 undefined가 나왔습니다.

세션명도 같고 연결되게 했는데 왜 안되지 생각을 하고 console에 정보가 띄어지게 했습니다.

로그인 화면에서는 세션이 저장이 되어있는데

메인페이지를 실행시켜주는 라우터에는 세션에 저장된 nickname값이 없었습니다.

 

그렇게 저장된 값이 넘어가지 않은걸 알고 세션데이터를 저장해 주었습니다.

            //닉네임으로 대입한 세션 저장해서 리다이렉트
            req.session.save(function () {
                connection.release();
                res.redirect(`/mainpage`);
            });

• req.session.save()

  - 서로 다른 라우터에서 세션데이터를 수정한 후 명시적으로 세션을 저장하고자 할 때 유용합니다. 

  - 각 라우터가 세션 데이터를 안전하게 저장할수 있게 됩니다.

세션을 저장해 주니 id명도 떳으며

세션데이터도 잘 넘어간걸 확인할 수 가 있었습니다.

 

 

회원가입

// 회원가입
app.post('/addmember', (req, res) => {
    const id = req.body.id;
    const name = req.body.name;
    const email = req.body.email;
    const password = req.body.password;

    const memberinfo_insert = {
        id: `${id}`,
        name: `${name}`,
        email: `${email}`,
        password: `${password}`
    }

    console.log(memberinfo_insert);

    pool.getConnection((err, connection) => {
        if (err) throw err;

        connection.query('INSERT INTO memberinfo SET ?', memberinfo_insert, (error, results, fields) => {
            connection.release();

            if (error) {
                console.error(error);
                res.status(500).json({ error: '데이터 삽입 실패' });
                return;
            }
            // 데이터 삽입 성공 시 클라이언트 측에서 리디렉션을 수행
            res.redirect(`/login`);
        });
    });
});

회원 데이터를 삽입후 로그인 페이지로 이동할 수 있게 redirect를 해주었고 데이터가 들어간걸 확인 할수 있었습니다.

 

---

 

이를 실제 프로젝트에 적용 시켜 보았습니다.

해당 모듈을 다운받아서 폴더 생성을 했고 위 코드들을 적용시켰습니다 .

로그인상태를 인지하기 위해서 is_logon이라는 변수가 true이면 로그인 상태 아니면 로그인이 아닌상태를 표시하게 하였습니다. 

req.session.is_logon = true;

로그인라우터에서  true로 설정해서 세션데이터에 저장하고  main페이지에서 받아

// 메인페이지
app.get('/main', (req, res) => {
    console.log('Session in mainpage:', req.session);
        // is_logon 및 nickname 설정
        const is_logon = req.session.nickname ? true : false;
        const nickname = req.session.nickname || '';

    res.render('main',{ is_logon, nickname });
});

전달받은 값으로 랜더링할 때 같이 보내주면

is_logon값이 false이면 로그인,회원가입 버튼이 나오고 , true이면 로그인 id문구와 로그아웃 버튼이 뜨도록 하였습니다 

템플릿 엔진 문법<% %>,<%= %> EJS(Effective JavaScript)를 사용하여 조건문을 주었습니다.

 

 

그렇게 회원가입과 로그인이 다 되었는데 경로에 맞게 설정된 이미지 파일들이 읽히지 않았습니다.

현재 프로젝트의 이미지 파일위치는 정해져 있고 변동될 일이 없기 때문에

정적 파일을 제공하는 미들웨어를 추가한뒤 경로를 지정해주어

해당 폴더의 위치에 있는 이미지들을 사용할수 있도록 하였습니다. 

사진이 나오지 않는 에러

// 정적 파일을 제공하는 미들웨어 추가
app.use(express.static('public'));

public에는 해당 경로를 지정해 주어야 합니다.

 

그렇게

로그인 기능이 되는 방명록들을 작성할수 있는 페이지를 만들게 되었습니다.

완성 코드는 startcoriny/i_five_project  를 참고해 주세요!

GitHub - startcoriny/I-FIVE_project

 

 

보통 한 서버에 한가지의 데이터베이스만 사용한다고 하는데 저희는 공부의 목적으로써 파이어 베이스와 mysql을 사용하여 페이지를 만들었습니다.

 

앞으로 생각하면서 해야할 습관.

1. 활용할 기술들을 왜 사용했는지.

2. 데이터베이스같은 경우도 두가지를 사용 했다면 왜 두가지를 사용했는지.

 

위와 같은 것들을 항상 생각하면서 프로젝트를 만들고 이유를 찾아가면서 해야겠다는걸 알았습니다.

 

 

 

 

 

배워나가는 코린이 입니다!!

부족한게 있다면 댓글로 지적해주세요!! 감사합니다!😊