배포 페이지
프로젝트 개요
사용자 간 게시물을 기반으로 상호작용 할 수 있는 커뮤니티 사이트입니다. 사용자의 사용성을 고려하고 커뮤니티 사용에 편리함을 제공합니다.
아키텍처
구현 기능
•
로그인/회원가입
◦
사용자 등록 및 인증 작업을 수행합니다.
▪
Firebase Authentication을 통해 이메일/비밀번호 인증을 수행합니다
▪
React-hook-form을 이용한 입력 데이터의 유효성 검사를 실시합니다.
•
유저 조회/검색
◦
다른 사용자들의 프로필을 카드 형태의 리스트로 제공합니다.
◦
검색창을 통해 다른 사용자들을 쉽게 찾아볼 수 있습니다.
▪
사용자가 검색창에 입력할 때, race condition을 방지하고 API 요청을 줄이기 위해 lodash 라이브러리의 debounce 기법을 적용합니다.
•
게시물 관리
◆ 전체 게시글 조회
•
게시글은 최신 순으로 정렬됩니다.
•
Pagination을 위해 useInfiniteQuery 와react-intersection-observer 를 이용한 무한 스크롤 기능을 적용합니다.
◆ 게시물 CRUD
•
게시물 생성 시 React-hook-form을 이용합니다.
◆ 게시물 상세 조회
◦
댓글/대댓글
▪
텍스트 형태로 댓글을 생성합니다.
▪
Mutation을 적용하여 사용자의 입력에 UI가 즉각적으로 변경되도록 하였습니다.
▪
게시글 작성자 및 댓글/대댓글 작성자는 삭제 권한을 갖습니다.
▪
최신 순으로 정렬되어 조회합니다.
•
팔로우/언팔로우 및 좋아요
◆ 팔로우/언팔로우
◦
모든 사용자는 My page에서 팔로우/팔로잉 정보를 확인, 수정 할 수 있습니다.
◆ 좋아요
◦
본인이 작성한 게시글 포함, 모든 게시글에 좋아요를 누를 수 있습니다.
•
이미지 최적화
◦
react-image-file-resizer 라이브러리를 활용하여 업로드되는 이미지의 크기를 조정합니다.
▪
이는 과도하게 큰 이미지 파일로 인한 렌더링 지연을 방지하고 전체적인 페이지 성능을 향상시켜 이미지 렌더링 속도를 개선합니다.
◦
개선점
▪
FCP : 17.9s → 5.3s
▪
LCP : 31.9s → 8.1s
•
SEO 개선
◦
robots.txt 생성
◦
meta tag 설정
▪
react-helmet 라이브러리
◦
site map 생성
▪
sitemap 라이브러리
◦
개선점
▪
측정 도구 : light house