[TIL] 최종 프로젝트 중간 발표

최종 프로젝트 중간 발표자로 내가 뽑히게 되었다..😇
중간 발표를 준비하며 정리한 내용을 적어보려 한다.

서비스 아키텍쳐

기술적 의사 결정 (DB)

• supabase
  • 강력한 데이터 베이스와 인증 기능을 제공하여 데이터를 손쉽게 관리할 수 있다.
  • (firebase와 달리) 관계형 데이터베이스 이므로 초기 세팅 시 잘 설정을 해두면 테이블 조인을 쉽게 할 수 있다.
  • (firebase와 달리) rpc 함수를 사용하여 비교적 복잡한 쿼리도 한 번에 수행할 수 있다.
  • (firebase에 비해) auth 사용자 수 제한이 없고, 읽기 쓰기가 더욱 빠르다.

기술적 의사 결정 (Library & Language)

• next.js (page router)
  • 파일 기반 라우팅을 활용하여 손쉽게 라우팅을 구현할 수 있다.
  • 검색 엔진 최적화(SEO)가 가능하다.
  • (App router에 비해) 낮은 러닝 커브를 가지고 있고, 검색 시 자료가 더 많다.
  • 코드 스플리팅을 자동으로 해준다.
• react-query
  • 서버와의 데이터 통신을 간단하게 처리하여 서버 상태 관리를 용이하게 해준다.
  • 가져온 데이터를 자동으로 캐싱하며 업데이트된 데이터를 UI에 바로 반영하기 쉽다.
• tailwind CSS
  • 이름 짓기를 고민하지 않아도 된다.
  • 코드량이 줄어든다.
  • 반응형을 구현하기 쉽다.
  • 빌드할 때 안 쓰는 스타일은 날려버려서, 가볍다!
  • next.js와 궁합이 좋다!
• TypeScript
  • 코드의 안정성을 높이기 위해 정적 타입 검사를 활용하여 개발 생산성이 향상된다.
• Redux-toolkit
  • immer가 내장되어 있어 불변성을 유지하지 않아도 알아서 처리해준다.
  • redux-devtools 를 사용할 수 있다. (개발 생산성 향상)
  • 코드 베이스가 커져도 안정적으로 돌아간다!

트러블 슈팅

트러블 슈팅 (1)

• 트러블
  • 하나의 컴포넌트에서 여러 테이블의 정보가 필요한 경우 (테이블 조인으로도 요청하기 복잡한 경우) 각각의 테이블을 fetch 하여 overfetching이 일어나는 문제가 있었다.
• 해결
  • 여러 테이블의 정보를 가공해서 필요한 정보만 한 번에 가져올 수 있도록 supabase의 rpc 함수를 만들어서 서버의 접근 횟수를 줄였다.

트러블 슈팅 (2)

• 트러블
  • 로컬에서는 잘 뜨는 카카오 맵이 vercel로 배포 후 CORS(Cross Origin Resource Sharing) 에러가 뜨며 지도가 뜨지 않았다.
• 해결
  • next.config.js 파일에서 CORS 활성화 설정을 하여 에러를 해결하였다.

트러블 슈팅 (3)

• 트러블
  • 주변 장소 페이지에서 맵을 움직일 때마다 데이터를 fetching 하여 overfetching이 일어나는 문제가 있었다.
• 해결
  • useEffect의 의존성 배열에 regionName 을 넣어 지역 이름(구 이름) 이 변경될 때만 데이터를 fetch 하는 방식으로 변경하였다.

도전 계획

• supabase RealTime DB 를 활용하여 내가 쓴 리뷰에 댓글 달릴 때 알림 기능 추가하기
• 반응형 적용하기 ⭐️
• getServerSideProps, getStaticProps 와 같은 함수를 활용하여 SSR 적용하기
• 고대비 모드 (like 다크모드) 적용하기