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 호출을 최소화하고, 캐싱을 도입해 서버 부하를 줄이며 성능을 개선했습니다.

사용 기술

• 프론트엔드: React Native, Expo, Zustand, TypeScript
• 디자인 툴: Figma