[인스타그램 클론코딩] 앱 회원가입 구조

인스타그램 클론코딩 웹과 달리 앱은 로그인, 회원가입, 인증코드 확인 화면이 각각 스택 네비게이션의 스크린으로 구성되어 있습니다. 그래서 인스타그램 클론코딩 웹보다는 코드 보기가 더 편합니다.

키보드가 나타날 때 컴포넌트들을 위로 올리는 방법은 있지만 그것이 중요한 것은 아니기 때문에 구현하지는 않았습니다.

 

로그인, 회원가입, 인증코드 확인 화면을 각각의 스크린으로 분리한 이유는 무엇인가요?

웹처럼 한 개의 화면에서 플래그(action)를 사용해 3종류의 화면을 표시하는 경우, 안드로이드 앱에서는 뒤로가기 버튼 한 번에 앱이 종료될 수 있기 때문입니다.

예를 들어, 회원 가입중에 소셜 로그인으로 전환하기 위해 뒤로가기 버튼을 누른 경우, 앱이 종료됩니다. 이 경우엔 회원가입 화면에서 뒤로가기 버튼을 누르면 이전 화면인 로그인 화면으로 이동하는 것이 더 좋은 구조라고 생각합니다.

스크린

Login	Signup	Confirm

회원가입부터 이메일 인증까지 한 번에 하는 경우

Login → (Signup → Confirm) → Login

Signup 스크린에서 Confirm 스크린으로 넘어갈 때는 스택을 쌓는 것(push)이 아니라 스크린을 교체(replace)해 줍니다.

Confirm 스크린에서 인증이 완료되면, navigation.goBack() 메소드로 login 스크린으로 이동하기 위해서 입니다.

회원가입 후 이메일 인증을 나중에 하는 경우 

Login → Confirm → Login

Confirm 스크린에서 Login 스크린으로 이동할 때

Login 스크린에 userName과 패스워드를 전달해 주어야 합니다.

위의 동영상 45초에서 인증을 완료했을 때 Login 스린으로 넘어가면 userName과 패스워드가 입력되어 바로 로그인하는 것을 확인할 수 있습니다.

패스워드가 안보이는 것은 아이폰 녹화에서 자동으로 가려주기 때문입니다.