[React] 인증/ 인가 (쿠키)

인증

- 서비스를 이용하려는 유저가 등록된 회원인지 확인하는 절차 (로그인)

 

인가

- 특정 리소스에 접근할 수 있는 권한이 있는지 확인하는 절차 (카페 운영자)

- 유저가 마이페이지에서 서버에 API 요청으로 개인정보를 받아오는 요청

 

http 프로토콜 통신의 특징 2가지

 

1. 무상태(Stateless) : 서버는 클라이언트의 상태를 기억하지 않는다. 따라서 각 요청마다 서버에서 요구하는 모든 상태 정보를 담아서 요청해야 한다.

- 상태값은 매 요청마다 클라이언트가 가지고오기 때문에, 서버는 클라이언트의 상태를 별도로 기억할 필요없이 주문받은 대로 응답함.

- 무상태라는 특성 덕분에 동일한 서버를 여러개로 확장 가능 (Scale-out)

 

2. 비연결성 (Connectionless) : 서버와 클라이언트는 연결되어있지 않음. 서버 입장에서 매번 새로운 요청임.

- 비연결성으로 인해 최소한의 서버 자원으로 서버를 유지할 수 있게 함

- 그러나 각 사용자별 요청이 잦은 서비스의 경우 이러한 비연결성은 비효율적

 

---

쿠키 

- 무상태 및 비 연결성이라는 http 통신의 특징에도 불구하고 마치 서버가 클라이언트의 인증 상태를 기억하는 것처럼 구현할 수 있는 수단으로 사용할 수 있음.

- 쿠키란 브라우저에 저장되는 텍스트 파일이며 key-value 형태로 저장됨.

- 서버에 특정 API 를 요청했을 때, 서버가 응답시 header 안에 set-cookie 속성으로 쿠키 정보를 담아주면 응답을 받은 브라우저는 쿠키를 브라우저에 자동으로 저장. 확인하는 법 : (개발자도구 -> 애플리케이션 -> 저장용량 -> 쿠키)

- 서버에 http 요청을 할 때마다 브라우저에 저장되어 있는 자동으로 서버에 보내진다.

(단, 동일한 Origin 또는 CORS 를 허용하는 Origin 에만 쿠키를 보낸다. ex) 유튜브 서버에서 받은 쿠키는 유튜브 이용시에만 주고 받을 수 있음)

 

Origin : 출처(origin) 란 protocol + host + port

CORS :

- Cross Origin Resource Sharing 으로, 다른 출처에 리소스 요청하는 것을 허용하는 정책

- 브라우저는 보안상의 이유로 기본적으로 Same Origin Policy (SOP) 를 원칙으로 하나 서버와 클라이언트 각각 CORS 설정을 통해 상호합의 된 웹사이트는 예외적으로 서로 다른 출처임에도 API 요청이 가능하다.