[Web] 쿠키, 세션 자세히 알아보기, 구현하기

[Web] 쿠키, 세션 자세히 알아보기, 구현하기

 

출처 : https://ji5485.github.io/post/2020-08-01/what-is-cookie-and-session/

 

스프링 시큐리티를 활용해서 프로젝트를 진행하고, 웹 서버 수업을 들으면서 최초의 로그인 기능을 알아보는 수업을 듣는 중이다. 예전에 교양 수준 정도로 쿠키와 세션을 정리해본 적은 있지만, 그때 당시에는 웹 서버가 무엇인지, 심지어 프로젝트 파일이 무엇인지도 자세히 몰랐기 때문에 그 '개념'과 비유적 표현 정도를 이해하는 정도였다. 이제는 실전에서 쿠키와 세션을 활용할 수 있을 정도로 파악해야 할 때가 왔다.

 

이전에 포스팅 한 것은 다음과 같다.

2022.07.02 - [IT 지식/Web] - [Web] 쿠키(cookie), 세션(session) 캐시(cache)의 정의

[Web] 쿠키(cookie), 세션(session) 캐시(cache)의 정의

 

이번에는 쿠키와 세션 개념을 조금 더 깊이 활용할 수 있을 정도로 알아볼 것이다. 이전 포스팅의 업그레이드 버전이라고 해야 하나...

 

 

1. 웹에서 쿠키와 세션의 필요성

 

간단하게 웹이 왜 생겼는지부터 알아야 한다. 웹은 옛날 옛적... 모니터와 본체가 붙어있던 시절... 플로피 디스크(1.44mb)에 바이러스가 감염이 되지 않도록 쿠킹 호일로 싸다니던 시절.. 에! 내 컴퓨터가 아닌 다른 컴퓨터에 있는 문서를 보고 싶은 열망에 의해 생겨났다.

 

http://192.111.131.131:80/girlgroup

 

이런 식으로 url을 입력하면, 사생팬이 컴퓨터에 올린 사진 파일을 볼 수 있었다(조상님들은 이 다운로드를 전화선 통신을 이용해 하루 정도를 다운로드 받았다고 한다). 아무튼, 웹은 다른 사람의 컴퓨터에서 문서와 리소스를 다운로드 받아와서 내 컴퓨터에서 보여주는 역할을 한 것이다. 단순히 문서를 편하게 보고 싶은 욕망에서 웹이 생겨난 것이다.

 

그런데 사람들의 욕망은 끝이 없다. 문서를 오픈하다 보니, 너나 나나 나의 프라이버시를 침해하는 것 같다는 생각이 들어서, 한정된 사람에게만 보여주고 싶다는 생각이 든 것이다. 그래서, 사람들을 구별해야 했다.

 

그런데 웹의 특성 중 '무상태성'은 구별은 고사하고 누가 접속했는지 기억도 못하는 상황을 만든다. 한 번 접속하고 문서를 반환하고 연결이 끊기는 무상태성은 누가 누구인지를 구별하는 것을 '기억'하고자 하는 것에 큰 걸림돌이 된 것이다.

 

그래서, 누가 누구인지를 기억하기 위해 쿠키와 세션이 등장한 것이다.

 

 

 

2. 쿠키의 개념

 

1) 쿠키란?

 

- 클라이언트(브라우저) 로컬에 저장되는 '키와 값'이 들어있는 데이터 파일이다.

- 사용자 인증이 유효한 시간을 명시할 수 있으며, 유효 시간이 정해지면 브라우저가 종료되어도 인증이 유지된다.

- 쿠키는 클라이언트의 상태 정보를 로컬에 저장했다가 참조한다.

- 클라이언트에 300개까지 쿠키저장 가능하고 하나의 도메인당 20개의 값만 가질 수 있다. 하나의 쿠키값은 4KB까지 저장한다.

- Response Header에 Set-Cookie 속성을 사용하면 클라이언트에 쿠키를 만들 수 있다.

- 쿠키는 사용자가 따로 요청하지 않아도 브라우저가 Request시에 Request Header를 넣어서 자동으로 서버에 전송한다.

 

 

2) 쿠키의 구성 요소

이름 : 각각의 쿠키를 구별하는 데 사용되는 이름
값 : 쿠키의 이름과 관련된 값
유효시간 : 쿠키의 유지시간
도메인 : 쿠키를 전송할 도메인
경로 : 쿠키를 전송할 요청 경로

 

