함께 뛰는 즐거움 🏃‍♀️🏃이RUN 저RUN💨💨

📌 바로가기

• 프론트엔드 GitHub Repository : https://github.com/ErunJrun/ErunJrun_FE
• 백엔드 GitHub Respository : https://github.com/ErunJrun/ErunJrun_BE
• 시연 영상 보러가기: https://www.youtube.com/watch?v=j64DAMz1pDw

⏱ 프로젝트 기간

2022.04.22 ~ 2022.06.03 (6주)

👾 FRONTEND MEMBERS

유진열	김다운
Front-End	Front-End

유진열 🔰

✅ 페이지
로그인 페이지, 메인 페이지, 그룹러닝 페이지, 추천코스 페이지, 그룹채팅

✅ 기능
카카오 로그인 네이버 로그인 JWT토큰(Access, Refresh) 적용
``
배너&게시물 슬라이드 `알림 기능` `중복 필터 검색 기능` `캘린더 기능`
`게시글 관련 기능(조회,등록,수정)` `카카오 지도 연동(Polyline 드로잉)` `사진 다중 업로드`
`카카오 공유하기 기능` `댓글 & 대댓글 기능` `러닝 신청하기` `Scroll 이벤트 기능` `북마크 기능` `평점 기능`
`CI/CD 세팅 및 배포환경 구축(AWS Route53, Amplify)`
`반응형CSS 구현`

김다운

✅ 페이지
마이 페이지, 랜딩 페이지, 출석체크 페이지, 호스트 평가 페이지

✅ 기능
출석체크 호스트 평가 서비스 소개 모달 슬라이드
휴대폰 인증 회원 탈퇴 기능 회원 정보 수정 사진 업로드
참여 예정, 참여 완료, 내가만든 그룹러닝, 북마크 한 게시물, 내가만든 코스추천 게시글 조회 호스트 평가 표 조회
반응형CSS 구현

📢 이RUN저RUN 서비스 주요기능

🎵 함께 뛰고 싶은 사람들을 위한 그룹 러닝 매칭 플랫폼

🔐 카카오/네이버 소셜 로그인

• 별도의 정보 입력 없이 간편하게 로그인할 수 있습니다.

🏃‍♀그룹러닝 모집 & 그룹채팅

• 다른 사람과 뛰고 싶은 코스를 직접 그려서 함께 뛸 사람을 모집할 수 있습니다.
• 채팅을 통해 질문과 답변에 대한 소통을 할 수 있습니다.

✔ 출석체크/크루장 평가

• 출석체크와 크루장 평가를 통해 그룹러닝에 대한 후기를 남길 수 있습니다.
• 출석체크와 크루장 평가는 유저의 굿러너 레벨과 연동됩니다.

🗾 코스추천

• 내가 뛰어본 코스를 직접 그려서 나만의 코스 맛집을 다른 사람과 공유할 수 있습니다.

📱 핸드폰 인증 및 SMS 알림 기능

• 신청한 그룹러닝을 잊지 않고 참석하고 후기를 남길 수 있도록, SMS 문자 알림을 보내드립니다.

🔨 기술스택

Tech

Design

Tools

📚 라이브러리

리스트

Name	Appliance	Version
swiper	슬라이드	2.1.2
sweetalert	에러 메세지 핸들링	2.1.2
styled-components	컴포넌트 스타일링	5.3.5
Redux	상태 관리	4.2.0
axios	서버통신	0.26.1
React-redux	상태관리	8.0.1
React-router-dom	라우터	5.3.0
Redux-thunk	리덕스 미들웨어	2.4.1
Redux-actions	액션 관리	2.6.5
Connected-react-router	히스토리 객체 관리	6.9.2
Immer	불변성 유지	9.0.12
History	페이지 이동	4.10.1
express-rate-limit	API 사용량 제한(보안)	6.4.0
react-geocode	위도,경도로 주소 얻기	0.2.3
react-calendar	달력	3.7.0
react-icons	아이콘	4.3.1
react-responsive	반응형 웹	9.0.0-beta.6
React-share	SNS 공유하기	4.4.0
Dayjs	날짜, 시간 라이브러리	1.11.0
react-scroll	스크롤	1.8.7
react-date-range	달력 날짜 범위	1.4.0
react-datepicker	캘린더	4.7.0
react-intersection-observer	무한 스크롤	9.1.0
react-kakao-maps-sdk	카카오 지도	1.0.6
react-photo-collage	이미지 레이아웃 편집	1.0.9
lodash	데이터 구조	4.17.21
socket.io-client	데이터 구조	4.5.1

🔥 Trouble shooting

issue1: JWT 액세스,리프레쉬 토큰 관리

🙁 situation

• 토큰 탈취에 대한 보안을 강화하기 위해 액세스 토큰의 시간을 짧게 하고 액세스토큰의 재발급이 가능한 리프레쉬 토큰 도입

🛑 cause

• 두 가지의 토큰을 로그인이 필요한 모든 통신에 담아주다보니 불필요한 코드가 길어지고 토큰을 빠트리게 되는 문제 발생
• 액세스 토큰이 만료될 시 리프레쉬 토큰을 통해 재발급을 해주지만 실패한 요청을 재요청하지 않음

🚥 solution

• request 요청에 대한 인터셉터를 만들어 자동으로 모든 요청에 두가지의 토큰을 전달
• response가 실패 시 액세스토큰이 만료되어 재발급 되는 경우면 새토큰을 쿠키에 저장하고 본래의 요청을 다시 요청하는 인터셉터 구성

issue2: 게시물 등록 시 각 단계별 데이터 전역 관리

🙁 situation

• 게시물 등록 시 입력 정보량(지도마킹, 10여개의 입력값, 다중 이미지)이 많아 3단계로 나누어진 등록 프로세스 진행

🛑 cause

• 각 단계를 넘나들 때 컴포넌트가 많아 useState의 데이터를 props로 주고받는 과정에서 데이터가 초기화 되고 자식컴포넌트에서 부모컴포넌트의 데이터를 바꿔야 하는 경우가 발생

🚥 solution

• 상속된 컴포넌트가 많고 부모,자식 컴포넌트의 원활한 데이터 전역 관리를 위한 리덕스 활용

issue3: 이미지 업로드 속도

🙁 situation

• 서비스 특성상 게시물(그룹러닝/코스추천) 등록 시 다중 사진 업로드로 고화질 이미지 업로드의 가능성이 있음

🛑 cause

• 유저 테스트 결과 2mb가 넘거나 스마트폰 후면카메라로 찍을 시 5mb가 넘는 사진들이 업로드 될 시 업로드가 오래 걸려 유저가 등록 후 오류로 인식하는 상황 발생

🚥 solution

• browser-image-compression 라이브러리로 1장,2장,3장 업로드 되는 각각의 상황을 고려하여 이미지를 압축한 후 서버로 전달 -> 데스크탑 테스트 결과 5Mb가 넘는 사진은 1Mb 이내로 용량을 압축하였고 업로드 속도를 50% 이상 줄여 업로드 속도 개선

🌸 More Info

[🌿 프로젝트 소개 문서]
💾 와이어프레임