개인 프로젝트 #wheregram 최종 회고

🚎 Overview

2023년 03월 12일 ~ 2023년 04월 08일

 

🌼 국내 여행 정보 · 후기 공유 플랫폼

Notion https://trustmitt.notion.site/wheregram-1d19d37a91224cdbacf4536c15dae1a7

#wheregram

 

Github https://github.com/trustmitt/wheregram

GitHub - trustmitt/wheregram: 국내 여행 정보 · 후기 공유 플랫폼 ⛺

 

🚎 Project

💚 tech stack

Language TypeScript

Framework React NextJS

State Management Tools Redux-Toolkit Redux-Persist

Style Styled-Components Chakra UI

Deploy Vercel

CI / CD Github Actions

Interface Firebase browser-image-compression Kakao Map API Intersection Observer API

 

💚 서비스 시연

 

💚 페이지 구성

• 📡 랜딩 페이지
  • 좋아요 수 상위 4개 게시글 노출
  • 각 페이지 진입 가능한 네비게이션 푸터 구성
• 📡 로그인, 회원가입

 

• 📡 explore
  
  • 모든 유저의 게시글 탐색 가능
  • 좋아요, 댓글 기능 구현
  • 다른 유저의 프로필 페이지 진입 가능
  • 무한 스크롤 적용
• 📡 write
  • KAKAO MAP API로 지도 기능 구현, 지도 영역 클릭 시 위도 · 경도를 통해 해당 위치의 주소를 받아옴
  • 이미지 업로드 시 압축(최대 2MB)하여 DB에 저장
  • 별점 기능 구현

 

• 📡 search
  
  • 디바운싱 적용
  • 파이어베이스 키워드 검색 미지원으로 인해 각 데이터 필드에 인덱스 데이터 저장 후 검색 기능 활용
  • 상세 피드 페이지 진입 가능
• 📡 profile
  • 유저의 간단한 프로필과 유저가 작성한 게시글 확인 가능
• 📡 settings
  • 프로필 이미지, 닉네임 변경 및 로그아웃, 회원 탈퇴 기능 지원

 

🚎 프로젝트 회고

• 멘토링 없이 진행하는 첫 프로젝트라서 혹시나 중간에 산으로 가버리면 어떡하나 싶어 기획 단계에서 정했던 소기의 목적이 있었다. 개선할 부분이야 물론 있겠지만 전반적으로 이걸 모두 달성했다는 점이 가장 뜻깊다.
  • NextJS를 통한 효율적인 코드 작성
  • 무한 스크롤 적용
  • 이미지 최적화를 통한 성능 개선
  • Firebase 이해도 제고, 스토리지에 이미지 업로드 후 활용
  • 검색창 디바운싱 적용
  • KAKAO MAP API를 통한 지도 출력
  • 유저가 위치를 클릭하면 클릭한 장소의 이름, 주소값 받아오기
• 파이어베이스 서비스를 사용해서 프로젝트를 만든 건 이번이 두 번째인데, 첫 번째 프로젝트에서 실패했던 이미지 스토리지 업로드랑 서브 컬렉션을 이용한 댓글 기능을 큰 어려움 없이 구현할 수 있게 됐다. 나 진짜 쫌 늘었나 본데...
• 가장 아쉬운 점은 키워드 검색이다. 텍스트 검색 당연히 될 줄 알고 있었던 게 패착 요인인데, 그나마 내가 적용할 수 있는 방법 중 가장 합리적인 방법을 적용했다고 생각은 하지만... 검색 엔진 API 과금도 얼마 안 된다는데 붙여서 한 번 해 봤으면 좋았을걸 싶은 생각도 든다.
• 그리고 또 아쉬운 건 구글 소셜 로그인... 어려운 것도 아니니까 로그인 폼 만들자마자 바로 붙여버렸던 기능인데 파이어스토어에 user 컬렉션을 만들면서부터 뭔가 좀 복잡해지기 시작...  이메일 유저는 회원가입할 때 필요한 정보를 다 받는데 구글 유저는 그게 아니니까... 구글 로그인 유저만 따로 form을 받는 페이지가 있어야 하고... user 컬렉션에 form 정보가 있나 없나 체크해서 조건부 렌더링 처리를 한다... < 여기 과정에서 깔끔하(지 못하)게 드랍함... 필수 기능이 아니기 때문에 드랍하긴 했는데 소셜 로그인 없는 프로젝트 처음이라서 이래도 되나 싶긴 하다.