[ReactNative Instagram clone #1_소개 ( redux / FireBase]

1) Instagrame Clone 코딩

-> Youtube에서 좋은 강의를 발견하여 강의를 따라하면서 Instagrame 클론코딩을 진행하려고 한다. 해당 강의는 Youtube와 githup에 올라와 있는 코드를 보면서 따라했으며, 강의 내용에서 Firebase 버전이 변경되는 부분은 새로운 버전에 맞게 수정하면서 진행하였고 편의를 위해서 코드를 변경한 부분도 있었다.

https://www.youtube.com/watch?v=1hPgQWbWmEk&t=13732s 

 

https://github.com/SimCoderYoutube/InstagramClone

GitHub - SimCoderYoutube/InstagramClone: Instagram Clone React Native Tutorial 2021 👨‍💻 I'll show you how you can do th

 

2) Build up 

-> 강의에서 사용되는 패키지로는 ReactNative (=expo CLi) , Firebase FireStore , Firebase Storage, Redux 등이 있다.

-> 크게 변경된 내용으로는 아래와 같다

 1)  Firebase V8 --> Firebase V9 : 강의에서는 Fibase V8의 문법을 사용하는데 현재는 V9가 나와있으므로 Clone 시에는 v9 문법을 사용하였다. 문법자체가 변경이 된 부분이 좀많아서 같은 기능을 수행하는 데 다른 문법을 사용하게 되서 공식문서를 보면서 많이 헤멧다 ㅠ 

 

2) React component 형태 중 Class형과 함수형이 있는데 해당강의에서는 Class형과 함수형을 같이 쓰고 있으며, 내 생각에는 Class형이 좀 더 많이 사용한 것 같았다. 그래서 강의에서 나오는 Class형 문법을 함수형으로 변경하여 모든 컴포넌트들을 함수형으로 사용하였다.

 

3) Redux에서도 useSelector와 useDispatch의 hook을 사용하여 강의에 나오는 Connect / mapStateToProps / mapDispatchToProps를 사용하지 않고, hook으로 state를 변경하여 사용하였다. 

 

4) 해당강의에서는 서버는 Firebase를 사용하고 FireStore와 Storeage를 사용하는데, FireStore에서의 구조를 강의를 따라하면서 편한쪽으로 변경하였다. 추가적으로 각 기능을 구현한 것으로 디자인은 따로 에쁘게 꾸미지 않았기 때문에 예쁜 UI를 보려면 추가적인 코드 수정이 필요하다.

 

아래의 링크는 강의를 따라하면서 만든 git-hup이다.

https://github.com/leeminq1/kestargram

GitHub - leeminq1/kestargram

 

3) 구현기능

-> 구현 기능은 유튜브 강의에서 구현한 모든 것을 동일하게 구현하였으며, 각 기능으로는 아래와 같다. 

 

1) 유저 인증 : Auth System With Firebase and React Native

2) redux 상태 관리 : Save Data Using Firebase And Redux

3) ReactNavigation : Handling Navigation on React Native

4) 카메라/ 갤러리 사용 : Using Camera And Image Gallery With React Native

5) 유저 프로필 : Displaying User Profile With Firebase Firestore

6) 유저 검색 : Search User By Similar Name with Firebase Firestore

7) Follow 기능: Follow System Using Firestore And React Native

8) Post Feed 기능: Post Feed System With Firebase and React Native

9) 로그아웃 기능: Logout Firebase Auth And Redux React Native

11) 포스트 comment 기능 : Adding User Comments To Posts W/ Firebase Firestore

11) Like 기능 : Like System Using Firestore