프론트엔드 개발 포트폴리오 | 운동 동기부여 커뮤니티

내일배움캠프 4기 웹 개발 과정 React 트랙 수료생 최종 프로젝트 ‘짐티베이션’을 소개합니다.
Aug 16, 2023
프론트엔드 개발 포트폴리오 | 운동 동기부여 커뮤니티
  • GYMTIVATION (득근파트너스, Gym + Motivation)
    • 혼자 운동할 때 동기부여가 필요한 분들을 위한 커뮤니티 입니다.
 

🏗 서비스 아키텍처

notion image
  • AWS로 배포된 저희 웹에 유저가 접속하면 보시는 바와 같이 다양한 서비스를 이용할 수 있습니다.
    • socket.io 를 통한 실시간 커뮤니케이션
    • firebase storage, firebase firestore 를 통한 게시판 CRUD
    • firebase Authservice 를 통한 로그인/회원가입
    • kakao map API 를 통한 지도 기능
 

🧙🏼‍♀️기술적 의사결정


🍀 주요 기술

  • Next.js
  • Soket.io
  • Firebase
  • Kakao map
  • React-Query
  • Recoil
  • TypeScript
 

🛠 트러블슈팅

firebase의 onSnapshot을 이용한 실시간 데이터 처리 비용 문제
문제
데이터를 fetch할 때 firebase에서 제공하는 onSnapshot 함수를 사용했습니다. onSnapshot의 장점은 컬렉션의 변화가 감지 될 때마다 실시간으로 데이터를 가져온다는 것이었습니다. 그러나 이번 프로젝트에서 다루는 데이터 양이 많아지다 보니 통신 비용이 감당할 수 없는 수준으로 늘어났습니다.
해결
문제를 인식하기 전까지 react-queryuseQuery는 사용하지 않고 useMutation을 이용했습니다. 그러나 문제점을 인식한 후 useQuery의 캐싱 기능을 이용했고 그 결과 통신 비용이 많이 줄어든 것을 체감할 수 있었습니다. 그리고 게시물 수정 시 invalidateQueries를 활용하여 캐시를 무효화 하고 새로고침이 없이 수정 내용이 바로 갱신 되도록 할 수 있었습니다.
 
전역 상태 관리를 하지 않았을 때의 문제
문제
DM 기능 구현 또는 Alert와 Confrim과 같은 공용 모달을 구현할 때 Prop Drilling이나 상위 컴포넌트로의 데이터 전달 해야하는 문제가 있었습니다.
해결
Recoil을 이용해 State 를 전역으로 관리해 해결했습니다. 일단 RecoilRoot_app.tsx 를 감싸 전역에서 RecoilState 를 사용할 수 있게 만들었습니다. 그 후 DM이나 모달 컴포넌트에서 받아야 하는 State 를 RecoilState 로 변경해 다른 페이지에서도 쉽게 State 를 받을 수 있게 해결했습니다.
 
스토리지 업로드 용량 문제
문제
이미지 업로드시 스토리지 용량이 부족해지는 현상이 생겼습니다.
해결
browser-image-compression 라이브러리를 이용해 이미지 압축해주는 함수를 만들어 압축 후 업로드가 가능하게 변경해주어 최대 89% 감소한 용량으로 이미지를 업로드해 해결했습니다.
그 결과 이미지 게시판에서 Network Resource를 받아올 때 전체 용량의 40% 이상 감소시켜서 받아 올 수 있었습니다.
 
이미지 업로드 딜레이
문제
이미지 포스트를 할 때 압축 후 이미지를 보여주고 있어 이미지가 크면 클 수록 프리뷰에 이미지가 느리게 나오는 문제가 있었습니다.
해결
업로드 시간이 최대 7초를 넘지 않지만 UX적으로 유저들이 불편함을 겪을 것이라고 판단되어 이미지 업로드시 업로드되는 퍼센트를 실시간으로 보여주어 유저들이 확인할 수있게 해 주었습니다.
 
 

 
 
 
Share article
Subscribe Newsletter
Stay connected for the latest news and insights.
RSSPowered by inblog