home
커리큘럼
home
React
Node.js
Spring
home

[짐티베이션] 혼자 운동할 때 동기부여가 필요한 사람들을 위한 커뮤니티

Section info
Section A
A8
커뮤니티
Specialty
React
도메인(IP) 주소
•
GYMTIVATION (득근파트너스, Gym + Motivation)
혼자 운동할 때 동기부여가 필요한 분들을 위한 커뮤니티 입니다.

서비스 아키텍처

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

기술적 의사결정

Search
기술적 의사결정
사용 기술
기술 설명
Socket.io
Open
WebSocket과 비교시 Socket.io 가 방 개념을 이용해 DM 채팅까지 쉽게 구현이 가능하며, 웹소켓 기술을 보다 쉽게 활용할 수 있기 때문에 프로젝트에 적합하다고 생각했다.
KaKao Map
Open
naver map 과 google map 보다 검색 기능에 있어 속도가 더 빠르고 문서화가 잘 되어있어 활용하기 쉽다.
Next.JS
Open
이미지를 많이 불러오는 이번 프로젝트에서 SSR 구현을 쉽게 해주는 NEXT.js의 역할이 가장 적합하다고 생각했다.
Firebase
Open
백엔드 개발자가 없는 상황에서 필수적인 서버리스 서비스를 썼어야 했는데, 그 중 가장 사용이 편리하고 다들 사용할 줄 아는 파이어베이스가 가장 적합하다고 생각했다.
React-Query
Open
커뮤니티와 SNS의 특징을 가진 이번 프로젝트에서 많은 데이터 통신이 불가피했다. 특히 이미지 파일이 가장 많은 통신 비용을 차지하기 때문에 이에 대한 해결 방안으로 캐시 기능이 있는 React-Query가 적절하다고 생각했다.
Styled-components
Open
다른 라이브러리 태그와도 연동이 가능하고, 따로 css 파일을 만들어주지 않아도 css 적용이 가능한 styled-components 가 가장 적합하다고 생각했다.
Recoil
Open
Redux와 같은 보일러 플레이트가 없고 간단한 방법으로 전역 state를 관리할 수 있는 장점이 있다. 사용자 수도 꽤 있는 편이고 공식 문서도 잘 정리 되어 있어 사용 방법을 찾기 쉬운 장점도 있다.
Typescript
Open
협업을 하는 과정에서 불가피하게 다른 사람이 쓴 코드를 보게 되는데 이때 지정한 type이 있어 다른 사람이 쓴 변수를 유추하기 쉽게 해주는 장점이 있다. 그리고 컴파일 단계에서 오류를 보여주기 때문에 런타임 에러를 피할 수 있는 장점이 있다.

 주요 기술

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

 트러블슈팅

firebase의 onSnapshot을 이용한 실시간 데이터 처리 비용 문제
전역 상태 관리를 하지 않았을 때의 문제
스토리지 업로드 용량 문제
이미지 업로드 딜레이