프론트엔드 개발 포트폴리오 | 운동 동기부여 커뮤니티
내일배움캠프 4기 웹 개발 과정 React 트랙 수료생 최종 프로젝트 ‘짐티베이션’을 소개합니다.
Aug 16, 2023
- GYMTIVATION (득근파트너스, Gym + Motivation)
혼자 운동할 때 동기부여가 필요한 분들을 위한 커뮤니티 입니다.
🏗 서비스 아키텍처
- 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-query의 useQuery는 사용하지 않고 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 to our newsletter