/*
HTTP/1.1 304 Not Modified
X-Powered-By : Express
ETag: W/"11e-qIn16VTWK28orjE6zqy/bnhjv58"
Data: Mon, 18 Apr 2022 05:53:59 GMT
Connection: Keep-alive
KeepAlive: timeout=5
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
Hello world!
</body>
</html>Keep-Alive 까지 response header
reponse header는 마음대로 생성할 수 있다.
부터 reponse body브라우저가 만들어 주는것과 express가 읽는 내용을 명확하게 구분 해야 한다.
역할분담이 명확하게 나누어져 있다.
1. 쿠키와 세션의 차이
쿠키 : 브라우저에서 저장하고,
세션 : 서버에서 저장한다.
브라우저란?
브라우저에 치는 주소 : 받는 사람에게 요청을 하겠다.
브라우저가 우리가 원하는 서버에 요청을 때리게 되면 express에서는 알맞는 요청을 받아 응답을 준다.
응답의 내용 html,json 등등
브라우저가 파일이나 데이터를 저장할 수 있는 공간 : 쿠키
확인 하는 방법 : 개발자도구의 application > cookies
쿠키는 브라우저에 메모리를 활용해서 데이터를 저장
세션은 서버에 메모리를 활용에서 데이터를 저장
3.브라우저에서 http://localhost:3000/getCookie 요청시 Token 이라는 이름에 값을 true로 응답을 주는 코드 구현
4. Front Server 구현 http://localhost:4000 에 접속시 http://localhost:3000/getCookie으로 요청하여 쿠키를 받아오기(비동기 통신 / CORS 문제)
axios 비동기 요청
비동기 통신은 요청이 2번간다.
폴더 구조
back/views/index.html
back/server.js
express
const express = require(’express’);
express란 NodeJS를 사용하여 서버를 쉽게 구성할 수 있게 만든 프레임워크다. 프레임워크란, 클래스와 라이브러리의 집합체이다.
const app = express()
express를 쓸때 매번 express().method.()을 써줘야 하기 때문에 express()를 app에 선언해준것이다.
nunjucks
const nunjucks = require(’nunjucks’)
nodejs에서 사용하는 view engine중의 하나 (ejs, pug등등...)
html에 랜더링을 도와주는 도구, 빠르게 UI를 구현 가능하다.
CORS(**Cross-Origin Resource Sharing**)
CORS란 자신이 속하지 않은 다른 도메인, 다른 프로토콜, 혹은 다른 포트에 있는 리소스를 요청하는 cross-origin HTTP 요청 방식이다.
Access-Control-Allow-Origin: 요청을 허용할 출처를 명시할 때 사용하며, * 를 사용하면 모든 출처의 리소스 요청을 허용합니다.
Access-Control-Allow-Methods : 어떤 메서드를 허용할 것인지 명시합니다.
Access-Control-Allow-Headers : 어떤 헤더들을 허용할 것인지 명시합니다.
Access-Control-Allow-Credentials : 요청이 credentials 모드이면서 서버가 Access-Control-Allow-Credentials 헤더를 true로 설정하여 응답하면, credentials를 이용한 요청을 처리할 수 있습니다.
prefilght request(사전 요청)의 경우, 실제 요청과 함께 credentials를 보낼지 판단하는데 사용됩니다. 만약 Access-Control-Allow-Credentials : false
이거나 생략한 경우, 실제 요청을 서버에 보낼 때 credentials 정보를 함께 보내지 않습니다.
단, 서버에서 Access-Control-Allow-Credentials : false 이거나 생략한 경우, 응답을 브라우저가 자바스크립트 코드에 노출시키지 않습니다. 즉, 전달하지 않습니다.
res.setHeader('Set-Cookie','token=true')
// token=true라는 값을 브라우저에 전송한다.
// (HTTP 응답 헤더는 서버에서 사용자 브라우저에 쿠키를 전송하기 위해 사용된다.)
res.send('cookie~?')
})COOKIE-PARSER
요청된 쿠키를 쉽게 추출할 수 있도록 해주는 미들웨어
urlencoded
json
CORS 참고자료 : https://www.npmjs.com/package/cors
CORS 참고자료 : https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
Set-Cookie 참고자료 : https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Set-Cookie
front/views/index.html
AXIOS
뷰에서 권고하는 HTTP 통신 라이브러리는 액시오스(Axios)입니다. Promise 기반의 HTTP 통신 라이브러리이며 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘되어 있고 API가 다양합니다.
비동기 처리에 있어서 promise기반의 객체를 동기화처럼 사용할수 있게 해주는것이 async와 await
CDN 방식
NPM 방식
ASYNC와 AWAIT
자바스크립트는 싱글스레드 기반 언어이기 때문에 비동기 처리가 필수적이다. 비동기 처리는 결과를 예측할 수 없기 때문에 동기식의 처리가 필요하다. 대표적으로 promise, callback이 있다. async와 await는 기존 동기식 처리의 단점을 보완하고 가독성을 높혀주는 코드를 작성할 수 있다.
withCredentials : ‘true’
Credentials 이 있는 cors **요청은 Client와 Server 둘다 Credentials를 사용하겠다는 속성을 설정해줘야 통신이 가능하다. 따라서 cors요청시 Client에서 XMLHttpRequest.withCredentials** 속성을 true 로 설정을 해야해줘야 통신이 가능하다.
front/server.js
