쿠키 (Cookie)

쿠키는 클라이언트 측에서 웹 사이트를 방문할 때, 브라우저에 저장되는 정보를 말한다. 서버에서 클라이언트에 응답할 때 쿠키를 전달하고 이후 방문할 때마다 브라우저는 쿠키를 함께 전송한다.

사용자 로그인 정보나 개인화된 서비스 등을 저장하는 것에 용이하고 사용자가 브라우저에서 삭제하기 전까지 유지된다.

간단한 예시

const cookieParser = require('cookie-parser');

app.use(cookieParser());

app.get('/', (req, res) => {
	res.cookie('username', 'yulgok');
    res.send('쿠키 생성');
});

app.get('/username', (req, res) => {
	const username = req.cookie.username;
    
    if(username) {
    	req.send(`현재 유저: ${username}`);
    } else {
    	res.status(404).send('No username');
    }
});

cookie-parser 이라는 패키지를 설치해야 한다.(필수는 아님)

위의 코드는 쿠키를 생성하고 값을 가져오는 코드다. 위의 get() 메서드에서는 / 페이지에 들어올 경우 username이라는 이름의 쿠키를 생성하고 yulgok이라는 값을 넣었다.

다음의 get() 메서드에서는 /username 페이지에 들어오면 쿠키에서 값을 가져온다. 만약 값이 있을 경우에는 페이지에 yulgok이라는 값이 나온다.

세션 (Session)

서버와 클라이언트 간의 연결을 유지하고, 상태 정보를 저장하는 기술이다. 클라이언트가 서버에 요청하면 서버는 클라이언트에 고유한 세션ID를 부여한다. 이후 요청할 때마다 세션ID를 이용하여 상태 정보를 유지한다.

서버 측에서 세션 정보를 관리하고 브라우저 종료 시, 세션 정보는 사라진다.

설명

세션은 express-session 패키지를 설치해주어야 한다.

const session = require('express-session');

app.use(session({
	secret: 'my secret',
    resave: false,
    saveUninitialized: true,
    cookie: { secure: true }
}));

세션을 활용하려면 미들웨어를 다음과 같이 설정해주어야 한다. 각 필드는

• secret : 세션ID 암호화 부분이다. 실무에서는 암호화 된 값을 넣는다.
• resave : 변경이 없어도 저장할 지의 여부다. 일반적으로 false
• saveUninitialized : 세션 데이터가 없더라도 저장할 지를 묻는 것이다. 일반적으로 true
• cookie : 세션 쿠기 설정이다. secure을 설정할 경우, HTTP 프로토콜 사용할 경우만 세션 쿠키를 전송한다.

예시

app.get('/', (req, res) => {
	const isLoggedIn = req.session.isLoggedIn;
    const username = req.session.username;
    
    if(isLoggedIn) {
    	res.send('Good!');
    } else {
    	res.send('please Login');
    }
});

app.post('/login', (req, res) => {
	const username = req.body.username;
    const password = req.body.password;
    
    const isAuthenticated = authenticateUser(username, password);
    
    if(isAuthenticated) {
    	req.session.isLoggedIn = true;
        req.session.username = username;
        res.redirect('/');
    } else {
    	res.send('Invaild');
    }
});

app.get('/logout', (req, res) => {
	req.session.destroy();
});

위의 코드는 간단하게 로그인, 로그아웃에 대한 코드를 적었다. 가장 위의 get() 메서드는 / 페이지에 접근할 경우 세션에서 로그인 여부를 판단한다. 로그인이 되어 있으면 Good을 아니면 로그인을 해달라는 문구가 나온다.

post() 메서드에서는 로그인을 담당한다. authenticateUser() 가상함수를 통해 username과 password의 값이 타당한지 확인하고 boolean을 반환한다. true일 경우에는 세션에 값을 넣고 / 페이지로 redirect한다.

마지막 get() 메서드는 로그아웃을 담당한다. destroy() 메서드로 세션을 삭제한다.

정리하기

이번에는 쿠키와 세션에 대해 공부했다. 웹 개발을 하면서 중요한 부분이기 때문에 공부하고 정리를 해 보았다. 인증과 인가, 권한 등에 있어서 자주 쓰이기 때문에 확실하게 이해해야 한다.

쿠키는 클라이언트, 세션은 서버라는 큰 틀을 잡고 세세하게 이해해나갈 필요가 있다.