소개

프런트에 ReactNative, 백엔드에 firebase를 사용해 로그인 기능을 만들어 보았기 때문에 기사를 써 보기로 했다.
완성형을 소개할 뿐만 아니라, 실장한 순서로 설명해 갑니다.
Qiita 처음이므로, 이해하기 어려운 것은 큰 눈에 봐 주면 기쁩니다.
점점 의견 부탁드립니다!

만드는 기능과이 기사에 대해

ReactNative에 의한 가입, 로그인 화면

로그인, 로그 아웃과 관련된 화면 전환

Redux를 통한 상태 관리 (ducks 패턴 채택)

Expo의 개발

firebase 인증 기능

이 응용 프로그램의 개발을 처음부터 순서대로 작성하고 싶습니다.
이번에는 개요와 Expo의 초기 화면까지 쓰고 싶습니다.

사용한 라이브러리

Expo

ReactNative

ReactNavigation (화면 전환)

ReactNativeDebugger (디버그)

Redux (state 관리)

redux ducks 패턴

firebase

Firebase Authentication (암호 인증)

디렉토리 구성

root/
  ├ src/
      ├ App.tsx
      ├ store.ts
      ├ Styles.ts
      ├ components/
           ├ Counter.tsx
           ├ Signin.tsx
      ├ containers/
           ├ Counter.ts
           ├ Signin.ts
      ├ modules/
           ├ index.ts
           ├ CounterModule.ts
  ├ node_modules/
  ├ package.json

Expo는 기본적으로 root/App.js를 읽지만 root/src/App.tsx로 이동합니다 (자세한 내용은 다음 번에).

빠진 곳

ReactNavigation

현재 최신 5.x
넷의 정보는 3.x나 4.x의 정보도 섞여 있지만, redux 주위가 꽤 쓰는 방법에 변경이 있어, 주의가 필요

ReactNativeDebugger

이 기사를 참고로
Expo 앱에서 React Native Debugger를 설정하는 방법 [Mac OS용]

위의 기사대로는 잘 움직이지 않았기 때문에 조금 수정했습니다 (자세한 것은 다음 번에)

만들 때 추천

내가이 앱을 만들려고했을 때 Qiita의 기사를 모아 왔고, 조합하면서 만들려고했는데, 버그가 가득하고 꽤 고생했습니다.
결국 공식 문서를 읽으면 해결한 경우가 많기 때문에 영어가 힘들지만 공식 문서를 읽는 것을 추천합니다.
문서에 실려있는 코드를 기반으로 만들면 빠지기 어렵게 진행됩니다.
React 튜토리얼(한국어)
Redux Basic Tutorial
ReactNavigation Fundamentals

Expo 준비

이 기사를 참고로
누구나 앱을 만들 수 있습니다! EXPO에서 react-native 입문

내 기기에서 실행하려면 컴퓨터와 동일한 wifi에 연결해야하는 것 같습니다.

↑ yarn start한 곳의 화면

다음 번

이번에는 Expo에서 개발할 준비를 했습니다. 다음에 ReactNative의 개발을 비롯해 Redux를 도입하고 싶습니다.
Expo+Redux(+firebase)로 로그인 폼② ~Redux 도입~