이번에는 Session 대한 개념을
스프린트를 통해 복습하려고 한다.

내가 복습하려고 쓰는 글이기에
나만 이해할 수 있을 글이 될 것 같다.

그리고, 스프린트 과제에는 대부분의 기본 뼈대 파일과 코드가 작성되어 있다.
그래서 과정이 상세하지 않을 수도 있음!!
일단 나는 내가 작성한 부분만 복습할 뿐..

cookie 인증 방식 vs session 인증 방식

세션과 그냥 쿠키는 어떻게 다를까?

앞서 배운 쿠키 인증 방식은 클라이언트에 정보를 저장하는 했다면
세션은 서버에 데이터를 저장(각각의 세션 객체에 해당하는 인증정보를 저장하는 로직이 필요)하고 쿠키에는 데이터의 아이디만 암호화해서 저장한다.

클라이언트가 서버에 요청을 하면 서버는 데이터베이스에 정보를 저장한 후
세션 아이디를 서버에 준다.
그러면 서버는 세션 아이디를 암호화 하여 쿠키에 담아 클라이언트한테 넘겨준다.

유저는 이후 작업에서 쿠키에 있는 세션 아이디를 이용한다.
그러면 서버와 데이터베이스는 이 세션 아이디를 확인하여 데이터를 주고 받는다.

그럼 우리는 쿠키에 담긴 세션 아이디와, 해당 아이디와 일치하는 정보가 세션 객체에 있는지 확인해야 한다.

또한 세션은 서버에서 세션을 파괴하는 과정이 반드시 필요하다.

express-session

세션을 대신 관리해주는 ‘express-session’ 이라는 모듈이 존재한다.
req.session에 값이 담김!! 요거를 이용하자.

Session 기본 코드 작성

Session도 똑같이 cookie 옵션을 정해주고, cors를 정해줘야 한다.
하지만 우리는 위에서 express-session을 이용하기로 했다.
그러면 어떻게 하냐?

위 사진처럼 session 메소드를 이용하면 된다. 그러면 모두에게 적용가능!

Sever Session Login 기본 코드 작성

로그인 부분을 작성했다.

express.session을 사용해서 session 객체가 생겼고, 그곳에 유저 정보를 담아 주었다. 형식은 쿠키와 비슷하다.

여기서 save() 부분이 없다면, session store에 저장하는 일보다 redirect가 먼저 실행되어 로그인 상태가 유지가 안되는 버그(?)가 발생할 수 있다.

세션 객체에 무엇이 담겼는지 보자! 세션 객체 안에 쿠키와, userId가 담긴 것을 볼 수 있다.
쿠키의 옵션은 위에서 적어줌 !!

Sever Session UserInfo 기본 코드 작성

그러면 로그인 후 우리는 어떤 걸 해야 할까?

위에서 우리는 세션 객채에 유저 정보가 담긴 것을 확인 할 수 있었다.

만약 유저정보가 확인되면 그 정보를 보내주자.
간단한 코드라 따로 주석은 달지 않았다.

Sever Session Logout 기본 코드 작성

대부분의 코드가 쿠키 때 작성한 것과 매우 유사하다.
다른 점은 session은 express를 이용하고,
거기서 생긴 session 객체를 이용한다는 점이다.

요렇게 적어주면 로그아웃 부분도 끝이다.
꼭 destroy를 해주자!
이러면 서버 작성 끝!

Client Session Login 기본 코드 작성

쿠키 때 썼던 로그인 부분과 매우 똑같다.
유저는 로그인을 통해 서버에 자신의 아이디와 패스워드를 보낸다.

그럼 서버는 받은 데이터와 데이터베이스의 정보가 같으면
세션 객체에 userId를 넣고 다시 유저에게 정보를 제공한다.

요렇게 썼다.

유저는 겟요청까지 해서 받아온 데이터이다.
Post를 보내고 난 후는 아직 데이터를 못 받았지만,
서버에서 인증을 거쳐 통과하면

Get요청을 했을 때 데이터가 저렇게 담긴다.

Client Session Mypage 기본 코드 작성

쿠키 때 썼던 mypage 부분과 매우 똑같다.

위에 처럼 로그아웃을 보내면 된다.
그러면 서버에서 세션 아이디를 확인 후
디스트로이 메소드를 이용해 세션을 지워준다!

요것처럼 로그인 후 데이터를 리액트로 보여줄 수도 있다.

스프린트 복습 끝!