✈️'짜여' 서비스 설명 보러가기

메인 ReadMe.md를 참고 해주세요!

'짜여' 사이트가 궁금하시다면 아래 바로가기를 참고 해주세요!

🙋팀원 소개

이름	깃허브 주소	포지션
유호빈	https://github.com/hobinyoo	프론트엔드
송원석	https://github.com/sws1552	프론트엔드
구미리	https://github.com/mirigu	프론트엔드

📖 라이브러리

name	Appliance	version
socket.io-client	웹소켓 라이브러리	4.4.1
redux	상태 관리	4.1.2
redux-thunk	리덕스 미들웨어	2.4.1
redux-actions	액션 관리	2.6.5
immer	불변성 유지	9.0.12
axios	HTTP 클라이언트 라이브러리	0.26.0
swiper	슬라이더 플러그인	8.0.7
react-date-range	date 라이브러리	1.4.0
react-helmet	html head의 meta, title tag 핸들링을 위해 사용	1.4.0
styled-components	CSS-in-JS 라이브러리	5.3.3
google-map-react	react google map 라이브러리	2.1.10

☄️트러블슈팅

Google Map Api (PolyLine)

도입 이유

지도에 마커를 표시하고 각 마커의 PolyLine을 그어주어 사용자가 좀 더 여행루트를 쉽게 볼 수 있게 하기 위함

문제 상황

날짜에 해당하는 Marker는 렌더링이 되는 반면 PolyLine 생성 시 PolyLine은 렌더링 되지 않고 그대로 남아 있는 이슈 발생

문제해결을 위한 시도

1. Map에 그려지는 PolyLine이 바뀔 때마다 useEffect로 재 렌더링
2. 날짜에 해당하는 Day 개수 만큼 PolyLine 객체를 생성하여 Day의 id와 PolyLine 객체의 Num 번째가 일치할 때만 PolyLine 렌더링

— 두가지 방법 모두 위치 정보는 바뀌었으나 PolyLine은 그대로 남아있었음

해결방안

1. DB 안에 위치 정보에 대한 렌더링과 함께 지도를 초기화 시켜주어야 한다는 점을 알게됨
2. Day에 대한 정보가 바뀔 때 이전 구글맵의 컴포넌트를 setmap(null)로 초기화 시켜줌

Google Map Api (Fitbound)

도입 이유

지도의 위치가 변경될 때마다 지도에 그려치는 Marker와 PolyLine을 구심점으로 자동으로 가운데로 위치 시켜주어 사용자가 지도를 편하게 볼 수 있게함

문제 상황

위도와 경도의 위치에 대한 Bounds를 알 수 없다는 에러가 생김

문제해결을 위한 시도

1. 검색했을 때 활용했던 fitbound의 방식을 응용하여 접근
2. 검색했을 때는 하나의 위도, 경도의 정보만을 가져왔지만 여러개의 위도 경도 정보가 쌓이게 될 경우 해결 방법이 필요함
3. Google map react 패키지 안에 bounds를 정의하고 extend를 활용하여 위도 경도의 위치를 확장시켜줄 수 있다는 문서를 발견하여 적용

해결방안

Goole map react 컴포넌트 안에 fitbound.js 파일을 만들어주었고 Google map이 새롭게 렌더링 될 때만 fitbound가 적용될 수 있도록 조건을 적용

web socket

도입 이유

좋아요, 댓글, 답글, 채팅 등의 실시간 알림기능을 만들기 위함

문제 상황

알림기능을 만들기 전에는 socket을 js파일로 따로 만들어 놓은 후 socket이 사용되는 컴포넌트에 import를 해서 사용하는 방식이엿는데 import를 하는 컴포넌트마다 새로운 소켓을 생성한다는 문제가 생김.

해결 방안

웹이 렌더링이 된 직후 socket을 리덕스 스토어에 저장한뒤 필요한 컴포넌트에서 스토어에 있는 socket을 가져다 쓰는 방식으로 수정

무한스크롤 적용

도입 이유

1. 서버에서 전체 데이터를 받아올 경우 클라이언트 과부하를 막기 위함
2. 페이지네이션과 무한스크롤 중 모바일 사용 환경에 더 적합하다고 판단하여 선택

