이번 1차 프로젝트에서 구현했던
login에 대해서 기술해보고자 한다
Login 개념 목표
-
브라우저에서 로그인 관리를 할수있다
-
프론트와 백엔드의 통신을 구체적으로 알수있다.
-
api 호출 테스트를 해볼수있다
-
access token 과 JWT의 개념을 이해하고 말로 설명할수있다
-
access token 을 왜 사용해야하는지 알고, 프론트에서 어떻게 관리하는지 알아보자
먼저 HTTP 프로토콜에대해서 알아야한다 !
HTTP 프로토콜 특징으로는 상태가 없는(stateless) 프로토콜이다
상태가 없다라는 말은 데이터를 주고 받기 위한 각각의 데이터 요청이 서로 독립적으로 관리가 된다는 말입니다.
좀 더 쉽게 말해서 이전 데이터 요청과 다음 데이터 요청이 서로 관련이 없다는 뜻이다.
이러한 특징 떄문에 서버는 세션과 같은 별도의 추가 정보를 관리하지 않아도 되고,
다수의 요청 처리 및 서버의 부하를 줄일 수 있는 성능 상의 이점이 생긴다.
그래서 내가 유저인지 알수있도록 어떠한 값을 통해 서버와 통신해야하는데 그부분이 바로
access token 이다
access token 은
이런 알수 없는 문자로 만들어져있다.
순서를 보면
이렇게 순서가된다
프론트엔드는 백엔드에서 받은 jwt를 저장하고있고 이것을 다음 통신때 넘겨주어야 하는데 그래야만
지금 유저가 누구인지 알수있기 때문이다.
어디에 저장해야하나 ?
local storage = 해당 도메인에 저장하고 싶을때
session stoage = 해당 도메인의,한 세션에서만 저장하고싶을때,창을닫으면 data가 사라진다.
cookie = 해당 도메인에 날짜를 설정하고 그 때까지만 저장하고 싶을때
총 3개로 나뉜다
로그인 유지방법에 따라 사이트 특성에 따라 저장하는 방법이 달라진다.
로그인하고 어떻게 저장해야하는지 까지 설정했는데
내 페이지 에서 내 유저 정보를 서버에 어떻게 요청을 보낼것인가 ?
my page 페이지를 요청하면 저장되어있는 토큰을 서버로 보내게된다
이후 백엔드에서는 토큰을 받고 일치하는 내용을 프론트로 다시 전달해 주는것이다.
이렇게 저장되어있는 토큰으로 유저를 확인하고 필요한 정보를 계속 주고 받게되어진다
필요한 정보를 주고받는 부분이 fetch 함수인데 요청한후 JSON 파일을 파싱해서
state 값을 저장한다음 다시 확인하고 필요한 정보를 다시 서버로 보내는 통신을통해
로그인 접속을 유지할수있다.
마치며
로그인을 실제 구현해보니까, 위 글보다 훨씬 어려운 부분들이 많았다.
특히 fetch 하는 부분에서 오류가 많이 났고
실제 데이터를 받을때에도 백엔드와 약속된 형식대로 받아야하기때문에
매칭을 잘 시켜야한다.
아직은 익숙하지않은 로그인
그래도 한번 만들어보았으니 다음 부터는 좀 더 마무리를 잘지어보도록하자 !!
