Final Project - (9) 2020_0206

안좋은 소식이 있다. 팀에서 같이 프론트를 맡으신 분이 개인적인 사정으로 프로젝트를 못하게 되셨다ㅠㅠ

그래서 팀원분이 맡고 계셨던 로그인 스크린에 관련된 부분을 내가 가져와서 만들게 되었다.

 

우선 로그인 스크린의 경우 다른 스크린들과는 다르게 로그인 후에는 뒤로 가기 등을 통해 다시 로그인 페이지로 가지면 안되기 때문에 stack navigator가 아닌 switch navigator를 사용해 만들려고 한다. 

import { createSwitchNavigator, createAppContainer } from 'react-navigation';

스위치 네비게이터의 경우 탭 네비게이터 처럼 화면 간 이동 시 스크린이 쌓이지 않기 때문에 로그인 후에는 이전에 만들어 두었던 tab nav 스크린으로 navigate 한 후에 뒤로가기 등으로 다시 로그인 화면으로 이동이 되지 않도록 만들 것이다.

 

스위치 네비게이터에는 크게 3가지 스크린을 만들었는데 다음과 같다.

- AuthLoading 스크린 (initial route)

- Auth 스크린

- App 스크린

 

app을 구동시키면 AuthLoading 스크린을 보여주게 되는데 여기서는 따로 컴포넌트 등을 렌더링 하는 기능은 없다.

하지만 여기서 중요한 기능이 있다.

 

먼저 우리 프로젝트는 크게 2가지 로그인을 생각하고 있다. 하나는 그냥 일반적인 로그인이고 하나는 OAuth를 활용한 다른 api를 통한 로그인인데 OAuth는 현재 어드밴스드이기 때문에 기본적인 로그인부터 구현하려고 한다.

 

이때 로그인 인증 및 로그인 유지에 활용할 것이 JWT 토큰이다. 

 

일반 로그인을 하면 서버에서 JWT 토큰을 응답으로 보내주게 된다. 그래서 응답으로 받은 토큰을 클라이언트에서 가지고 있어야 하는데 react-native의 async storage를 활용하여 응답으로 받은 토큰을 async storage에 저장을 하게된다.

 

그리고 이렇게 저장한 토큰을 아까 위에서 AuthLoading에 진입시에 componentDidMount를 해서 async storage에 토큰이 있는지 확인을 하고 만약 토큰이 storage에 있다면 App 스크린으로 navigate, 토큰이 없다면 Auth 스크린으로 navigate하게 되어있다.

위에서 말한 중요한 기능이 이것이다.

 

이 기능을 통해 만약 로그아웃을 하거나 또는 토큰이 만료되지 않았다면 로그인 절차 없이 계속 앱을 로그인이 유지된 상태로 사용할 수 있는 것이다. 그리고 로그인을 한적이 없다면 (즉 토큰이 없다면 ) Auth 스크린으로 가게되어서 로그인 절차를 하게 되는 것이다.

처음 app 구동 시 토큰이 없는 경우 switch navigator를 통해 이동한 Auth screen stack navigator

토큰이 있는 경우 App screen tab navigator로 이동

위에서 componentDidMount는 react hook을 활용하기 때문에 useEffect를 통해 storage를 확인하게 하였다

 

async storage는 이름에서 알 수 있듯이 async, await를 활용하여 웹에서 local storage와 거의 비슷한 method를 활용해서 storage에 넣고 확인할 수 있게 만들었다. 그리고 컴포넌트마다 async 함수를 붙이기 번거로워서 async helper를 만들어서 따로 method를 분리해서 필요할 때 import해서 쓰도록 만들었다.

 

Auth 스크린은 stack navigator를 다시 활용하여 로그인 스크린 - 핸드폰 인증 관련 스크린 - 회원가입 스크린을 구성하여 스위치 네비게이터에 의해서 Auth 스크린으로 올 경우 저 스크린들을 다시 navigate 할 수 있게 만들었다.

 

화면에서 각각의 컴포넌트는 react native elements와 expo vector icon을 이용하여 대강 만들어주었다.