쿠키(Cookie)

쿠키는 서버에서 클라이언트에 영속성있는 데이터를 저장하는 방법이다. 서버가 원한다면 서버는 클라이언트의 쿠키를 이용하여 데이터를 가져올 수 있다.
쿠키를 이용한다는 것은 단순히 서버 -> 클라이언트, 클라이언트 -> 서버 둘 다 포함이다.

*영속성(persistence): 데이터를 생성한 프로그램의 실행이 종료되더라도 사라지지 않는 데이터 특성을 의미한다.

쿠키 특징

서버가 클라이언트에 특정한 데이터를 저장할 수 있다. 하지만 데이터를 저장한 이후 아무 때나 데이터를 가져올 수 없다. 데이터를 저장한 이후 특정 조건들이 만족되어야 다시 가져올 수 있기 때문이다.

'Set-Cookie':[
            'cookie=yummy', 
            'Secure=Secure; Secure',
            'HttpOnly=HttpOnly; HttpOnly',
            'Path=Path; Path=/cookie',
            'Doamin=Domain; Domain=naver.com'
        ]

위 코드처럼 쿠키 옵션을 표현할 수 있다.

• Domain
  쿠키 옵션에서 도메인은 포트 및 서브 도메인 정보, 세부 경로를 포함하지 않는다.
  쿠키 옵션에 도메인 정보가 존재한다면 클라이언트에서ㅡㄴ 쿠키의 도메인 옵션과 서버의 도메인이 일치해야만 쿠키를 전송할 수 있다. 이를 통해 naver.com에서 받은 쿠키를 google.com에 전송하는 일을 막을 수 있다.

• Path
  Path는 세부 경로로 서버가 라우팅할 때 사용하는 경로를 의미함.
  http://www.localhost.com:3000/users/login 인 경우라면 여기에서 Path는 /users/login이 된다. 이를 명시하지 않으면 기본적으로 / 으로 설정되어 있다.
  Path 옵션의 특징은 설정된 경로를 포함하는 하위 경로로 요청을 하더라도 쿠키를 서버에 전송할 수 있다. Path가 /users로 설정되어 있고, 요청하는 세부 경로가 /users/profile 인 경우라면 쿠키 전송이 가능합니다.
  하지만 /posts/profile로 전송되는 요청은 Path 옵션 /users을 만족하지 못하기 때문에 서버로 쿠키를 전송할 수 없다.

• MaxAge or Expires
  쿠키가 유효한 기간을 정하는 옵션.
  MaxAge는 쿠키가 유효한 시간을 초 단위로 설정하는 옵션이다.
  Expires은 MaxAge와 비슷하지만 언제까지 쿠키가 유효한지 기한을 정할 수 있다. 이때 옵션의 값은 클라이언트의 시간을 기준으로 한다. 지정된 시간 이후가 되면 쿠키는 자동으로 파괴된다.
  위 옵션의 여부에 따라 세션 쿠키와 영속성 쿠키로 나뉜다.

  • 세션 쿠키(Session Cookie)
    위 두가지 기한 옵션이 없는 쿠키로, 브라우저가 실행 중일때 사용하고 종료되면 삭제되는 임시 쿠키이다.
  • 영속성 쿠키(Persistent Cookie)
    브라우저의 종료 여부와 상관없이 위 두가지 기한 옵션을 지정하여 유효시간만큼 사용가능한 쿠키이다.

• Secure
  사용하는 프로토콜에 따른 쿠키의 전송 여부를 결정하는 옵션. true로 설정한 경우 HTTPS를 이용하는 경우에만 쿠키를 전송할 수 있다. 없다면 http에도 쿠키를 전송할 수 있다.

• HttpOnly
  자바스크립트에서 브라우저의 쿠키를 접근 여부를 결정한다. true로 설정한 경우 자바스크립트로 쿠키에 접근이 불가하다.
  명시하지 아니한 경우는 기본값이 false이다. 이때 자바스크립트에서 쿠키접근이 가능하므로 XSS 공격에 취약해진다.
  document.cookie로 접근이 가능하다.

• SameSite
  Cross-Origin 요청을 받은 경우 요청에서 사용한 메소드와 해당 옵션의 조합을 기준으로 서버의 쿠키 전송 여부를 결정하게 된다. 사용 가능한 옵션들로 Lax, Strict, None이 있다.

  • Lax
    Cross-Origin 요청이라면 GET 메소드에 대해서만 쿠키를 전송할 수 있다.
  • Strict
    단어 그대로 가장 엄격한 옵션이다. Cross-Origin이 아닌 same-site인 경우에만 쿠키를 전송할 수 있다.
    *same-site는 요청을 보낸 Origin과 서버의 도메인, 프로토콜, 포트가 같은 경우를 말한다. 이 중 하나라도 다르면 Cross-Origin으로 구분된다.
  • None
    Cross-Origin에 대해 가장 관대한 옵션, 항상 쿠키를 보낼 수 있다. 다만 쿠키 옵션 중 Secure 옵션이 필요하다.

이러한 옵션들을 지정한 다음 서버에서 클라이언트로 쿠키를 처음 전송하게 된다면 헤더에 Set-Cookie라는 프로퍼티로 쿠키를 담아 전송한다.

이후 클라이언트에서 서버에게 쿠키를 전송해야 한다면 클라이언트는 헤더에 Cookie라는 프로퍼티에 쿠키를 담아 서버에 쿠키를 전송하게 된다.

Axios

Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. Axios는 Fetch API보다 사용이 간편하면서 추가적인 기능들이 포함되어 있다.

Axios vs Fetch API

Axios

• 써드파티 라이브러리로 설치가 필요함.
• 자동으로 JSON 데이터 형식으로 변환됨.

Fetch API

• 빌트인 API라 별도의 설치 필요없음.
• .json() 메서드를 사용해야 함.

Axios 사용법

npm install axios npm을 통해 axios를 설치할 수 있다.

GET 요청

axios.get("url"[, config])