Foodie-Log (푸디로그)

📝 프로젝트 소개

주제: 지도형 맛집 공유 및 추천 SNS 플랫폼
기간: 2023.07.05 ~ 2023.10.10 (v1.0.0)
         2024.02.14 ~ 2024.04.17 (v2.0.3)
배포 주소: 푸디로그
테스트용 ID: [email protected] , PW: boo1234!

📝 사용 기술 및 선택 이유

Next.js

애플리케이션의 SEO(검색 엔진 최적화) 성능을 개선하고, 빠른 로딩 속도와 더 나은 초기 렌더링 성능을 제공할 수 있습니다. 또한, App Router 방식을 사용해서 폴더 단위로 쉽게 페이지 구성을 할 수 있습니다.

Typescript

TypeScript는 JavaScript 생태계와 호환성이 뛰어나 다양한 라이브러리와 도구를 쉽게 활용할 수 있습니다. 개발 중에 타입 체크를 통해 오류를 미리 발견할 수 있으며, 자동 완성으로 좀더 편리하게 개발할 수 있습니다.

React-Query

useInfiniteQuery를 사용해 피드 페이지를 무한 스크롤로 구현하였습니다. SWR (Stale Whlie Revalidate) 전략을 사용해서 데이터 캐싱과 최신 데이터 동기화를 동시에 처리할 수 있습니다.

Zustand

작은 패키지 크기과 쉬운 사용 방법으로 프로젝트에 사용하기 좋았습니다. 여러 컴포넌트에서 사용자의 입력 상태를 유지하거나 사용자 데이터를 전역적으로 관리할 때 사용하였습니다. Persist 미들웨어 웹 스토리지에 데이터를 저장할 때 간단한 설정으로 적용할 수 있어서 좋았습니다.

Tailwind CSS

유틸리티 클래스를 통해 스타일을 쉽게 조정할 수 있고, 반응형 디자인도 빠르게 구현할 수 있습니다. 스타일 코드도 HTML 코드 안에 있기 때문에 HTML와 CSS 파일을 별도로 관리할 필요가 없습니다. 또한 className 속성에 직접 스타일을 넣어, 클래스명을 고민할 필요가 없다는 점이 좋았습니다. 스타일 값을 자유롭게 커스텀할 수 있습니다. 자동완성, 신택스 하이라이팅, 린팅을 지원해서 편리하게 개발할 수 있었습니다.

📝 트러블 슈팅

웹 표준 및 접근성 개선

• 문제: 초기 웹사이트 구축시 웹 표준과 접근성이 충분히 고려되지 않아, 스크린 리더 사용자를 비롯한 다양한 사용자의 웹 접근성이 떨어지는 문제가 있었습니다.

• 해결: 시맨틱 태그와 이미지에 대체 텍스트를 적용하여 웹 컨텐츠의 구조를 명확히 하고 접근성을 향상시켰습니다. 스크린리더 사용자에게 더 나은 경험을 제공하고, SEO 점수를 100점 만점으로 향상시키는 데 기여했습니다.

Debounce 커스텀 훅을 활용한 검색 기능 개선

• 문제: 사용자가 입력하는 동안 빈번하게 검색 요청이 서버로 전송되어 서버 부하가 증가하고 불필요한 트래픽이 발생했습니다.

• 해결: Debounce 기술을 사용하여 사용자의 입력이 완료된 후 500ms가 지난 후에만 검색 요청이 발생하도록 조정했습니다. 이로 인해 불필요한 검색 요청을 80%까지 줄였고, 커스텀 훅을 통해 이 로직을 다른 컴포넌트에서도 재사용할 수 있게 되어 코드의 유지보수성과 재사용성을 높였습니다.

카카오 로그인 서비스 개선

• 문제: 로그인 절차에 이메일 인증 - 약관 동의 - 프로필 설정 단계가 포함돼 사용자 이탈 이슈가 걱정되었습니다.

• 해결: OAuth 2.0을 기반으로 한 카카오 로그인 인증 절차를 새롭게 구현하여 로그인 절차를 기존의 4단계에서 1단계로 대폭 간소화했습니다.

Tree Shaking을 통한 초기 로드 자바스크립트 크기 최적화

• 문제: 웹 애플리케이션의 초기 로딩 시간이 길어 사용자 경험이 저하되었습니다.

