README : https://github.com/cgh96/With-Pet-FE

<aside> 💡 프로젝트 개요 반려동물에 대한 지출, 건강 등에 대해 기록하고 커뮤니티에서 서로 정보를 공유할 수 있는 웹사이트

팀 구성 백엔드 2, 프론트엔드 2, 디자이너 1

</aside>

🔧 나의 역할

• 프론트엔드 기여도:  50%
• Github Action, S3, CloudFront를 사용한 CI/CD
• 랜딩 페이지
  • 퍼블리싱
• 커뮤니티 페이지
  • 퍼블리싱 및 기능 구현
  • 게시글 검색
  • 좋아요
• 게시글 상세 페이지
  • 게시글 수정
  • 게시글 삭제
  • 댓글 작성
  • Intersection Observer를 이용한 Cursor Pagination(무한 스크롤)
• 게시글 작성 페이지
  • WYSIWYG 라이브러리를 이용한 게시글 작성 및 이미지 업로드

📌  기술 스택

React-Query

• 직전 프로젝트에서 Redux, Redux-Saga를 사용했다.
• Redux, Redux-Saga를 사용 후 다음 과 같은 것들을 느꼈다.
  • 관리해야할 state 하나당 추가되는 보일러플레이트 코드 양이 많다.
  • 코드 양이 많다보니 코드 흐름 파악이 힘들다.
  • 대부분의 전역 상태 관리에 필요한 값들은 서버 데이터이다.
• 서버 데이터를 간편하고 효과적으로 관리할 라이브러리를 찾던 중 발견한 것이 React-Query이다.

CloudFront S3

• 정적 파일 저장소 S3만으로 React앱이 배포되는 것을 보며, React 구동 방식을 명확히 이해했다.
• CloudFront를 사용하여 React빌드 파일을 가까운 지역에 캐싱하여 웹 성능을 끌어올릴 수 있다.

🗂️  프로젝트 아키텍처

🖥️  기술적 도전 / 트러블 슈팅

• 문제 1
  • 랜딩페이지의 정적 이미지 파일 용량이 커서, 이미지 로드가 늦게 되는 현상
  • 이미지 로드가 끝나기 전까지, 아무 것도 없는 빈공간 발생