2024.04 ~ 06

프론트엔드 개발자 앱개발

<aside> <img src="/icons/arrow-northeast_gray.svg" alt="/icons/arrow-northeast_gray.svg" width="40px" /> 보러가기

</aside>

프로젝트 개요

• 프로젝트 목표: 사용자의 현재 위치를 기반으로 근처의 식당과 메뉴를 랜덤으로 추천하는 모바일 애플리케이션을 개발하여, 사용자가 새로운 식당을 발견할 수 있는 흥미로운 경험을 제공하는 것이 목표였습니다. Kakao API와 랜덤 알고리즘을 통해 사용자에게 다양한 선택지를 제공하고, 간단한 UI/UX로 편리한 접근을 할 수 있도록 최적화했습니다.
• 프로젝트 진행: 앱 전체를 설계 및 개발했으며, 기획, 개발, 테스트에 이르기까지 모든 단계를 주도적으로 수행했습니다. Kakao API를 통해 실시간으로 식당 정보를 받아오는 기능을 구현하였고, Zustand를 사용해 앱의 전역 상태 관리 및 최적화를 이루었습니다. 리액트 네이티브는 처음 사용해보는 기술이지만, 리액트와 매우 유사하여 프로젝트를 진행하는데 큰 어려움은 없었습니다.
• 주요 기능:
  • 현재 위치 기반으로 랜덤 식당 및 메뉴 추천
  • Kakao API를 통한 실시간 데이터 처리
  • 사용자 맞춤형 랜덤 알고리즘 구현
  • 전역 상태 관리를 통한 효율적인 데이터 흐름
  • Jest와 Storybook을 사용한 테스트 주도 개발 (TDD)

기여 내용

• 전체 앱 기획 및 설계:
  • 전체 애플리케이션 기획 및 구조 설계
  • React Native + Expo + EAS 환경 설정 및 개발 환경 구축 및 문서 작성
  • 앱의 기본적인 UI/UX 디자인을 Figma를 사용해 설계
• 랜덤 추천 알고리즘 개발:
  • Kakao API를 활용하여 사용자의 위치 기반 데이터를 수집
  • 랜덤 알고리즘을 통해 식당과 메뉴 추천
• 상태 관리:
  • Zustand 라이브러리를 사용하여 전역 상태 관리 구현
  • Context API를 대체해 더 간결한 상태 관리 로직 작성
• 테스트 주도 개발(TDD):
  • Jest와 Storybook을 활용해 테스트 주도 개발 환경을 구축
  • 단위 테스트 및 통합 테스트를 통해 애플리케이션의 신뢰성을 강화

문제 해결

• 위치 기반 데이터 수집: 앱 실행 시 사용자 위치 데이터를 정확히 가져오고 Kakao API로 실시간 식당 목록을 업데이트했습니다. 비동기 요청 안정성을 위해 API 요청 큐와 네트워크 예외 처리를 도입해 데이터를 안정적으로 수집했습니다.
• 랜덤 추천 최적화: Kakao API 데이터를 필터링하고 추천 추적 로직을 추가해 중복 추천을 방지하고 다양한 선택지를 제공했습니다.
• 효율적인 상태 관리: 초기에는 Context API를 사용했으나, 데이터 흐름 복잡성으로 인해 Zustand로 전환하여 전역 상태를 간결하게 관리하고 앱 성능을 최적화했습니다.
• 앱 성능 개선: 반복적 식당 추천 과정에서 발생한 메모리 누수와 성능 저하 문제를 해결하기 위해 불필요한 렌더링을 방지하고 캐싱을 도입해 API 호출을 최소화하며 서버 부하를 줄였습니다.

주요 기술 스택

주요 기능 시연