쿠키/세션
1. 이 개념을 배우기 위해선 우리는 먼저 HTTP의 통신에 대한 내용을 알아야한다.
2. HTTP통신뿐만이 아니라 브라우저의 역할에 대해서도 알아야한다.
3. 이 두가지의 개념을 배우고 난 후 쿠키/세션에 대해 배워야한다.
1. HTTP통신
HTTP통신은 클라이언트 요청과 서버 응답을 통해서 브라우저와 웹서버가 서로의 정보를 주고받을 수 있게 도와주는 방식이다.
클라이언트 요청이란 url 부분에 내용을 쓰고 엔터키를 누르게 된다면 그 url에 맞는 주소에 해당하는 컴퓨터한테 내용을 전달하게 된다.
이 url주소에 대해서도 규격이 정해져있는데, 첫 번째로는 request method(get)을 이용함으로써 내용을 이어나가고 그 뒤에 post, 프로토콜등을 이용해서 완성시키면 된다.
여기서 우리는 의문점을 가질 수 있다.
꼭 규격을 정해서 보내야하나??
클라이언트 요청을 통해서 보내는 사람은 url에 내용을 아무렇게나 적어서 보내도 되지만 이 내용을 받고 응답하는 사람은 컴퓨터이다. 그렇기에 컴퓨터가 내용을 읽고 이해할 수 있게 정해진 규격대로 보내줘야 컴퓨터도 원할하게 읽고 요청에 대한 응답을 할 수 있다.
응답을 보내줄 때 헤더영역을 통해서 브라우저에게 보내는 방법 -> res.setHeader( )
server.js 파일에 이런식으로 코드를 작성해준다. (express, nunjucks 코드 설정,셋팅)
res.setHeader( ) 를 이용해보도록 하자
res.setHeader( )
1. 인자값은 총 2개이다.
2. 첫 번쨰는 key가 들어가고(string)
3. 두 번쨰는 value가 들어간다(string)
4. key:value로 생각하면 편하다.
res.setHeader을 get라우터에다가 넣어주도록 해보자.
이렇게 작성하고 실행을 시켜보면 응답 헤더 부분에 우리가 설정한 값이 나타난 것을 확인할 수 있다.
이처럼 우리가 setheader( )를 통해서 우리가 임의로 넣은 값을 확인할 수 있지만, 아무런 기능을 하지 못한다.
왜냐하면 아까 위에서 말했듯이 컴퓨터가 보고 이해할 수 있는 규격을 넣어야지만 컴퓨터가 읽고 응답할 수 있기에 우리는 그에 해당하는 규격을 넣어줘야 한다.
2. 브라우저의 역할
브라우저가 하는 역할에 대해 간단하게 알아보도록하자.
우리가 은행업무를 하기 위해 사이트에 들어가면 은행 보안으로 인해 브라우저의 저장되어 있는 캐시, 쿠키삭제등을 하라는 요청을 받은 적이 있었을 것입니다. 이것을 삭제하게되면 은행의 공인인증서, 보안시스템 등을 다시 설치하는 상황을 경험했을 것이다.
이처럼
브라우저는 캐시, 방문기록, 쿠키등을 저장하는 역할을 가지고 있습니다.
이처럼 여러한 저장공간들이 있는데 우리는 그중에서 쿠키에 대해서 알아볼 것이다.
쿠키에 대한 이해를 위해 간단한 예시를 하나 들어보도록 하자.
우리가 한 쇼핑몰 사이트에 들어갔을 때 팝업창으로 이벤트 내용이 나오고 아래에 일주일동안 보지않기를 누르면 일주일동안 뜨지 않게하는 설정이 있는 것을 다들 한번 씩 봤을 것이다. 이 기능에 들어가 있는 것이 바로 쿠키를 가지고 활용한 사례이다.
이 팝업창을 띄고 있는 것은 브라우저이다.
브라우저는 웹서버에게 사용자가 브라우저를 들어갈 때 팝업창이 뜰 수 있도록 요청을 보낼 수 있다.
웹서버는 브라우저가 요청한 부분을 읽고 응답을 보냄으로써 브라우저가 요청한 부분을 실행시켜준다.
사용자는 팝업창 아래에 있는 일주일간 보지 않기 버튼을 클릭함으로써 더이상 팝업창이 뜨지 않도록 설정할 수 있다. (브라우저가 쿠키를 지움과 저장함으로써 설정?할 수 있다)
쿠키를 지웠다 설정했다를 통해서 어떤 사용자가 팝업창을 원하는지 안하는지에 대해 체크가 가능하다.
브라우저에 쿠키를 저장하는 방법
Set-Cookie: <cookie-name>=<cookie-value>
응답헤더에 Set-Cookie: <cookie-name>=<cookie-value>를 넣어줌으로써 브라우저에 저장을 해보도록 하자.
Set-Cookie -> key 값
<cookie-name>=<cookie-value> -> value 값
---> res.setHeader('Set-cookie','token=1')
쿠키 저장의 주체는 브라우저라는 점을 잊어서는 안된다!
브라우저에 있는 쿠키값을 접근하기 위해서는 자바스크립를 이용해야한다.
-> document.cookie
콘솔에서 확인해보면 텍스트로 쿠키값 그대로 token=1이 뜨는 것을 확인할 수 있다.
그래서 우리는 쿠키값을 제대로 사용을 하기 위해서 글자값을 잘라서 사용해야한다.
쿠키의 속성
HTTPOnly : 자바스크립트가 쿠키를 접근할 수 없도록 만들어줌 -> 변경을 못하게 막아줌
Expires/Max-Age : 쿠키의 유효기간 ex) 5분동안 유지하고 싶다 -> 그럼 5분뒤에 사라짐 like 은행의 로그인 시간
Path : 사용범위 ( / )
로그인의 기능 구현
우리가 알아본 쿠키의 기능을 통해서 로그인 기능을 구현해보도록 하자.
로그인 기능을 구현하기에 앞서 어떤식으로 구성해나갈지에 대해 그림을 통해 알아보도록 하자.
메인페이지에는 로그인 버튼과 로그아웃 버튼을 만들 것이고, 로그인 페이지에는 id와 password를 칠 수 있는 input타입을 넣어줄 것이다. post에서는 set-cookie를 통해 id와 pw에 대한 정보를 메인페이지에 보내줄 것이다.
만약에 post에서 보내준 아이디와 비번 정보가 일치하다면 로그인 버튼이 사라지고 로그아웃 버튼만 남을 수 있게 설정할 것이다. 마지막으로 로그아웃 버튼을 누르면 id,pw가 담긴 쿠키를 지워주는 설정까지 할 것이다.
화살표에 순서를 정리해보자면
1. 처음에는 브라우저가 웹서버에게 메인페이지를 요청하면
2. 웹서버는 브라우저에게 메인페이지에 대한 응답을 줄것이다.
3. 브라우저는 메인페이지에서 로그인버튼을 누르면 웹서버에게 요청을 할 것이다.
4. 웹서버는 로그인 요청을 받음으로써 로그인페이지에 대한 응답을 줄 것이다.
추가로 요청헤더에 있는 쿠키 내용을 사용하는 법
브라우저는 쿠키를 저장하고 있는 상태에서 요청을 보낼 때 쿠키의 내용이 담겨져서 보내진다.
그러면 요청헤더에 포함되어있는 쿠키를 사용을 해보도록 하자.
요청헤더에 있는 쿠키를 사용하기 위해서는 cookie-parser 라이브러리가 있어야한다.
express는 기본적으로 헤더에 있는 부분을 읽을순 있지만 쿠키까지는 읽지 못한다. 그렇기에 cookie-parser가 필요로 하지만 하지만 우리는 좀더 다른 방식으로 쿠키를 가져와보도록 하자.
console.log(req.headers)를 실행시키면 헤더부분에 내용이 나타나는 것을 알 수 있다. 헤더부분 내용을 보면
헤더부분 안에 cookie라는 속성이 있고 쿠키값도 같이 있는 것을 확인할 수 있다.
그래서 우리는
req.headers.cookie를 이용해서 쿠키값을 가져오도록 하자.
자 이제 로그인과 로그아웃에 대한 코드식을 정리해보도록 하자
const express = require('express')
const nunjucks = require('nunjucks')
const app = express()
let user = {
userid:'juchan1996',
userpw:'1234',
username:'juchan'
}
app.set('view engine','html')
nunjucks.configure('views',{express:app,})
app.use(express.urlencoded({extended:true,}))
app.get('/',(req,res)=>{
if(req.headers.cookie ===undefined){ //쿠키를 없애니 에러가 뜨는 상황을 대비해 if문을 만듦
res.render('index')
} else {
let cookie = req.headers.cookie.split('=') // login=juchan1996
let userid = cookie[1] // juchan1996
let isLogin = false
if(userid ==='juchan1996'){
isLogin = true
}
res.render('index.html',{
userid:userid,
isLogin:isLogin
})
}
})
app.get('/login',(req,res)=>{
res.render('login')
})
// 브라우저에서 입력한 정보와, user 객체 안에 있는 정보랑 내용이 같은가?
app.post('/login',(req,res)=>{
const userid=req.body.userid
const userpw=req.body.userpw
console.log(userid,userpw)
if(user.userid === userid && user.userpw === userpw){
// 로그인 성공시
console.log('로그인 성공') // 추가로 로그인이 성공했을 때 쿠키를 하나 만들어주고 싶다.
res.setHeader(`Set-Cookie`,`login=${userid}`)
res.redirect('/')
} else{
// 로그인 실패시
console.log('로그인 실패')
res.redirect('/login')
}
})
app.get('/logout',(req,res)=>{
res.setHeader('Set-Cookie','login=juchan1996; Max-Age=0;')
res.redirect('/')
})
app.listen(3000,()=>{
console.log('server start')
})
브라우저는 기본적으로 웹서버한테 url을 통해서 요청을 보낸다. 웹서버는 브라우저에게 응답으로 text를 넘겨준다.
얘네들은 내가 보낸 정보들만 보내줄 수 있다. 보내는 정보를 어떤식으로 넘겨주나?? 우리가 썻던 render 등을 통해서만 보낼 수 있다. 그 외에는 정보들을 보낼 수 없다.
프로세스가 다른 애들은 서로 가지고 있는 데이터들을 공유할 수 없다. 항상 통신이라는 기능(네트워크)을 통해서만 데이터를 주고받을 수 있다.