2024.04 ~ 06
프론트엔드 개발자 앱개발
<aside>
<img src="/icons/arrow-northeast_gray.svg" alt="/icons/arrow-northeast_gray.svg" width="40px" /> 보러가기
</aside>
프로젝트 개요
- 개발 인원 : 1명
- 프로젝트 목표:
- 매번 동료들과 점심시간 때 무엇을 먹을지 고민하는게 번거로워서 개발하고자 하였습니다.
- Kakao API와 랜덤 알고리즘을 통해 사용자에게 다양한 선택지를 제공하고, 간단한 UI/UX로 편리한 접근을 할 수 있도록 최적화했습니다.
- 프로젝트 진행:
- 기획, 개발, 테스트 등**,** 프로젝트의 처음부터 끝까지 주도적으로 설계 및 개발했습니다.
- Kakao API를 통해 실시간으로 식당 정보를 받아오는 기능을 구현하였고, Zustand를 사용해 앱의 전역 상태 관리 및 최적화를 이루었습니다.
- 주요 기능:
- 현재 위치 기반으로 랜덤 식당 및 메뉴 추천
- 카테고리별 음식 랜덤 추천
- Kakao API를 통한 실시간 데이터 처리
- 사용자화된 음식점 및 메뉴 리스트 제공
주요 기술 스택
| Frontend |
Deployment |
Additional |
Test |
| React Native |
Expo Application Services |
Kakao API |
Jest |
| TypeScript |
|
|
Storybook |
| Expo |
|
|
|
| Zustand |
|
|
|
기여 내용
-
전체 앱 기획 및 설계:
- 전체 애플리케이션 기획 및 구조 설계
- React Native + Expo + EAS 환경 설정 및 개발 환경 구축 및 문서 작성
-
랜덤 추천 알고리즘 개발:
- Kakao API를 활용하여 사용자의 위치 기반 데이터를 수집
- 랜덤 알고리즘을 통해 식당과 메뉴 추천
-
상태 관리:
- Zustand 라이브러리를 사용하여 전역 상태 관리 구현
- Context API를 대체해 더 간결한 상태 관리 로직 작성
-
테스트 주도 개발(TDD):
- Jest와 Storybook을 활용해 테스트 주도 개발 환경을 구축
- 단위 테스트 및 통합 테스트를 통해 애플리케이션의 신뢰성을 강화
문제 해결
- 위치 기반 데이터 수집: 앱 실행 시 사용자 위치 데이터를 정확히 가져오고 Kakao API로 실시간 식당 목록을 업데이트했습니다. 비동기 요청 안정성을 위해 API 요청 큐와 네트워크 예외 처리를 도입해 데이터를 안정적으로 수집했습니다.
- 랜덤 추천 최적화: Kakao API 데이터를 필터링하고 추천 추적 로직을 추가해 중복 추천을 방지하고 다양한 선택지를 제공했습니다.
- 효율적인 상태 관리: 초기에는 Context API를 사용했으나, 데이터 흐름 복잡성으로 인해 Zustand로 전환하여 전역 상태를 간결하게 관리하고 앱 성능을 최적화했습니다.
- 앱 성능 개선: 반복적 식당 추천 과정에서 발생한 메모리 누수와 성능 저하 문제를 해결하기 위해 불필요한 렌더링을 방지하고 캐싱을 도입해 API 호출을 최소화하며 서버 부하를 줄였습니다.
주요 기능 시연
