Cookie

Cookie

쿠키란 사용자가 웹 사이트를 방문할 때 서버 측에서 사용자의 PC에 저장시키는 작은 데이터 파일이다.

요청과 응답하는 과정에 텍스트 정보를 저장하고 읽어서 사용할 수가 있다.

일반적인 브라우저에서 최대 4KB의 텍스트 정보를 담을 수 있으며, 하나의 사이트에서는 최대 20개의 쿠키 파일 생성이 가능하다.

모든 사이트에는 최대 300개의 쿠키 파일을 생성할 수 있다.

만약 최대 생성 허용 수치를 넘어 쿠키를 생성할 경우 가장 오래전 생성된 쿠키를 기준으로 삭제된 후 새로운 쿠키가 생성된다.

쿠키는 최대 저장 용량이 4KB이기 때문에 간단한 정보를 저장하기 위해서이거나 최근 읽은 글, 최근 본 상품과 같은 식별자들을 저장할 때 활용된다.

이번 시간에는 쿠키를 생성하고 사용하는 방법을 알아보자.

 API 문서

모든 웹 서버 언어 혹은 웹 클라이언트 언어는 쿠키를 사용할 수 있는 기능을 제공한다.

Node.js를 웹 애플리케이션으로 사용할 수 있게 기능하는 웹 프레임워크인 Express의 API문서를 보자.

쿠키는 요청과 응답 과정에서 사용할 수 있는 기능이라고 설명했다.

즉 Request와 Response 처리 과정에서 모두 쿠키를 컨트롤 할 수 있어야 하므로 Request와 Response 모두에 쿠키에 대한 기능을 제공한다.

가장 먼저 Request의 쿠키 기능을 보자.

쿠키에 대한 설명이 나온다.

"cookie-parser라는 미들웨어를 사용하는 경우, 이 속성은 요청에 의해 전송된 쿠키를 포함하는 객체이다. 

요청에 쿠키가 포함되지 않은 경우 기본값은 빈 객체이다.

쿠키가 사인되어있다면 req.signedCookies를 사용할 수 있다.

더 많은 정보나 이슈, 관련정보들을 보려면 cookie-parser의 문서를 보라."

req.cookies 속성은 기본적으로 cookie-parser라는 외부 미들웨어 패키지를 설치해야 제공된다고 이야기하고 있다.

cookie-parser가 무엇인지 알아보기위해 박스친 링크를 클릭해보자.

 Cookie-parser Package

링크를 클릭하면 Cookie-parser를 소개하는 npm페이지로 이동된다.

"쿠키 헤더를 분석하고 쿠키 이름으로 맞추어진 객체로 req.cookies를 채운다.

선택적으로 다른 미들웨어에서 사용할 수 있도록 req.secret을 할당하는 비밀 문자열을 전달하여 서명된 쿠키 지원을 활성화할 수 있다."

복잡한 말이 있는거 같은데 핵심은 쿠키에 대한 헤더정보를 분석하고 req.cookies를 활성화할 수 있다는 것이다.

 Cookie-parser 미들웨어 설치

페이지 스크롤을 내려보면 설치하는 방법을 설명해주고 있다.

설명해주는 내용대로 cookie-parser 미들웨어를 설치하자.

 Cookie-parser 사용하기

페이지 스크롤을 내려보면 API문서를 통해 cookie-parser를 어떻게 사용하는지 알려주고 있다.

웹 애플리케이션에서 동작하는 기능이므로 반드시 express 웹 프레임워크를 사용해야한다.

웹 프레임워크를 사용한다는 전제하에 require()를 통해 cookie-parser를 애플리케이션에 불러온다.

express 객체를 생성하고 use()함수를 통해 cookieParser()객체를 사용 선언한다.

API에서 알려주고 있는 사용방법을 이용해서 환경을 셋팅해보자.

새로운 웹 애플리케이션에서 작업할 것이므로 프로젝트에 app_cookie.js파일을 생성한다.

그리고 아래의 코드를 작성한다.

이것으로 req.cookies 및 res.cookie는 사용할 수 있게 되었다.

 쿠키 생성하기

쿠키를 사용할 환경은 준비가 되었다.

이제 사용하는 방법을 보기 위해 API문서를 확인해야한다.

쿠키를 생성하는 것은 응답할 때 생성되는 것이므로 Response의cookie()를 보자.

