[개인 프로젝트] 맛집 애플리케이션

 

📌 React를 사용하여 제작을 한 사이트입니다.

 

UseEffect와 UseMemo 같은 hooks를 통한 상태 관리로 코드의 흐름이 명확해 가독성이 좋았고, 에러가 났을 때에 코드의 관리가 수월했습니다. 

 

📌 지도 페이지의 렌더링의 경우 가져오는 식당 데이터의 변경이 없기 때문에 매번 서버에 요청을 하여 가져오기 보단 SSG 방식을 사용하여 응답 속도가 약 400ms에서 4ms 정도로 줄였습니다. 반면에 수정이 가능한 맛집 목록의 경우 동적 데이터가 들어가므로 SSR 방식으로 렌더링을 하였습니다.

 

📌 React-hook-form을 사용하였습니다.

 

폼 유효성 검사 및 에러 처리를 useForm을 통해서 할 수 있었습니다.

비제어 컴포넌트 방식으로, 변경된 폼 필드만 렌더링하여 사용자 입력 폼이 많은 맛집 등록의 경우 리렌더링으로 인한 불필요한 연산을 피했습니다.

 

📌 TailwindCSS로  스타일링을 주어 전체적인 스타일링 수정과 추가가 용이하게 하였습니다.

📌 Next-auth, Prisma를 연동한 사용자 인증, Prisma, Supabase를 이용한 데이터베이스를 사용하였습니다.

 

📋 Background

2024년 2월 진행한 개인 프로젝트입니다. 타지에서 서울로 온 친구와 함께 식당을 다니며 여행을 하는 도중 만들어보면 좋겠다 싶어서 제작하였습니다. 서울시에서 제공하는 식당 API를 사용하여 카테고리 별 분류 및 검색이 가능하고, 선호하는 맛집을 등록할 수도 있습니다.

 

📋 의미

프론트엔드 개발자이지만, 백엔드가 수행하는 임무도 하며 배경지식을 쌓을 수 있는 경험이었습니다. 사용자인증, 데이터베이스  다루기 등 기본적이지만 협업을 하려면 필수적으로 이해하고 있어야 하는 부문이므로 직접 역할을 수행한다는 점에 있어서 뜻깊은 경험이었습니다.

📌 주요 기능	외부 API (카카오 지도) 사용, 검색 기능 구현, 사용자 리뷰 및 평점, 데이터 정렬과 필터링, geolocation API를 이용한 위치 정보 가져오기
📌 Github	https://github.com/
📌 Frontend	React, Redux, TypeScript, Styled Component
📌 Backend	NestJS, MySQL, AWS,
📌 Database	Prisma, Supabase
📌 Deployment	Vercel

 

 

📌 기능 설명

1. 메인 페이지(맛집 지도)
카카오 지도에 맛집 목록을 아이콘 형식으로 나열 Kakao Map API로 지도 위에 맛집 마커 표시
2. 맛집 목록 페이지
맛집을 클릭하여 상세 정보를 확인 필터링, 정렬 기능(목록, 필터링)
3. 프로필 페이지(마이페이지)
개인 정보 & 작성 리뷰 보여주기
4. 맛집 상세 페이지
특정 맛집 정보 보여주기(주소, 연락처, 지도, 메뉴, 리뷰 등)
5. 찜한 가게 리스트
맛집 찜하기 기능을 통해, 저장한 맛집만 모아서 리스트로 보여주기.