[새싹x코딩온] 웹 개발자 부트캠프 과정 8주차 회고 | Cookie 와 Session

1. 들어가며

• 쿠키와 세션에 대해 알아보고 만들어보기

2. Cookie 와 Session

🍪Cookie

웹 브라우저(클라이언트)에 저장되는 키와 값이 들어있는 작은 데이터 파일이다.

이름, 값, 만료일, 경로 등의 정보로 구성되어 있다.

 

보통 페이지에서 팝업창 하루동안 보지 않기, 자동 로그인하기, 연령 제한 등등에 사용한다.

(쿠키값이 브라우저에 저장되면 팝업창이 보이지 않는 식으로 작동)

오늘 하루 보지 않기를 설정하기 전에는 쿠키 값이 없어서 팝업창이 뜬다

 

 

오늘 하루 보지 않기를 설정하면 쿠키 값이 저장되면서 만료일 전까지는 팝업창이 다시 뜨지 않음!

 

쿠키는 같은 컴퓨터라도 브라우저마다 저장공간이 다르다.

그래서 크롬 브라우저에서 오늘 하루 보지 않기를 설정했더라도 엣지에 가서는 저장되지 않기때문에 팝업창이 뜬다.

 

Cookie 사용

Node.js 에서 쿠키를 쉽게 사용하기 위해서 cookie-parser라는 모듈을 설치해서 사용한다.

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

