쿠키란 뭘까? (ft. http 요청,응답 & 브라우저의 역할)

NodeJS

YJLEE_KR 2022. 2. 7. 20:19

1/http 통신내용

2/브라우저의 역할

3/쿠키의 역할

4/쿠키는 어떻게 주는건가?

로그인 구현을 배우기 위해서는 쿠키/세션을 알아야한다. 오늘은 쿠키에 대해서 배웠다.

우선, 쿠키/세션을 잘 알려면 "http 통신 내용 & 브라우저의 역할" 이 두 내용이 선행되어야 한다.

: http 통신규격에 맞춰서 클라이언트 측 브라우저가 요청을 보내면, 서버가 응답을 보내준다.

서버는 응답메시지로서 응답헤더+한줄띄고+응답바디를 보내줌을 배웠다.

이 때 서버측인 우리는 이 응답헤더를 조작하는 게 가능함을 기억하자..

근데, 이 브라우저-서버간의 요청-응답은 한번 왔다갔다하면 끝나버린다. 즉, 다음 요청/응답에 영향을 주지 않는다.

서로 할일 끝내자마자 모르는 사이가 되버림

근데, 이런 특성때문에, 서버가 날 기억못해서 한 서버/사이트 내에서 페이지만 이동하는건데 로그인이 풀려서 이동할 때마다 로그인을 해야한다면 매우 귀찮을거다.

그래서 이런 일회성을 지닌 HTTP의 속성을 극복하려고 나온 게 쿠키다.

지금까지는 브라우저의 역할 중에서 서버에게 요청하고, 응답텍스트를 읽어서 화면을 render해주는 역할을 배웠었다.

이젠 브라우저가 데이터를 저장하는 역할도 한다는 걸 알아야한다.

브라우저/개발자도구-애플리케이션-저장소-쿠키 를 확인해보자.

(브라우저 앱 자체의 Storage라는 탭 안에 Cookies가 있다. 이미 쿠키를 저장한다는 걸 직관적으로 알 수 있다)

google.com 접속해보면, 쿠키는 name:value값 형태로 저장됨을 알 수 있다.

=> 즉, 쿠키는 브라우저가 저장해준다.

쿠키는 서버가 클라이언트한테 발행해주는 이름표 같은 거다.

=> 서버가 각 사용자를 구분하고 특정짓기 위해서 이름표 같은 걸 사용자한테 주는거다.

- 사용자마다 id가 다 다르듯이 쿠키값도 사용자마다 다 다른 name=value값을 주는거다.

- 사이트마다 다 다른 쿠키name=쿠키value를 준다.

ex) 쿠키의 활용 : 로그인, 한 사이트 내에서 로그인 유지, 팝업창 오늘 하루 안보기 등...

서버 : 쿠키를 클라이언트 측 브라우저에게 던져주고
브라우저 : 받은 쿠키를 저장해준다.

이 쿠키를 서버가 클라이언트 측 브라우저에게 어떻게 줄까?

바로, 응답 헤더로 쿠키를 던져준다. 우리는 응답을 주는 서버로서 응답 헤더를 조작하는 게 가능하다.

응답 헤더를 조작하는 건 setHeader 메소드 사용!

setHeader 메소드 사용!
res.setHeader('headerKey','headerValue')

근데, 브라우저가 이게 쿠키란 걸 알아야하니까,

setHeader 메소드 안에 인자로서 Set-Cookie 와 cookie-name=cookie-value를 넣어주면 끝

app.get('/',(req,res)=>{
	res.setHeader('Set-Cookie','token=1') // 브라우저한테 쿠키 저장해달란 뜻
})

브라우저는 응답 헤더를 읽다가, Set-Cookie를 만나면, 이 Cookie 이름(token)과 값(1)을 저장해둔다.

<그림으로 표현>

응답 헤더로 쿠키를 넘겨줄 때 쿠키에 관련된 다른 optional 속성들도 넣어줄 수 있는데, 우선은 참고만 하자..

- Expires/Max-Age : 쿠키의 유효기간

- HttpOnly : 브라우저의 JS 해석기가 쿠키에 접근가능한데 이 기능을 설정해두면 JS로 값을 가져올수도, 바꾸지도 못한다.