3) 쿠키의 동작방식

 

 

 

4) 쿠키의 사용 예

 

- 네이버와 같은 페이지 로그인 시, "아이디와 비밀번호를 저장하시겠습니까?"라는 문구가 뜰 때, 저장을 하면 쿠키를 보관한다.

- 어떤 페이지에서 광고, 공지글이 올라올 때, "오늘 더 이상 이 창을 보지 않음" 체크

 

 

 

3. 세션의 개념

 

1) 세션이란?

 

- 세션은 쿠키에 기반한다. 사용자 정보 파일을 브라우저에 저장하는 쿠키와 달리 세션은 서버 측에서 관리한다.

- 서버에서는 클라이언트를 구분하기 위해 세션 ID를 부여하며 웹 브라우저가 서버에 접속해서 브라우저를 종료할 때까지 인증 상태를 유지한다.

- 접속 시간에 제한을 두어 일정 시간 응답이 없다면 정보가 유지되지 않게 설정이 가능하다.

- 사용자 정보를 서버에 두기 때문에 쿠키보다 보안에 좋지만, 사용자가 많아질수록 서버 메모리를 많이 차지한다. 동시접속자 수가 많은 웹 사이트인 경우 서버에 과부하를 주게 되므로 성능 저하의 요인이 될 수 있다.

클라이언트가 Request를 보내면, 해당 서버의 엔진이 클라이언트에게 유일한 ID를 부여하는 데 이것이 세션 ID이다.

 

 

2) 세션의 동작 방식

 

 

3) 세션의 사용 예

 

- 로그인

- 은행 웹 페이지 세션 유지 30분

 

 

 

 

4. 자바스크립트로 쿠키 사용하기

 

이 코드를 활용하면 쿠키를 사용하는 코드로 바꿔서 적용할 수도 있다.

 

<div id="no"></div>

<script>
function getCookie(name) {
    let matches = document.cookie.match(new RegExp(
    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
    ));
    return matches ? decodeURIComponent(matches[1]) : undefined;
}

function setCookie(name, value, options = {}) {

    options = {
        path: '/',
        ...options 
    };

    if (options.expires instanceof Date) {
    	options.expires = options.expires.toUTCString();
    }

    let updatedCookie = encodeURIComponent(name) + "=" + encodeURIComponent(value);

    for (let optionKey in options) {
        updatedCookie += "; " + optionKey;
        let optionValue = options[optionKey];
        if (optionValue !== true) { 
            updatedCookie += "=" + optionValue;
    	}
    }

    document.cookie = updatedCookie;
}

if (getCookie("no") === undefined) {
    setCookie("no", 0);
}

const noFromCookie = parseInt(getCookie("no"));
const newNo = noFromCookie + 1;
setCookie("no", newNo);

// 화면에 표시
document.querySelector("#no").innerHTML = newNo;
</script>

 

"no"라는 이름의 쿠키가 없을 경우에 "undefined"라는 문구가 출력되는데, 이때 "no"라는 이름의 쿠키를 지정한다.

 

그다음 쿠키의 값을 숫자로 변경하고 입장할 때마다 저장된 no 쿠키에 +1 씩 증가시켜 준다.

 

여러 창으로 접속해도 쿠키는 클라이언트에 저장되어 여러 페이지에서 접속해도 저장된 값에서 +1씩 값이 증가한다.

 

 

 

5. php로 쿠키 사용하기

 

<?php
if (isSet($_COOKIE["visit"])) $visitCount = $_COOKIE["visit"];
else $visitCount = 0;

setcookie("visit", ++$visitCount, time() + 3600);

echo "$visitCount";
?>

isSet이라는 메서드에 인자로 "visit"이라는 이름의 쿠키의 value 값을 넣는다. 만약 쿠키가 설정되어 있다면 visitCount 변수에 visit이라는 쿠키의 value를 넣고, 설정되지 않았다면 0을 넣어준다.

 

setcookie라는 메서드를 가지고 쉽게 쿠키를 사용할 수 있는 것을 알 수 있다.

참고로 setcookie의 파라미터는 아래와 같다.

 

setcookie([쿠키이름], [값], [만료시간 / 초 단위], [경로]);
// 파라미터는 값까지만 입력해도 된다.

 

 

 

 

 

<참고>

 

https://interconnection.tistory.com/74