// cookie-parser 미들웨어 
// : 요청에 실려온 쿠키를 해석해서 req.cookies 객체로 만듦
// cookieParser(secretKey, optionObj)
// - secretKey: 비밀키
//   - 비밀키의 값를 통해 해당 쿠키가 이 서버가 만든 쿠키임을 검증한다
//   - 쿠키 위조 방지를 위해 비밀키를 통해 만든 서명을 쿠키 뒤에 붙인다.
// - optionObj: 쿠키에 사용되는 옵션
app.use(cookieParser('secretKey');
const cookieConfig = {
    httpOnly: true, 
    // 웹 서버를 통해서만 쿠키에 접근 가능 -> front js에서 document.cookie 로 접근 차단,
    maxAge: 60 * 1000, // 쿠키 수명 (단위: ms)
    // expires: 만료 날짜/시간 지정 가능
    signed: true, // 쿠키의 암호화 (req.signedCookies)
    // secure: 웹 브라우저와 웹 서버가 https 통신하는 경우만 쿠키를 서버에 전송
}

app.get('/', (req, res) => {
    res.render('cookie');
});

// 쿠키 설정
app.get('/setCookie', (req, res) => {
    // res.cookie(키, 값, 옵션)
    // : 쿠키를 설정하는 메서드 =/= 서버가 클라이언트 응답
    res.cookie('myKeyTest', 'myValueTest', cookieConfig);

    // 클라이언트한테 응답!
    res.send('Set signed cookie!');
})

// 쿠키 정보 가져오기
app.get('/getCookie', (req,res)=>{
    // req.signedCookies
    // : cookie-parser가 만든 요청의 쿠키를 보여줌
    res.send(req.signedCookies)
})

// 쿠키 삭제
app.get('/clearCookie', (req, res) => {
    // res.clearCookie(키, 값, 옵션)
    // : 쿠키를 삭제하는 메서드 =/= 서버가 클라이언트 응답
    // : 쿠키를 생성할 때의 키, 값, 옵션이 일치해야 함!! 
    // (단, maxAge/expires 키는 일치할 필요 없음)
    res.clearCookie('myKeyTest', 'myValueTest', cookieConfig);

    res.send('Deleted signed cookie!');
})

위와같이 쿠키에 대한 코드를 작성하고 서버를 실행하면 초반에는 쿠키가 설정되어 있지 않기 때문에

아래 그림과 같이 비어있다.

아래 링크에서 쿠키 설정을 누르면 쿠키가 위의 코드설정한대로 만들어진다.

 

아래와 같이 쿠키가 만들어졌다.

값에는 설정한 myValueTest 외에 다른 문자열이 붙어있는데

이것은 secretKey 즉 비밀키를 따로 설정해주고 signed 라는 옵션을 true로 해줬기 때문에 붙어있는 것이다.

그러면 서버가 서명된 쿠키만을 인식해서 받아들인다. 이 과정을 통해 쿠키가 변조되지 않음을 신뢰하고 사용할 수 있다.

 

 

 

쿠키는 브라우저에 저장되고 사용자가 쉽게 볼 수 있기 때문에 서명된 쿠키 설정을 사용하더라도

보안에 취약하다. 

따라서 보안상 민감한 정보(ex.비밀번호, 주민등록번호 등)을 저장하는 데에는 적합하지 않다.

그래서 보통 남에게 탈취되거나 사용자에 의해 조작되어도 문제되지 않을 정보를 저장한다. 

위에서 예시로 말한 팝업창 하루동안 보지 않기, 자동 로그인 설정 등은 보통 true/false로 값을 저장하기 때문에

쿠키로 활용되는 편이다.

 

🎹Session

세션은 브라우저에 저장되는 쿠키와는 달리 웹 서버에 저장된다.

쉽게 말해 웹 서버에 저장되는 쿠키라고 보면 된다.

 

어느 사이트를 이용 할 때, 같은 사이트인데도 페이지마다 로그인을 해야한다면 사이트 이용이 정말 불편할 것이다.

예를 들면 네이버 웹 사이트에서 로그인을 한 상태인데, 웹툰 페이지, 블로그 페에지, 카페 페이지 등.. 페이지를 

이동할 때마다 로그인을 해야한다면?? 정말 불편할 것이다.

이럴 때 세션을 사용해서 사이트에 한 번 로그인하면 유효기간이 끝날 때까지 로그인을 유지시키는 기능을 

구현할 수 있다.

 

유저(클라이언트)가 어느 사이트에 로그인을 하면 그 서버에서 로그인 요청을 확인 후, 세션 아이디를 발급한다.

클라이언트는 이 세션 ID를 가지고 있다가 요청을 보낼때마다(ex.다른 페이지로 이동) 이 세션 ID를 

서버에 같이 전달한다. 서버는 세션 ID를 전달받고 유저의 데이터를 구별한다.

서버는 세션 ID로 정보를 가져와서 클라이언트에 응답한다. 즉, 페이지를 이동할 때마다

다시 로그인해야하는 번거로움 없이 서버와 클라이언트에 저장된 세션 ID로 비교하면서 로그인을 유지해주는 것이다.

 

Session 사용

Node.js 에서 세션을 쉽게 사용하기 위해서 express-session 이라는 모듈을 설치해서 사용한다.

 

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

// express-session 미들웨어 등록
// : 세션 관리
// ex. 로그인 등의 세션을 구현하거나 특정 클라이언트에 대한 데이터 저장할 때 사용
// -> 사용자 별로 req.session 객체 안에 유지
app.use(session({
    secret : 'secretKey', // 필수 옵션, 세션 암호화하는데 사용하는 키
    resave : false, // 세션이 변경되지 않더라도 매번 덮어쓰기로 저장을 할건지 여부 설정 옵션
    saveUninitialized : false, 
    // 세션을 초기값이 지정되지 않은 상태에서도 처음부터 세션을 생성할 건지 여부 설정 옵션
    cookie : { // 세션 쿠키 설정(세션관리할 때 클라이언트로 보내는 쿠키)
        httpOnly : true, // 클라이언트에서 쿠키 확인 X
        secure : false, // http에서 사용가능하도록 true면 https에서만 가능
        maxAge : 60 * 1000 // 단위(ms), expires : 만료기간 설정
    }
})) // 인자로 세션에 대한 설정 객체를 넣음

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

// 세션 설정
// req.session.key = value
app.get('/set', (req, res) => {
    req.session.name = 'banana'
    req.session.age = 10
    res.send('session complete')
});

// 세션 사용
// req.session.key
app.get('/name', (req, res) => {
    res.send({
        id : req.sessionID, // 클라이언트 구분을 위해 session마다 ID부여
        name : req.session.name
    })
});

// 세션 삭제
// req.session.destroy(세션 삭제 시 호출할 콜백함수)
app.get('/destroy', (req, res) => {
    req.session.destroy((err)=>{
        if(err) throw err;
        res.redirect('/name') 
    })
});

위와같이 세션에 대한 코드를 작성하고 서버를 실행하면 초반에는 세션이 설정되어 있지 않기 때문에

아래 그림과 같이 비어있다.

아래 링크에서 세션 설정을 누르면 세션이 위의 코드설정한대로 만들어진다.

아래와 같이 세션이 만들어졌다.

단, 설정한 값이 거의 그대로 보여졌던 쿠키와 다르게 

세션은 뭔가 복잡한 문자열이 보여지고 있다.

 

세션 확인을 해보면 id와 코드에서 설정한 name=banana 값이 들어와있는 것을 확인할 수 있다.

banana라는 값은 저 세션 창에서 보이지 않는다.

그리고 id는 유저마다 다르게 부여된다. 이 세션ID로 서버는 클라이언트 구분을 할 수 있다. 

 

Cookie와 Session 의 차이

세션도 쿠키 기반이기 때문에 동작하는 원리는 유사하다.

그러나 브라우저에 저장되어 서버의 자원을 사용하지 않는 쿠키와 달리

세션은 서버에 저장되기 때문에 서버의 자원을 사용한다.

그래서 서버에 요청이 많아지면 서버의 부하가 심해진다.

명절 기차 티켓팅이나 콘서트 티켓팅을 하다가 튕겨져 나가본 경험이 있다면 이해가 쉬울 것이다.

자리는 한정되어 있는데 들어가려는 사람 즉, 요청이 많기 때문에 서버에 부하가 걸려 그만큼을 수용하지 못한다면..?

그대로 튕겨져 나가게 되는 것이다.

 

또 쿠키는 브라우저 자체에 저장이 되어 있어서 브라우저를 종료해도 저장 기간만 남아있다면 쿠키 정보가 남아있지만

세션은 브라우저를 종료하면 정보가 삭제된다. (그래서 로그아웃하지 않고 브라우저를 종료해도 로그인이 풀린다.)

 

그리고 앞에서 얘기했다시피 쿠키는 브라우저에 저장되어 있기 때문에 세션보다 보안에 취약하다.

대신 속도는 쿠키가 더 빠르다.

 

3. 마치며

웹사이트를 사용한 사람 중에 오늘 하루 보지 않기에 대해 보지 않은 사람은 없을 것이다.

뿐만 아니라 예전에 위스키 웹사이트에 방문한 적이 있었는데 아무래도 주류이다보니 연령제한이 걸려있었다.

일정 나이를 확인한 후 만 19세 이상이면 웹사이트 접근을 허용하는 것이었는데 이런 사이트들에도 쿠키를 사용한다.

웹사이트에서 로그인 유지를 해주지 않는 곳은 거의 없다. 

그러니 쿠키와 세션을 생성하는 법에 잘 연습하고 배워서 앞으로 하게될 프로젝트에 잘 적용할 수 있도록 해야겠다.

쿠키와 세션의 차이에 대해서 은근히 기술면접 질문도 들어온다고 하니 차이점도 잘 숙지해야겠다.

 

4. Reference

1. 코딩온 강의 교안 및 실습

 

 

2.

https://hongong.hanbit.co.kr/%EC%99%84%EB%B2%BD-%EC%A0%95%EB%A6%AC-%EC%BF%A0%ED%82%A4-%EC%84%B8%EC%85%98-%ED%86%A0%ED%81%B0-%EC%BA%90%EC%8B%9C-%EA%B7%B8%EB%A6%AC%EA%B3%A0-cdn/

완벽 정리! 쿠키, 세션, 토큰, 캐시 그리고 CDN

 

3. https://github.com/devSquad-study/2023-CS-Study/blob/main/Network/network_cookie_and_session.md

2023-CS-Study/Network/network_cookie_and_session.md at main · devSquad-study/2023-CS-Study