"쿠키 이름을 값으로 설정한다. 매개변수 값은 json으로 변환된 객체이거나 스트링일 수 있다."

라는 설명과 함께 쿠키 생성 시 사용 가능한 옵션 값들을 표로 보여주고 있다.

그 아래 예제를 보자.

cookie-parser 미들웨어 사용으로 인해 Response객체의 cookie()기능을 사용할 수 있게 되었다.

res.cookie('쿠키 이름', '값', {options}) 형식으로 쿠키를 생성하고 설정할 수 있다.

"인코딩 옵션을 사용하면 쿠키 값 인코딩에 사용되는 기능들을 선택할 수 있다. 비동기 기능은 지원하지 않는다.

사용 예: 다른 사이트 단체에 대해 폭 넓은 도메인 쿠키 설정을 해야한다.

다른 사이트는 URI 인코딩 쿠키 값을 사용하지 않는다."

아마 크로스 도메인 환경에서 쿠키를 생성하는데 설정을 설명하는 것 같다.

"maxAge 옵션은 현재 시간(밀리 초)을 기준으로 "만료"를 설정하는 편리한 옵션이다.

다음은 위에서의 두번째 예제와 동일하다."

위 예제에서 설명하는 expires 옵션을 대체할 수 있는 좀 더 쉬운 옵션인 maxAge를 소개하는 내용이다.

"객체를 매개변수 값으로 전달할 수 있으며, JSON으로 직렬화한 다음 bodyParser() 미들웨어에 의해 분석된다."

쿠키에 저장할 값을 JSON으로 직렬화할 수 있다는 것을 설명하고 있다.

"cookie-parser 미들웨어를 사용할 때, 이 메소드는 서명된 쿠키를 지원한다.

true로 설정된 'singed'옵션을 포함하기만 하면 된다.

그 후에 res.cookie()는 cookieParser(secret)에 전달된 암호를 사용하여 값을 성명한다.

이후에 req.signedCookie 객체를 통해 값에 접근할 수 있다."

쿠키에 저장되는 값을 암호화하는 옵션에 대해 설명하고 있다.

API 문서에서 설명하고 있는 내용은 이렇게 확인했으니 이제 간단하게 쿠키를 생성해보자.

app_cookie.js에 다음과 같이 '/count'로 들어오는 요청에 대한 처리 라우트를 작성하자.

res.cookie()를 이용해 'count'라는 이름의 쿠키를 생성하고 쿠키 안에 1이라는 데이터를 작성한다.

'/count' URL로 접속하고 F12버튼을 눌러 개발자 도구를 연 다음 Network탭으로 이동해보자.

count에 대한 쿠키 정보가 있는데 해당 정보를 열어보면 Response Headers부분에 "Set-Cookie" 정보를 포함하고 있을 것이다.

이는 쿠키에 대해 값을 설정하는 것을 의미하고 쿠키를 사용한다는 것을 의미한다.

만약 res.cookie()를 사용하지 않을 경우, 즉 쿠키를 생성하지 않는 경우에 Response Headers 정보에 Set-Cookie에 대한 값은 누락된다.

Set-Cookie에 대한 값을 보면 count=1;이라고 Server가 Browser에게 내용을 전달하고 있다.

이 말은 1이라는 데이터를 작성하고 count란 이름으로 쿠키를 생성하라는 뜻이다.

 쿠키 값 요청하기

서버를 통해 쿠키를 생성했다면 이제 서버에게 클라이언트가 쿠키의 정보를 요청하는 방법을 알아보자.

Request의 cookies API문서를 보면된다.

"req.cookies.name(쿠키이름)"으로 쿠키에 쓰여진 데이터에 접근할 수 있는 것 같다.

app_cookie.js에 아래와 같은 코드를 작성하자.

count라는 이름으로 쿠키를 생성했으니

req.cookies.count를 작성해서 웹 페이지에 count쿠키의 값을 출력해보자.

"/count" URL로 접속해보자.

count쿠키에 저장된 값이 출력되는 것을 볼 수 있다.

개발자 도구를 켜서 Network탭을 통해 서버와 통신으로 인해 다운받은 쿠키 정보를 보자.

서버로 전달하는 Request Headers에 Cookie 정보가 쓰여진 것을 볼 수 있다.