로그인 화면 구현

이메일과 패스워드를 입력받아서 로그인을 하는 화면을 만든다.

회원가입과 마찬가지로 formik과 yup 라이브러리를 사용해서 validation을 처리한다.

jwt 토큰 정보 저장

로그인을 성공하면 서버에서 jwt 토큰을 받는다. 그것을 store에 저장하고 redux-persist 모듈을 사용해서 storage에도 저장한다.

redux에 저장하는것은 영구적인 저장소가 아니다. 만일 새로고침하게 되면 store에 저장된 정보는 메모리에 저장된것이기 때문에 모두 없어지게 된다. 따라서 영구적으로 저장하기 위해서는 storage에 저장해야 하는데 redux-persistence 모듈이 그것을 도와준다.

먼저 필요한 모듈을 설치한다. redux-persist가 local storage에 저장하는 모듈이다. jwt-decode는 jwt를 파싱하는데 도움을 주는 라이브러리이다. querystring 은 query parameter를 쉽게 파싱할 수 있도록 도와주는 모듈이다.

redux 폴더에 AuthReducer를 먼저 생성한다.

src/redux/reducers/AuthReducer.js

모든 reducer를 combine하는 allReducers를 생성한다.

src/redux/reducers/index.js

store를 생성한다.

src/redux/store.js

이제 Login에서 로그인이 성공하면 서버에서리턴된 token을 store에 저장한다. setToken이라는 액션 creator를 사용해서 액션을 생성한 다음 액션을 dispatch한다. 그러면 store에 token이 저장되며 redux-persist에 의해서 local storage에도 저장되게 된다.