쿠키는 데이터를 클라이언트에 저장하는 것인 반면에 세션은 데이터를 서버 저장하는 방식이다.

• 사용자가 인증에 성공한 상태를 세션이라고 하며, 서버는 일종의 저장소에 세션을 저장한다. (주로 in-memory, 또는 세션 스토어)
• 세션이 만들어지면, 각 세션을 구분할 수 있는 세션 아이디도 만들어지는데, 보통 클라이언트에 세션 성공을 증명할 수단으로써 세션 아이디를 전달한다.
• 이때 웹사이트에서 로그인을 유지하기 위한 수단으로 쿠키를 사용한다. 쿠키에는 서버에서 발급한 세션 아이디를 저장한다.
• 쿠키를 통한 유효한 세션 아이디가 서버에 전달되고, 세션 스토어에 해당 세션이 존재하면, 서버는 해당 요청에 접근 가능하다고 판단한다. 그러나 쿠키에 셔센 아이디 정보가 없는 경우, 서버는 해당 요청이 인증되지 않았음을 알려준다.

로그아웃

1. 서버의 세션 정보를 삭제해야 한다. ⇒ 서버가 클라이언트의 쿠키를 임의로 삭제할 수는 없다. 대신, set-cookie로 세션 아이디의 키값을 무효한 값으로 갱신한다.
2. 클라이언트의 쿠키를 갱신해야 한다.

아래와 같은 방식으로 세션 아이디를 쿠키에 저장하고, 해당 세션 아이디에 종속되는 고유한 세션 객체를 서버에 저장한다.

시퀄라이즈 된 데이터에 대해서 아래와 같이 findOne 메소드와 where을 이용해 일치하는 데이터를 추출할 수 있다. where은 sql 문의 where과 유사하다고 보면 된다.

세션을 삭제할 경우 아래와 같이 destroy 메소드를 사용한다.

아래 코드를 보고 참고할 문법들이 있다.

우선 이전 리액트 스프린트에서 배운 방식과 다르게

this.state = { key : value } 이런 방식으로 state를 설정할 경우

this.setState( { key : value } ) 와 같은 방식으로 상태 값을 변경할 수 있다.

props 도 마찬가지로 중괄호를 이용한 방식과 다르게 직접적으로 props를 사용하는 방식을 통해 props의 기능을 사용하였다. (props.sth 일때와 this.props.sth 일 때를 구분할 줄 알아야 한다.)

표준 cors 요청은 기본적으로 쿠키를 설정하거나 보낼 수 없다.

프론트에서 axios 요청을 할 때, withCredential 부분을 true로 해서 수동으로 cors 요청에 쿠키값을 넣어줘야 한다.

마찬가지로 서버도 응답헤더에 아래처럼 Access-Control-Allow-Credentials 를 true 로 설정해야 한다.