1. Firebase 로그인 연동 로그인도 회원가입과 동일하게 POST 방식을 쓰고 request payload, response payload 를 동일하게 가진다. 우선 firebase 사이트에서 sign in end point를 가져와 misc.js에 작성하자. 이전 회원가입에서 쓴 코드를 똑같이 복붙해주고 UP만 IN으로 바꿔주자. // /app/utils/misc.js export const APIKEY = `AIzaSyC-D7xBF_pDDyJZSb0DpC6W-FUJu_UToL8`; export const SIGNUP = `https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=${APIKEY}`; export const SIGNIN = `h..

1. Firebase 프로젝트 생성 우선 firebase 웹사이트로 들어가자. https://firebase.google.com/ Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 로그인을 진행해주고 시작하기를 누르고 프로젝트 추가를 눌러 새 firebase 프로젝트를 생성해준다. 프로젝트에 들어가면 왼쪽 상단의 햄버거 버튼을 눌러 인증 메뉴를 찾아 눌러준다. 그리고 sign-in method를 들어가 로그인 방법을 설정해준다. 이메일/비밀번호를 사용할 것이므로 이걸 설정해주자. 그리고 프로젝트 개요 메뉴를 찾아 태그 모양 버튼을 눌러주면 앱을 등록할 수 있다. 그리고 이번엔 오른쪽 ..

1. Redux를 통한 로그인 로직과 흐름 검증 - Redux redux를 사용해서 백엔드가 구현되었을 때의 로그인 로직과 데이터를 다뤄보자! /app/store/action에 user_actions.js 파일을 새로 만들자. 여기서 action creator와 action field를 만들어볼건데 action에는 type 필드가 필수적으로 들어가야 했다. 우선 types.js에서 타입을 선언해주자. action creator는 action을 반환했다. 자세한 걸 아래 코드를 보자. payload의 token을 정의할 건데 이 토큰은 앱을 껐다가 다시 들어갈 때 로그인을 다시 하지 않아도 될 수 있도록 로그인 상태를 로컬스토리지에 저장할 필요가 있다. 이제 reducer를 보자. 이전에 만든 sample..

1. 로그인/등록 버튼 이벤트 생성 로그인의 버튼 만들기 전 선행되어야 하는 게 로그인 검증 validation이다. 로그인 검증 프로세스를 위한 파일을 하나 만들 건데 /app/utils/forms 에 validationRules.js 를 만들자. 이 파일에서 검증 항목과 검증 방법을 구현할 것이다. 파일의 반환은 true or false 인데 문제가 없다면 true, 하나라도 문제가 있다면 false가 반환될 것이다. 그리고 authForm.js에서는 반환된 값을 이용해 버튼을 동작시킬지 오류를 발생시킬지 구현할 것이다. 현재 백엔드와 연결되어 있지 않아 로컬에서 확인할 건데 이건 디비거를 활용하자. 로그인 화면, 회원가입 화면 따라서 접근 개체가 달라진다. 로그인은 email, password만 다..

1. 로그인을 위한 Validation Framework 작성 로그인의 버튼 만들기 전 선행되어야 하는 게 로그인 검증 validation이다. 로그인 검증 프로세스를 위한 파일을 하나 만들 건데 /app/utils/forms 에 validationRules.js 를 만들자. 이 파일에서 검증 항목과 검증 방법을 구현할 것이다. 파일의 반환은 true or false 인데 문제가 없다면 true, 하나라도 문제가 있다면 false가 반환될 것이다. 그리고 authForm.js에서는 반환된 값을 이용해 버튼을 동작시킬지 오류를 발생시킬지 구현할 것이다. // /app/utils/form/validationRules.js const validation = (value, rules, form) => { let..

1. 로그인 화면 버튼 및 이벤트 생성 선행되어야 할 사전 작업이 있다. 루트 디렉토리에 있는 routes.js를 보면 isLoggedIn 이 true인지 false인지에 따라 화면이 다르게 보인다. 그런데 로그인이 안 된 상태에서도 다이어리와 뉴스탭이 있는 메인 화면을 보여주고자 한다. 이건 비회원인 상태에서도 메인화면을 보여주기 위함인데 다이어리 기능은 제한을 두고 뉴스탭만 보여주고자 한다. 그래서 isLoggedIn 이 false일 때 리턴되는 부분에도 메인화면이 보이도록 작업하자. 버튼을 눌러도 아무런 반응을 하지 않는데 이건 onPress를 이용한 이벤트를 발생시키지 않아서이다. 비회원 버튼을 눌렀을 때 메인화면으로 이동할 수 있게끔 작업을 해보자. 구현한 게 화면에 잘 나오는 건 import ..