슈퍼카 소개, Pexels.com API를 활용한 이미지 검색 및 저장

• 개발기간

  • 기획 및 API 결정 : 2일
  • UI 디자인 / 이미지 선별 및 수정 : 2일
  • 기본세팅 및 프로젝트 구조, 라이브러리 설치 : 1일
  • 코드작성 : 2일
  • 테스트 : 1일

• 특징 및 기능

  • UI 커스텀 개발 (UI관련 라이브러리 미사용)
  • 타입스크립트
  • 제스쳐 네비게이션
  • 이미지 뷰어
  • pexels.com API를 통한 실시간 슈퍼 카 이미지 검색
  • 드롭다운 메뉴
  • 글로벌 모달
  • 위치정보 및 지도
  • 디바이스에 이미지 저장 및 관리

• Project Common Dependencies

  

  

  
  
  
  

• 
• Android / iOS

• 
• 슬라이드 네비게이션 : rn-reanimated + PanGetstureHandler
• 터치유형에 따른 반응처리 및 가속도 처리
• Animated progress bar : HOC 형태로 개발

• 
• 두개의 FlatList사용, onScrollMomentsEnd 이벤트로 상호작용
• onEndReached 이벤트로 Pexels.com API 호출, 요청 당 10장 추가, 최대 120장 제한처리
• Redux-saga와 immer.js로 status 관리

• 
• 웹 이미지를 지정한 디바이스 저장소에 다운로드
• 다운로드 완료/실패 Toast 알림
• Android downloadmanager 다운로드 관리

• 
• 글로벌 모달 컴포넌트 개발.
• React-native-svg + RN-reanimated 개발

• 
• mapbox API
• 지정한 위치로의 이동 및 현재 위치 보
• map 컨트롤을 위한 버튼 개발

• 
• 디바이스 라이브러리
• 이미지 crop 처리
• 이미지 배경 처리

• mapbox는 처음 써봐서 삽질을 조금 했는데, 무조건 클래스형 컴포넌트로 개발하는게 정신건강에 좋음.
• mapbox는 제공 정보 및 기능도 많고, 일단 무료라서 큰장점 하지만, 진짜 간단한 프로젝트에 추천함 (큰 프로젝트는 유료 Map API쓰는 것이 정답인듯)
• react-native-reanimated v2 rc.0 좋기는 한데, 버전업을 조금더 하면 더 좋을 듯.
• 덕분에 실기에서는 평균 60fps 보장 될듯.
• 코드 리펙토링
• FlatList 에서 VirtualList 변경 후 성능비교
• 이미지 뷰어 디자인 변경해야 할 듯.
• 차기 프로젝트, 날씨+메모 앱 기획 시작해야 할듯.