리액트 쿼리와 리덕스를 사용해서 로그인 기능을 구현해보고자 합니다.
-
리덕스로는 유저 데이터를 전역적으로 관리할 예정입니다.
로그인, 로그아웃에 따라 isLoggedIn:불린, user:객체 이런 형식으로 데이터를 저장했습니다. -
리액트 쿼리로는 로그인 토큰을 관리하고자 합니다.
엑세스 토큰과 리프레시 토큰 두가지를 프레시한 값인지 스테일한 값인지 구분해서 api가 private인지 public인지 구분해서 작성하고자 합니다.
먼저 리덕스로 유저 데이터를 업데이트 하려고 하는데 문제가 발생했습니다.
유저 데이터는 어디서 오나?
카카오 로그인으로 구현해서 리액트 쿼리로 백엔드에서 토큰을 받아옵니다.
그리고 해당 토큰을 실어서 백앤드로 유저 데이터를 받으면 됩니다.
두 토큰은 엑세스 토큰은 세션 스토리지에 리프레시 토큰은 로컬 스토리지에 받아둘 것입니다.
그럼 먼저 카카오 로그인을 하여 토큰을 받아오는 작업을 해야겠군요!
우리는 카카오로 로그인 기능을 구현하기로 했습니다.
카카오 로그인 기능의 모냥은 다음과 같습니다.
여기서 프론트가 할 일은 인가코드 받기까지인데
로그인 요청해서 제가 지정한 Url로 인가코드를 받아오면 해당 코드를 백엔드로 전달해주는 겁니다.
그럼 백앤드에서 카카오로 토큰을 받고 우리에게 자체적인 토큰을 발급해줍니다.
엑세스와 리프레시를 말이죠.
그럼 저는 그거를 프라이벳한 요청시에 같이 보내주면 됩니다!
카카오에게 우리 유저 검증기능을 맡겼기에 회원가입 뿐만 아니라 매 로그인마다 카카오 검증을 거쳐야 합니다.
그럼 저는 카카오 로그인 버튼을 누름과 동시에 url의 주소를 카카오에서 원하는 주소로 바꿔줘서 접속해줍니다.
그런 다음 유저가 동의하고 카카오로 정보를 넘기게 되면 카카오에서 제가 지정한 url로 토큰과 함께 redirect 해주는 과정을 거칩니다.
저는 근데 이상하게 유저가 해당 리다이랙트 페이지를 보지 않았으면 했습니다.
그래서 저는 리액트 라우터의 로더 기능으로 토큰을 받아서 백엔드로 넘겨주도록 하겠습니다.
여기서 잠깐 리액트 쿼리는 왜 쓸까요?
쿼리 키로 저장된 쿼리 데이터는 프레시와 스테일 둘중 하나의 값을 갖습니다.
리덕스의 데이터의 흐름은 다음과 같습니다.
스토어 => dispatch => 컴포넌트 => 액션 => 리듀서 => 스토어
단방향이며 업데이트시 순수 함수여야 하기에 동기적으로 작동해야합니다.
근데 저는 비동기적인 작업을 필요로 합니다.
