[목록]
- 사전지식 : 응답헤더에 임의로 값을 추가하기
- 브라우저의 저장소 중 하나인 쿠키
- 사용자마다 다른 정보를 브라우저에 저장하는 쿠키값
- 쿠키 사용 설명서
- 코드의 실행흐름
- 쿠키에 저장한 내용을 다루기
- 쿠기의 유효기간, 접근권한
사전지식 : 응답헤더에 임의로 값을 추가하기
이전수업까지는 body 내용만 작성해서 보냈지 header부분은 작성해서 보낸적이 없다.
express가 header부분을 작성해주던 긴 텍스트.
오늘은 express가 만들어주는 헤더에다가 우리가 임의로 추가해서 넣을것이다.
응답을 줄때 헤더에 내용을 추가할거니까 다음 코드를 작성한다.
res.Header('headerKey','headerValue') : 둘다 string인 인자값을 가짐
app.get('/',(req,res)=>{
res.Header('HeaderKey','HeaderValue') //header에 임의로 추가할게!
res.render('index')
}
이렇게 응답헤더를 확인하면 임의로 넣었던 key값과 value값을 확인할 수 있다
여기서 주의! 원시헤더로 보면 모두 긴 텍스트값인걸 잊지말자.
브라우저의 저장소 중 하나인 쿠키
인터넷으로 은행업무 중에 안될시엔 방문기록이나 쿠키를 삭제하세요-라는 안내문구에서만 종종 봤던 쿠키. 그러면 쿠키는 대체 뭘까.
구글 사이트에서 저장소를 클릭하면 많은 저장소가 있는 것을 볼 수 있고, 그 중 하나를 선택해보면 key, value값을 볼 수 있다.
여기서 확인할 수 있는것은,
- 브라우저에는 많은 저장소가 있다.
- 특별한것 없이 역시 긴 텍스트로 저장한다.
- headerKey, headerValue는 정해진 명령어나 변수가 아니라 임의로 작성할 수 있는 변수명이다.
- 쿠키는 이 저장소의 한 종류.
사용자마다 다른 정보를 브라우저에 저장하는 쿠키값
브라우저가 여러개여도 웹서버는 한개. 서버는 사용자라 여러명인것을 인식하지않고 기계적으로 요청이 오면 응답을 주는 것을 반복한다. 웹서버는 브라우저를 인식할 기능이 없다. 그래서 header에다가 브라우저가 특정할 수 있는 정보를 보내서 웹서버가 구분이 가능하게 해주는것.
즉, 요청과 응답은 컴퓨터별(ip)로 구분은 가능하지만 사용자를 특정지을 수 없는 웹서버를 위해서 쿠키라는 것이 존재하게 되었고 그게 브라우저의 기능으로 만들어진것.
예시) 쇼핑몰의 팝업 : 일주일동안 보지 않기.
브라우저가 url을 실행하고 요청을 보내면 -> 어떤 특정 서버가 요청을 보내고, 텍스트를 만들어서 줌 -> 웹서버는 텍스트를 읽어서 그 해당내용을 줌. -> 쿠키를 누르면 자바스크립트를 통해서 쿠키에 있는 내용을 읽어서 조작함. 사용자는 여러명이지만 쿠키값을 통해서 각자 다 다른 화면을 볼 수 있도록 구현한 것.
쿠키 사용 설명서
쿠키는 브라우저가 주체가 되어서 저장하는것. 즉, 쿠키는 브라우저의 소유.
브라우저가 만들었으니 당연히 사용설명서가 있겠지. 이게 바로 사용설명서.
https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Set-Cookie
Set-Cookie - HTTP | MDN
Set-Cookie HTTP 응답 헤더는 서버에서 사용자 브라우저에 쿠키를 전송하기 위해 사용됩니다.
developer.mozilla.org
Set-Cookie: <cookie-name>=<cookie-value>응답헤더에 이 코드를 작성하면, 쿠키를 브라우저가 처리해주겠다-라는 약속이다.
//Set-Cookie: <cookie-name>=<cookie-value>
res.setHeader('Set-Cookie','token=1')설명서를 따라서 만들어보았다. cookie-name, cookie-value를 각각 작성해서 만듬.
잠깐 잡담.
근데 쿠키는 왜 쿠키일까.
코끼리만한 컴퓨터를 가지고 종이에 구멍을 뚫으며 전선으로 곡예같던 실뜨기를 하던 시절 개발자들이 서로에게 일을 부탁하기 미안해서 일을 주면서 쿠키를 주기시작하면서부터 만들어진 말일까. 현재시대로 보자면 미안하니까 초코우유나 한개, 아아나 한개. 이런 느낌인걸까. 단순한 내 상상이지만 왠지 가능성 있어보여...? 버그도 진짜 벌레들이 회로 안에 껴서 죽고, 종이를 갉아먹고, 전선코드를 갉아먹어서 생긴 말이라고하니까. 일리있어...? 여튼.
코드의 실행흐름
//index.html
<head>
<script type="text/javascript">
console.log(a)
</script>
</head>
//server.js
let a = 100왜 저 console.log(a)가 실행되지 않는지 코드의 실행흐름을 설명할 줄 알아야 좀더 복잡해져도 쉽게 코드를 짤 수 있다.
웹서버랑 브라우저는 프로세스가 달라서 소통 불가능하다.
이 둘을 이어주는게 통신이고, 그게 네트워크다. http.
그렇기때문에 강제적으로 던지지 않는 이상, js에 들어있는 변수는 읽지 못한다.
근데 왜 res.setHeader('Set-Cookie','token=1')는 알아들을까? html 데이터만 던져줘서 가능하다며?
응답을 줄때, header를 추가적으로 만들어서, 응답헤더에 같이 붙여서 보낸다.
브라우저가 응답헤더를 읽다가 오, 내가 아는 말이네?하고 나한테 저장하란 뜻이네? ㅇㅇ 저장함-이 된다.
그래서 브라우저가 저장하는 값이다. 웹서버는 뭘 저장했는지 모름.
쿠키에 저장한 내용을 다루기
브라우저를 이루는 html,css,javascript를 해석하는 기능중에 javascript를 해석하는 기능이 이걸 읽고 접근이 가능하다.
<head>
<script type="text/javascript">
</script>
</head>아까 넘어갔던 이 곳에서 해석이 가능하다는 소리다.
어떻게? document.cookie로 가능하다.
<script type="text/javascript">
console.log(document.cookie)
</script>
텍스트로 정보를 주고받았기 때문에 텍스트 그대로 token=1이 있다.
우리가 사용하려면? 잘라서 사용해야한다.
예전에 자바스크립트를 공부할때 텍스트를 자르는 법을 배웠었다. 오.. 그때 배운걸 이때 써먹는구나...
텍스트를 자르고 가공하는 여러가지 방법은 아래 블로그 글에 작성해놓았다.
https://hancoco.tistory.com/35
[220105] 메서드 (split, repeat, replace, repalceAll, includes, indexOf, substring, substr, concat, valueOf, slice, splice)
오늘 수업은 감자특집이라고 하겠다. 수업을ㅋㅋㅋ 듣고는 있는데 하나도 이해를 못해서 그저 같이 흘러감ㅋㅋㅋㅋㅋㅋ 나는 말하는 감자지만 괜찮아!!!! 괜찮아!!!!! 나는 살아숨쉬는 감자니까
hancoco.tistory.com
let cookie = document.cookie.splice('=')split메서드를 사용한 텍스트 token=1은 =기준으로 잘려서 배열로 저장된다.
cookie[0]="token"
cookie[1]="1"
여기까지 이해를 했으면 조건문도 사용할 수 있다.
let cookie = document.cookie.split('=')
if(cookie[0]==="token" && cookie[1]==="1"){
alert('넌 인증된 사람이야')
}
텍스트로 이루어져있다는 사실을 기억하면 값 수정도 가능하다.
document.cookie에서 가져온 텍스트를 split으로 자른거니까, 똑같이 텍스트로 document.cookie 값을 바꿔주면 된다.
console.log(document.cookie) //쿠키값 수정전
document.cookie="token=0"
let cookie = document.cookie.split('=')
if(cookie[0]==="token" && cookie[1]==="1"){
alert('넌 인증된 사람이야')
}
console.log(document.cookie)//쿠키값 수정후
서버에서 브라우저에게 자바스크립트를 변수에 내용을 집어넣을 수 있는 딱 하나의 방법이 있다면 쿠키변수에 텍스트를 넣는 방법.
쿠키의 유효기간, 접근권한
쿠키에도 유효기간이 있다. 은행에서 로그인 시간 60분 지나면 연장버튼 누르라고하잖아. 그게 그거임.
유효기간이 지나면 쿠키는 삭제된다.
http only 기능을 설정하면 접근권한이 바뀌어서 자바스크립트 해석기가 접근하지 못한. 즉, 값 변경을 못함
만든 이유 : 로그인한 값을 바꾸면 다른 사람의 계정이나 정보를 볼 수 있기때문에 막기 위해서 생긴 기능.
'프로그래밍 > nodejs' 카테고리의 다른 글
| [220207] 로그인 페이지 만들기 (0) | 2022.02.08 |
|---|---|
| [220207]크롬에서 개발자도구>네트워크를 켠 상태에서 새로고침을 하면 인터넷이 끊기는 현상 해결 (0) | 2022.02.07 |
| [220204] nvm 완벽삭제하기, 맥OS(M1칩) (0) | 2022.02.04 |
| [220204] 서버로 이루어진 게시판 만들기(CRUD 구현 : 생성,작성,수정,삭제) (0) | 2022.02.04 |
| [220128] express 모듈로 서버 시작하기, 요청헤더, 응답헤더, form과 연결하기 (0) | 2022.02.03 |
댓글