🍽️ YumYum

✍🏻 서비스 소개

나의 맛집 리스트를 공유하고, 지인이 추천하는 맛집을 저장하는 ‘맛집 공유 SNS’ 입니다.

지도에서 한눈에 쉽게 내 주변 맛집을 보고 친구의 추천 맛집 리스트를 볼 수 있습니다.

서비스 바로가기 (클릭 →)

⛅️ 프로젝트 소개

• GitHub, Figma, Notion, Slack 등 프로젝트 관리 툴을 활용하여, 실무와 유사한 현업 프로세스로 진행하였습니다.
• 심도 깊은 토론을 통한 기술적 의사결정과 적극적인 트러블 슈팅을 통해 끊임없이 서비스를 개선하며 성장하는 개발자 팀입니다.

---

❄️ Stacks

🚗 프로젝트 운영 기간

• 개발기간 : 2023.03.07 ~ 2023.04.01
• 유저 테스트 : 2023.03.24 ~ 2023.03.27
• 피드백 수정 : 2023.03.27 ~ 2023.04.01

⭐️ 페이지별 기능 소개

메인페이지

• 내 주변 맛집

• 요즘 뜨는 맛집 리스트

• 인기 리뷰 (카테고리별로 가장 많은 좋아요를 받은 리뷰 목록)

  

뉴스피드

• 가장 최근에 작성한 리뷰 목록

• 내 주변 피드 (내 주변에 등록된 맛집에 대한 리뷰 목록)

  

포스팅

• 근처 맛집 검색

• 맛집 리스트 추가

• 별점 및 해시태그

• 공개범위 설정

  

탐색

• 지도를 통해 등록된 전체 맛집 리뷰 및 팔로잉한 유저의 맛집 리뷰 확인

• 리스트를 통해 등록된 전체 맛집 리뷰 및 팔로잉한 유저의 맛집 리뷰 확인

  

프로필 페이지

• 해당 유저가 게시한 리뷰 목록 확인

• 해당 유저가 게시한 리뷰 목록을 지도 형식으로 확인

• 팔로잉 / 팔로워 확인

• 프로필 편집

  

맛집 리스트

• 해당 유저가 등록한 맛집 리스트를 확인

• 맛집 리스트 수정 / 삭제

  

북마크 컬렉션

• 맛집 컬렉션 생성 및 수정 / 삭제 (미완)

  

검색

• 키워드를 통한 계정 검색

• 키워드를 통한 태그 검색

• 키워드를 통한 등록된 맛집 검색

  

DM

• 1:1 채팅 기능

  

소셜로그인

• 카카오 / 네이버 / 구글 로그인

---

🔎 API

API 명세서 바로가기

개선사항

1. Skeleton UI 적용

• 로딩 중일 때 사용자에게 시각적인 피드백을 제공하기 위해 skeleton ui를 사용.

  

2. Debounce를 이용한 장소검색 api 리소스 절약

• 카카오에서 제공하는 장소검색 api는 하루 3만건을 무료 제공하고 있다. 키를 입력할 때마다 검색을 실행시키면 하루 제한을 초과할 수 있기 때문에 Debounce 테크닉을 통해 여러번 발생하는 이벤트를 마지막 한번만 실행되도록 수정하였다. 또한 검색 건수 제한뿐만 아니라 데이터의 응답 속도에 따라 검색 결과가 달라지는 것을 방지할 목적으로 사용하였다.

  

3. 코드 분할

• 어플리케이션의 번들 크기를 줄여 초기 로딩 속도를 최적화하고자 React.lazy를 사용하여 코드를 분할 시켰다. 사용자가 기능을 사용하지 않을 경우 불필요한 컴포넌트를 로딩하지 않기 때문에 불필요한 리소스 낭비를 절약할 수 있었다.

4. 구글 아날리틱스를 사용해 방문자 데이터 수집

• 사용자들이 어떤 페이지를 주로 방문했는지 수치화 하기 위하여 구글 아날리틱스를 사용하였다. 페이지의 title을 기준으로 표시되기 때문에 react-helmet-async를 사용하여 페이지마다 title을 부여하였다.

git Flow

• branch : 기능별 작업
• main(master) : 최종 배포