Mobile App Dev Setup
React-Native
리액트의 접근방법을 모바일로 확장한 Facebook의 오픈소스 프로젝트이다.
javascript로 코딩한 React의 컴포넌트는 React Native 플랫폼을 거쳐 iOS, android Native 코드로 각각 변환된다.
개발방법으로는 크게 2가지 방법이 있다.
- react-native-cli
- expo-cli
각각 장단점이 있다.
expo-cli
장점
- 일단 배포하기에 너무 편하다.
- 매번 배포할 때 마다 검사받아야 하는 것이 아니다.
- expo서버에 위치하는 코드만 바꾸어 주면 되 기 때문이다.
- update와 배포하는데 훨씬 편하다.
- ios 없이도 expo client와 통해 iphone test 가능 (mac os에서만 가능)
- android studio x-code 없이도 자기가 사용하는 툴을 갖고 개발 가능
- 빠르고 간단하게 프로젝트 설치 가능
단점
- java, kotlin, object-c, swift로 추가 작성못하고 이 것으로 작성된 원시 모듈 사용못한
- github에 있는 라이브러리 잘 보고 사용하기
- expo 클라이언트에서는 잘되지만 다른 곳에서는 잘 안될 수 있음
react-native-cli
장점
- expo-cli의 단점이 곧 이 아이의 장점이다. 커스텀 네이티브 모듈이 필요하면 이 것을 쓰면 된다.
단점
- 설정하는 데 오랜 시간 걸림
- 배포, 업데이트 하는데에 오랜시간 걸림
그러나 경험 해보지 않고서는 장단점을 체감하지 못한다는 생각에 둘다 경험해보기로 한다.
여기서는 expo-cli 경험을 우선 한다.
expo
Expo는 순수하게 자바스크립트와 React로만 개발하고 네이티브 개발은 미리 제공된 모듈만 사용하도록 SDK와 빌드 환경을 제공해주는 형태이다.
Expo는 같은 코드베이스로부로부터 네이티브 iOS, 안드로이드, 웹앱을 빨리 빌드, 배포, 반복할 수 있게 도와주는 툴이다.
expo-cli 를 통해서 expo 환경을 구축한다.
node 버전에 따라 지원되지 않는 버전이 있으니 참고하여 upgrade or downgrade하여 작업해야한다.
expo init (project name)Preloading
앱에서 사용될 이미지나 font들을 미리 로딩하여 사용자가 페이지를 볼 때 반응성이 더 나아지도록 앱 실행 시 미리 로딩하는 것을 말한다.
Cache
이전에 사용했던 앱을 다시 열게 되면 사용했던 정보들이 그대로 남아있는 것을 볼 수 있다.(웹과 다르게) 또는 한참을 로딩하여 그 데이터를 가져오는 것을 기다리는 것은 매우 비효율적이다.
앱에서는 데이터를 백업하여 디바이스에 저장해 사용한다. 캐쉬를 이용해 이것을 해결한다.
여기서는 apollo-cache-persist lib을 이용해 구현한다.
(유저가 인터넷에서 가져온 모든 것들을 디바이스에 저장한다.)
예를 들어, 인스타그램 앱을 실행했을 때 예전 콘텐츠들은 로딩하는데 몇 초가 걸리고 그 후에 새로운 콘텐츠를 보여준다. 달리말하면 디바이스에 저장된 정보들을 로딩하고 그 후에 API를 통해 새로운 콘텐츠를 가져와 업데이트 해주는 형태이다.
Lib
- styled-components
- react-navigation
- apollo-boost
- graphql
- react-apollo-hooks
- expo-vector-icons
- uploading : return 했을 때 앱이 계속해서 로딩하는 component
- @react-native-community/async-storage: app storage
- apollo-cache-persist:
- apollo-cache-inmemory: cache in apollo
