슈퍼카 소개, Pexels.com API를 활용한 이미지 검색 및 저장
-
개발기간
- 기획 및 API 결정 : 2일
- UI 디자인 / 이미지 선별 및 수정 : 2일
- 기본세팅 및 프로젝트 구조, 라이브러리 설치 : 1일
- 코드작성 : 2일
- 테스트 : 1일
-
특징 및 기능
- UI 커스텀 개발 (UI관련 라이브러리 미사용)
- 타입스크립트
- 제스쳐 네비게이션
- 이미지 뷰어
- pexels.com API를 통한 실시간 슈퍼 카 이미지 검색
- 드롭다운 메뉴
- 글로벌 모달
- 위치정보 및 지도
- 디바이스에 이미지 저장 및 관리
-
Project Common Dependencies
- 슬라이드 네비게이션 : rn-reanimated + PanGetstureHandler
- 터치유형에 따른 반응처리 및 가속도 처리
- Animated progress bar : HOC 형태로 개발
- 두개의 FlatList사용, onScrollMomentsEnd 이벤트로 상호작용
- onEndReached 이벤트로 Pexels.com API 호출, 요청 당 10장 추가, 최대 120장 제한처리
- Redux-saga와 immer.js로 status 관리
- mapbox는 처음 써봐서 삽질을 조금 했는데, 무조건 클래스형 컴포넌트로 개발하는게 정신건강에 좋음.
- mapbox는 제공 정보 및 기능도 많고, 일단 무료라서 큰장점 하지만, 진짜 간단한 프로젝트에 추천함 (큰 프로젝트는 유료 Map API쓰는 것이 정답인듯)
- react-native-reanimated v2 rc.0 좋기는 한데, 버전업을 조금더 하면 더 좋을 듯.
- 덕분에 실기에서는 평균 60fps 보장 될듯.
- 코드 리펙토링
- FlatList 에서 VirtualList 변경 후 성능비교
- 이미지 뷰어 디자인 변경해야 할 듯.
- 차기 프로젝트, 날씨+메모 앱 기획 시작해야 할듯.