- 프론트엔드 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주)
| 유진열 | 김다운 |
|---|---|
Front-End |
Front-End |
✅ 페이지
로그인 페이지, 메인 페이지, 그룹러닝 페이지, 추천코스 페이지, 그룹채팅
✅ 기능
카카오 로그인 네이버 로그인 JWT토큰(Access, Refresh) 적용
``
배너&게시물 슬라이드 `알림 기능` `중복 필터 검색 기능` `캘린더 기능`
`게시글 관련 기능(조회,등록,수정)` `카카오 지도 연동(Polyline 드로잉)` `사진 다중 업로드`
`카카오 공유하기 기능` `댓글 & 대댓글 기능` `러닝 신청하기` `Scroll 이벤트 기능` `북마크 기능` `평점 기능`
`CI/CD 세팅 및 배포환경 구축(AWS Route53, Amplify)`
`반응형CSS 구현`
✅ 페이지
마이 페이지, 랜딩 페이지, 출석체크 페이지, 호스트 평가 페이지
✅ 기능
출석체크 호스트 평가 서비스 소개 모달 슬라이드
휴대폰 인증 회원 탈퇴 기능 회원 정보 수정 사진 업로드
참여 예정, 참여 완료, 내가만든 그룹러닝, 북마크 한 게시물, 내가만든 코스추천 게시글 조회 호스트 평가 표 조회
반응형CSS 구현
- 별도의 정보 입력 없이 간편하게 로그인할 수 있습니다.
- 다른 사람과 뛰고 싶은 코스를 직접 그려서 함께 뛸 사람을 모집할 수 있습니다.
- 채팅을 통해 질문과 답변에 대한 소통을 할 수 있습니다.
- 출석체크와 크루장 평가를 통해 그룹러닝에 대한 후기를 남길 수 있습니다.
- 출석체크와 크루장 평가는 유저의 굿러너 레벨과 연동됩니다.
- 내가 뛰어본 코스를 직접 그려서 나만의 코스 맛집을 다른 사람과 공유할 수 있습니다.
- 신청한 그룹러닝을 잊지 않고 참석하고 후기를 남길 수 있도록, SMS 문자 알림을 보내드립니다.
리스트
| 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 |
issue1: JWT 액세스,리프레쉬 토큰 관리
- 토큰 탈취에 대한 보안을 강화하기 위해 액세스 토큰의 시간을 짧게 하고 액세스토큰의 재발급이 가능한 리프레쉬 토큰 도입
- 두 가지의 토큰을 로그인이 필요한 모든 통신에 담아주다보니 불필요한 코드가 길어지고 토큰을 빠트리게 되는 문제 발생
- 액세스 토큰이 만료될 시 리프레쉬 토큰을 통해 재발급을 해주지만 실패한 요청을 재요청하지 않음
- request 요청에 대한 인터셉터를 만들어 자동으로 모든 요청에 두가지의 토큰을 전달
- response가 실패 시 액세스토큰이 만료되어 재발급 되는 경우면 새토큰을 쿠키에 저장하고 본래의 요청을 다시 요청하는 인터셉터 구성
issue2: 게시물 등록 시 각 단계별 데이터 전역 관리
- 게시물 등록 시 입력 정보량(지도마킹, 10여개의 입력값, 다중 이미지)이 많아 3단계로 나누어진 등록 프로세스 진행
- 각 단계를 넘나들 때 컴포넌트가 많아 useState의 데이터를 props로 주고받는 과정에서 데이터가 초기화 되고 자식컴포넌트에서 부모컴포넌트의 데이터를 바꿔야 하는 경우가 발생
- 상속된 컴포넌트가 많고 부모,자식 컴포넌트의 원활한 데이터 전역 관리를 위한 리덕스 활용
issue3: 이미지 업로드 속도
- 서비스 특성상 게시물(그룹러닝/코스추천) 등록 시 다중 사진 업로드로 고화질 이미지 업로드의 가능성이 있음
- 유저 테스트 결과 2mb가 넘거나 스마트폰 후면카메라로 찍을 시 5mb가 넘는 사진들이 업로드 될 시 업로드가 오래 걸려 유저가 등록 후 오류로 인식하는 상황 발생
- browser-image-compression 라이브러리로 1장,2장,3장 업로드 되는 각각의 상황을 고려하여 이미지를 압축한 후 서버로 전달 -> 데스크탑 테스트 결과 5Mb가 넘는 사진은 1Mb 이내로 용량을 압축하였고 업로드 속도를 50% 이상 줄여 업로드 속도 개선
[🌿 프로젝트 소개 문서]
💾 와이어프레임