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. 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. 로그인 화면 작성 위한 파일 및 로고 준비 auth 파일 안에 authForm.js, authLogo.js 파일을 만들자. authLogo.js 에서 로고 이미지를 가져와 쓸 건데 로고 이미지를 보관하기 위해 /app 안에 assets 라는 폴더를 만들고 그 안에 imgs라는 폴더를 만들자. 이 안에 다운받은 로고 파일을 넣으면 된다. 변화된 디렉토리 구조 ├─ app │ ├─ assets │ │ └─ imgs │ │ ├─ winthiary_login_logo.png │ │ └─ winthiary_login_logo@2x.png │ ├─ components │ │ ├─ auth │ │ │ ├─ authForm.js │ │ │ ├─ authLogo.js │ │ │ └─ index.js │ │ ├─ d..

1. 새 프로젝트 생성 및 라이브러리 설치 react-native init [project-name] npm install --save axios@0.18.0 react-redux@6.0.1 redux@4.0.1 redux-promise@0.6.0 axio - promise API 를 활용하는 http 비동기 통신 라이브러리, 백엔드를 다룰 예정으로 필요 react-redux - react, redux UI binding redux - 사용 redux-promise - 미들웨어 사용 위해 필요 npm install @react-navigation/native navigation 설치 npm install react-native-gesture-handler navigation 관련 dependency 설치..

1. Redux란 Redux - 애플리케이션 상태(state)를 용이하게 관리하기 위한 프레임워크(오픈소스 JavaScript 라이브러리) react나 react native에서 제공해주는 내부 기술이 아니라 html, angular JS, jQuery 등 과도 사용할 수 있지만 컴포넌트를 많이 다뤄야 하는 React Native와 상호성이 가장 좋다. 또한 시너지 효과를 낼 수 있어 React, React Native 개발자들은 Redux와 함께 개발하고 있다. state의 까다로운 관리, state 접근, 프로젝트 규모에 따른 컴포넌트 구조의 복잡성 등의 문제가 있는 걸 basic 강의에서 이미 많이 느꼈을 ㅓ것이다. 이럴 때 모든 컴포넌트들이 state를 쉽게 공유하고 관리도 쉽게 만들어주고 상태 ..