프로젝트 개요

• 함께 지내는 반려동물 정보를 기반으로 친구를 사귀고 일상생활을 공유하는 SNS
• 기간: 2024.08.07 - 2024.09.19
• 팀 구성: 개인프로젝트

주요 기능

• 회원가입/로그인, 게시글 CRUD, 좋아요, 댓글, 유저 검색
• 회원가입 / 로그인
  • Firebase Auth를 유저 등록 및 인증
  • sessionCookie를 통한 서버/클라이언트 유저 인증 관리
  • Zod를 통한 회원 정보 유효성 검사
• 게시글 CRUD
  • 무한스크롤 : ReactQuery의 useInfiniteQuery 메소드를 통해 무한스크롤 구현
  • 게시글 동기화: invalidateQueries 메소드를 통해 게시글 작성 및 호출 동기화
  • 낙관적 업데이트: 좋아요 클릭 시 클라이언트에서 미리 ui를 변경하여 사용자 경험을 개선
• 유저 검색
  • 닉네임 기반 유저 검색 및 각 사용자 프로필 페이지에서 게시글 조회

트러블 슈팅

• 문제 사항
  • 초기 프로젝트 진행 시 클라이언트에서 직접 Firebase를 호출하여 데이터 통신을 처리했으나, 이 방식은 Firebase 키가 클라이언트에 노출되는 보안 취약성과 데이터 검증 부족으로 인한 무결성 문제가 발생할 우려가 있었습니다.
• 해결 방안
  • 이를 해결하기 위해 Next.js의 API Route를 사용해 서버 사이드에서 Firebase와의 통신을 처리하는 구조로 변경했습니다. 이 과정에서 Next.js의 app 라우터 기반 구조를 학습하고 적용하며, API 설계 및 RESTful 통신에 대한 이해를 심화할 수 있었습니다. 이러한 변경을 통해 클라이언트와 서버 간의 데이터 흐름을 명확히 했고, 보안 및 데이터 무결성을 강화했으며, 프로젝트의 확장성과 유지 보수성 또한 크게 향상시킬 수 있었습니다.

이미지 최적화

• 최적화 방식
  • 이미지 webp 변환 및 next/image 적용
• 개선사항
  • WebP 형식으로 이미지 변환: 사이트 내 PNG 이미지를 WebP 형식으로 변환하여 이미지 크기를 약 98.57% 줄였습니다.
  • 로딩 시간 최적화: 이미지 로딩 속도를 약 39.46% 개선하여 페이지 로딩 시간을 단축했습니다.
  • 동일 이미지 5개 기준:
    • 크기 감소 평균 623KB → 8.88KB
    • 시간 감소 평균 1388ms → 840ms
  • 해당 작업 후 구글 라이트하우스 성능 점수를 80점에서 88점으로 상승시켜 사용자 경험을 향상시키고 페이지 속도를 최적화했습니다.