🔍 Cookie

HTTP 프로토콜의 무상태성을 보완해주는 도구로, 자세하게는 웹 사이트에 들어갔을 때, 서버가 일방적으로 클라이언트에게 전달하는 작은 데이터로, 서버가 클라이언트(웹 브라우저)에 정보를 저장하고 불러올 수 있는 수단이다.

주로 로그인 상태 유지, 오늘 보지 않기와 같이 사용자 선호, 테마 등 장시간 보존해야하는 정보 저장에 적합하다.

👀 Cookie option

데이터를 저장한 이후, 특정 조건들(쿠키 옵션)이 만족되어야 클라이언트로부터 불러올 수 있으며, 주로 사용하는 쿠키옵션을 다음와 같다.

Cookie option	설명	비고
Domain	서버와 요청의 도메인이 일치하는 경우 쿠키 전송	◾ 요청해야할 URL:http://www.localhost.com:3000/users/login ◾ Domain: localhost.com
Path	서버와 요청의 세부경로가 일치하는 경우 쿠키 전송	◾ 요청해야할 URL:http://www.localhost.com:3000/users/login ◾ Path: /users/login , 단 설정된 경로를 포함하는 하위 경로로 요청해도 가능(/users/...)
MaxAge or Expires	쿠키가 유효한 기간을 정하는 옵션으로, 초 단위로 설정한다. 해당 옵션의 여부에 따라 세션쿠키와 영속성 쿠키로 나뉜다.	◾ 세션쿠키: 해당 옵션x, 브라우저 실행 중 임시쿠키 ◾ 영속성 쿠키: 해당 옵션o, 브라우저 종료 여부에 상관없이 유효시간만큼 사용가능한 쿠키
Secure	secure 옵션이 true면, HTTPS를 이용하는 경우에만 쿠키 전송	secure 옵션이 없으면 http에도 전송가능
HttpOnly	스크립트의 쿠키 접근 가능 여부 결정, 해당 옵션이 true면, 자바스크립트로 쿠키에 접근이 불가하다.	default false => 자바스크립트의 쿠키 접근이 가능(document.cookie)하므로 XSS 공격에 취약
SameSite	CORS 요청의 경우 옵션 및 메서드에따라 쿠키 전송 여부 결정	◾ Lax: CORS 요청의 경우, GET 메소드에 대해서만 쿠키 전송 ◾ Strict: CORS가 아닌, same-site인 경우에만 쿠키 전송(엄격) ◾ None: CORS에 관대, secure 옵션만 있으면 쿠키 전송

서버에서 위와 같은 옵션들을 지정한 다음, 서버->클라이언트로 쿠키를 처음 전송할 때, 헤더에 set-Cookie라는 프로퍼티로 쿠키를 담아 전송한다. 이후, 클라이언트->서버에게 쿠키를 전송할 때, 헤더에 Cookie라는 프로퍼티에 쿠키를 담아 전송한다.

이러한 쿠키의 특성을 이용하여 무상태성을 띈 인터넷 연결을 상태 유지가 가능하도록 만드는데, 기본적으로 쿠키는 오랜시간 유지가 가능하며 HttpOnly 옵션이 없다면 자바스크립트를 통해서 쿠키에 접근할 수 있으므로, 민감한 정보를 담는 것은 위험하다.

🔥 실습(Axios 사용)

✔ Axios?

fetch API와 비슷하게 특정 URL로부터 정보를 받아오는 역할을 하는 라이브러리로, 브라우저 및 Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다.(Fetch API보다 사용이 쉽고 추가적인 기능이 포함되어있음)

Axios	Fetch API
설치 필요(써드 파티 라이브러리)	설치X(빌트인 API)
JSON 변환 자동	JSON 변환 수동(.json()메서드 사용)

npm install axios를 입력해 설치 후, axios.get("url"[,config])을 입력해 GET요청을한다. 이때, 첫 번째 인자에는 url주소가 들어가며 두 번째 인자에는 요청 시 사용할 수 있는 옵션들을 설정하게 된다.(필수x)

fetch API GET요청

// Promise ver
fetch('https://koreanjson.com/users/1', { method: 'GET' })
  .then((response) => response.json())
  .then((json) => console.log(json))
  .catch((error) => console.log(error));



// Async / Await ver
 async function request() {
   const response = await fetch('https://koreanjson.com/users/1', {
     method: 'GET',
   });
   const data = await response.json();
   console.log(data);
 }

 request();

Axios GET 요청

// axios를 사용하기 위해서는 설치한 axios를 불러와야 합니다.
import axios from 'axios';

// Promise ver
axios
  .get('https://koreanjson.com/users/1')
  .then((response) => {
    const { data } = response;
    console.log(data);
  })
  .catch((error) => console.log(error));


// Async / Await ver
 async function request() {
   const response = await axios.get('https://koreanjson.com/users/1');
   const { data } = response;
   console.log(data);
 }

 request();

Reference: 코드스테이츠