• 해결: 아이콘과 이미지를 Barrel import에서 Default import로 변경하여 번들 크기를 기존 188KB에서 80.5KB로 줄임으로써, 초기 로드 시간을 단축시키고 성능을 개선했습니다.

📝 기능

메인 피드

• 목적
  • 식당 리뷰를 공유하며 댓글, 멘션, 좋아요 등으로 상호작용할 수 있습니다.
  • 무한스크롤을 활용해 지속적으로 콘텐츠 제공하여 사용자 체류 시간을 높입니다.
• 기능
  • 피드 작성자 정보: 클릭하면 해당 사용자의 페이지에서 더 많은 콘텐츠를 확인할 수 있습니다.
  • 좋아요 및 댓글, 공유 기능: 각 리뷰에 대해 좋아요를 누르거나 댓글을 달 수 있습니다. 해당 피드의 링크를 공유할 수 있습니다.
  • 식당 정보: 클릭하면 해당 식당의 상세 페이지로 이동합니다.
  • 신고: 악성 콘텐츠인 경우 신고할 수 있습니다.

맛집 지도

• 목적
  • Kakao Map API를 사용해 자신만의 맛집을 지도 표시할 수 있어서 사용자에게 재미와 편의성 제공합니다.
• 기능
  • 지도 마커 표시: 사용자가 좋아요한 맛집을 지도에 표시합니다.
  • 카테고리: 식당 카테고리에 따라 나의 맛집 리스트를 확인할 수 있습니다.

마이 페이지

• 목적
  • 사용자가 자신의 프로필, 작성한 리뷰, 친구 목록, 개인 맛집 지도를 관리할 수 있습니다.
• 기능
  • 프로필 정보 수정: 닉네임과 바이오를 수정할 수 있습니다.
  • 친구 목록: 팔로잉, 팔로워 목록을 확인할 수 있습니다.
  • 피드 및 나만의 지도 확인: 내가 작성한 피드와 나만의 지도를 확인할 수 있습니다.
  • 설정 페이지: 설정 아이콘을 클릭하면 설정 페이지로 넘어갑니다.

알림

• 목적
  • 사용자가 앱 내에서 발생하는 중요한 이벤트나 상호작용에 대해 실시간으로 알림을 받을 수 있도록 합니다.
• 기능:
  • 개인화된 알림: 사용자 개인의 활동과 관련된 알림을 제공합니다. 예를 들어, 다른 사용자가 자신의 리뷰에 좋아요를 누르거나 댓글을 달았을 때 알림을 받습니다.
  • 알림 설정: 사용자는 알림을 받고 싶은 항목을 선택하거나 해제할 수 있습니다. 이를 통해 불필요한 알림으로부터 자유롭게 할 수 있습니다.
  • 알림 상세 정보: 각 알림을 클릭하면 그와 관련된 상세한 내용이나 해당 게시물로 이동할 수 있는 링크를 제공합니다.

로그인

• 목적

  • 카카오 로그인을 통해 사용자의 카카오 계정을 사용하여 푸디로그 앱에 쉽고 빠르게 로그인할 수 있습니다.

• 기능

  • 간편 로그인: 클릭 한 번으로 사용자 입력없이 로그인할 수 있습니다.
  • 소셜 연동: 카카오 계정과 연동하여 사용자의 이메일을 가져옵니다.
  • 보안 유지: 카카오 로그인은 보안이 강화된 OAuth 인증 방식을 사용하여 사용자 정보를 안전하게 보호합니다.

📝 개발팀

🧑‍💻 프론트엔드

Foodie Log v1.0.0 - 기획 / 디자인 / 개발

조은상	정재현
인증/인가 피드 등록/수정/삭제 맛집 지도 유저 페이지 설정 및 개인정보 페이지	피드 목록 댓글 작성/삭제 지역별 맛집 추천 관리자 페이지

Foodie Log v2.0.3 - 코드 리팩토링 / 추가 기능 / 디자인 리뉴얼

조은상	오소민	차동민
피드 목록 유저 페이지 유저 검색 로그인 푸시 알림 기능	피드 작성 및 수정 지역별 맛집 추천 설정 및 개인 정보 수정 대댓글, 멘션 기능	맛집 지도 피드 카테고리 식당 상세 관리자 페이지

🧑‍💻 백엔드

엄채원	손영준	황인영

📝 clone project

$ git clone [email protected]:FoodieLog/foodie-log-client.git

go to project

$ cd foodie-log-client

install npm

$ npm install

start project

$ npm run dev