안녕하십니까. 인스타그램 클론코딩 두번하고 파베8버전으로 되어 9버전으로 제작을 기획한 이종성입니다.
코드는 따라는게 대부분이겠지만 제생각도 조금 가미하여 제작하겠습니다.
* 기본셋팅 및 버전
- Visual Studio Code v1.63.2
- nodeJS 14.16
- expo 5.0.1
- react-native 0.66.4
- firebase 9.6.2
- expo 44.0.4
- @react-navigation/native 6.0.6
- @react-navigation/native-stack 6.2.5
- react-native-safe-area-context
- formik 2.2.9
- yup 0.32.11
나머지 라이브러리들은 쓰면서 추가하겠습니다.
엡만들기
- 프로젝트 생성을 위한 폴더를 만들고 vsCode터미널을 연다.
- 터미널에서 "npm install --global expo-cli" 명령어를 입력
- "expo init myinstagramclone" 를 입력하고 난 기본적인 blank 첫번째 문항을 선택하였다. 사유는 더 찾아봐야겠다.
- "cd myinstagramclone"으로 만든프로그램으로 이동 후 "expo start 입력"하면?
이런 화면이 나오고 Run in web browser 를 클릭하면
실행된다.
이제 redux, expo, firebase 를 설치해보겠습니다.
터미널에 "npm i redux expo firebase" 를 입력하고 기다립니다.
로그인화면 만들기
캡쳐할려고했는데 정책상 안된다고 한다.ㅠㅠ
그럼 일단 인스타그램 로고부터 다운로드 받고
띄어보도록 하겠습니다.
assets 폴더에 인스타그램 로고를 받고 로고를 만들어봅시다.
간단하게 위와 같이 App.js 파일에 입력하면
이 밑 부분에 이제 이메일이랑 패스워드 입력하는 인풋을 입력해봅시다.
리엑트는 컴포넌트를 이용해서 사용성을 높이는 작업을 합니다?
이제 엡에서 임포트할 Screens파일과 components파일을 만들고 로그인 화면을 만들어봅시다.
기능적인것은 빼고 기본 뼈대만 새웠습니다.
이제 도움말 페이지와 가입페이지를 만들어야겠죠
네비게이션을 적용하여 만들었습니다.
여기에 네이게이션을 적용하였습니다.
이제 Signup페이지로 이동하는 onPress를 작성해줍니다.
마지막으로 Signup페이지는 Login페이지와 비슷하여 간략하게 생략했습니다.
이제 파이어베이스를 붙여 회원가입과 로그인을 붙여보겠습니다.
Firebase
Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다.
firebase.google.com
파이어베이스엡을 만들어보자
엡 이름은 본인이 편하게 정하면 됩니다.
에널리틱스 가 무었인가... 난 무엇을 설치할 때 모르면 그냥 계속 누르라고 배웠다...ㅋ 계속 클릭
본인 계정 선택하고 프로젝트 만들기
기다리자....
프로젝트 설정에 들어가 웹을 만들자.
여기에는 내가 프로젝트 만들었던 이름을 넣어야된다.
만들고 그대로 App.js에 붙여넣는다.
오늘의 정리는 여기까지!
'인스타그램클론코딩' 카테고리의 다른 글
| 인스타그램클론코딩(react-native, firebase, expo, Formik, Yup) 02 (0) | 2022.01.13 |
|---|