❓문제 상황 1

받아오는 데이터가 없을 경우에도 로딩이 계속되며 무한루프 발생

문제해결을 위한 시도

1. 로딩이 바뀔 때마다 실행되는 useeffect에 조건을 줌
2. pagenumber가 바뀔 때마다 실행되는 useeffect에 조건을 줌

해결 방안

2. pagenumber가 바뀔 때 마다 실행되는 useeffect에 조건을 줌.

• 로딩이 바뀔 때마다 실행되는 useeffect에 isIntersecting(노출 여부)가 true일 때, pagenumber가 endpage와 동일하면 null을 return하도록 했지만, endpage를 인식하지 못하고 계속 무한루프에 빠짐

• pagenumber바뀔 때 실행되는 useeffect에 "endPage !== 0 && pageNumber > endPage"와 같은 조건일 경우 null을 return하도록 하니 endpage에 달했을 때 페이지 로딩이 멈춤

❓문제 상황 2

전체 데이터 또는 카테고리 선택시 데이터를 받아올때 prevstate를 이용해 이전 state값 뒤에 데이터를 추가해주는데, 전체 여행에서 카테고리를 선택하는 경우, 전체 데이터 뒤에 선택한 카테고리 데이터가 추가됨

문제해결을 위한 시도

1. 카테고리 모달을 닫을때, state 값을 빈배열로 설정
2. 카테고리 모달을 닫을때, state 값을 빈배열로 설정하고, pageNumber도 1로 설정

해결 방안

• 먼저 데이터를 추가하는 Feed(state)만 빈배열로 설정하니, 렌더링 되었을때 pageNumber가 1씩 증가해 첫페이지가 아닌 다음페이지를 불러와서 실패함
• 다음으로, 모달을 닫을때, Feed(state) 값을 빈배열로 설정해주고, pageNumber 값을 1로 설정하니 문제를 해결함

✨ 추가로 개선해야 할 사항

해당 기능은 API와 컴포넌트가 얽혀있어 다른 컴포넌트에서 활용하기가 힘듬, 추후에 기능 작성 시에는 기능을 분리해서 독립적으로 활용 가능하도록 개선해야겠다는 생각을 함

📑서비스 아키텍처

👀피드백 및 개선점

[피드백1] 이용하다가 일정 수정을 클릭하니 모든 날짜가 선택된 것처럼(보라색으로) 나오고 그대로 등록완료 누르면 invalid date로 나옴

문제점: 데이터를 받아올 때 날짜 데이터 형식이 맞지 않음

피드백 개선: DB에서 Day 리스트를 받아 왔을 때 날짜 데이터를 moment 라이브러리를 사용하여 날짜를 새롭게 정립시켜주고 DatePicker 라이브러리가 적용할 수 있는 데이터 형식으로 수정하였음

[수정 전, 후]

[피드백2] 모바일에서 스크롤 내리면 네비바가 올라옵니다.

문제점: 전체 높이를 100vh주었을 때 모바일에서 웹을 실행하게 될 경우 모바일 브라우저 네비게이션바 위로 웹이 실행

피드백 개선: 전체 높이를 100%로 수정하고 position: fixed, overflow: hidden을 주어 모바일 화면에서도 전체 웹을 볼 수 있도록 수정

[피드백3] 이미지 렌더링 속도가 너무 느립니다.

문제점: 이미지를 업로드 할 경우 이미지 데이터 용량 그대로의 데이터를 업로드하고 데이터를 내려 받기 때문에 모바일 화면에 맞지 않게 데이터 용량이 크다

피드백 개선: 이미지를 업로드 할때 browser-image-compression 라이브러리를 활용하여 이미지를 1MB 이하로 압축시켜 Blob형식을 File 형식으로 변환하여 FormData에 담아 서버전송

[피드백4] 여행기 작성시 컨셉 태그를 다양하게 누를 수 있다면 좋겠어요! (ex.여행 스타일 - 먹방투어/호캉스 동시 선택 가능하게)

피드백 개선: 유저 입장에서 여행 스타일 항목을 여러 개 선택하고 싶어도 하나의 항목만 선택 해야 하는 단점이 있어 여러 항목을 선택 가능하도록 수정함