서핑에 관심이 있는데 막상 처음하시긴 두려우신가요?
아님 함께 서핑을 즐길 사람들을 찾고 싶으신가요?
혹시 자신만 아는 서핑 장소들을 사람들과 공유하고 싶은 생각이 있으신가요?
그런 분들을 위한 모두의 서핑 커뮤니티 아나바다 입니다!
아나바다를 통해 함께 서핑을 즐길 친구들을 찾아보세요!
아나바다와 함께라면, 많은 서핑 🍯팁을 공유할 수도 있고,
전국 서핑명소들을 쉽게 찾을수도 있어요!! 이제 서핑 혼자할까봐 걱정하지 말아요!!
2022년 8월 5일 ~ 2022년 9월 15일
| React-Query | FireStore | React | Redux-toolkit | Stomp.js | Websocket | Github | Notion | S3 |
|---|---|---|---|---|---|---|---|---|
 |
 |
 |
 |
 |
 |
 |
 |
 |
| 기능 | 비고 |
|---|---|
| 게시글 CRUD | 게시물 생성 수정 삭제 |
| 검색 및 분류 | 모임 게시글 검색 및 지역별 카테고리 분류 |
| 댓글 CRUD | 댓글 생성 수정 삭제 |
| 마이페이지 | 프로필 사진 변경, 게시글 모임 종류에 따라 모아보기 |
| 소개 페이지 | swiper를 활용하여 유저들에게 편의성 제공 |
| 기능 | 비고 |
|---|---|
| 지도(카카오) | react-kakao-map-sdk 라이브러리를 활용하여 구현 및 서핑 스팟 검색 기능 구현 |
| 회원가입 및 로그인 | react-hook-form을 통한 UI개선과 refresh token을 이용한 access token 재발급 구현 |
| 실시간 알림 | websocket과 stomp를 이용해서 실시간 알림을 구현함 |
| 기능 | 비고 |
|---|---|
| 오픈 모임 CRUD | 오픈 모임 생성 수정 삭제 |
| 검색 및 분류 | 모임 게시글 검색 및 지역별 카테고리 분류 |
| 실시간 채팅 | websocket과 stomp를 이용해서 실시간 채팅을 구현함 |
| 소개페이지 | swiper를 활용하여 유저들에게 편의성 제공 |
- 카카오맵을 통한 해수욕장 날씨 정보를 확인할 수 있어요!
- 검색을 통해 서핑이 가능한 해수욕장을 쉽고 빠르게 찾아볼 수 있어요!
- 게시물을 통해 이미지를 올리고 서핑 관련 정보를 소개할 수 있어요 !
- 좋아요 기능을 통해 게시물을 모아볼 수 있어요!
- 오픈 모임 탭을 이용해 모임을 개설하고 참여할 수 있어요!
- 특정날짜에 모임을 시행할 날짜를 지정할 수 있어요!
- 모임에 참여할 인원을 설정할 수 있고, 모임을 모집하는 기간 또한 지정할 수 있어요!
- 모임에 참여한 목록과 인원수를 확인할 수 있어요!
- 조회수를 기준으로 선정된 인기 모임을 모아서 확인할 수 있어요!
- 상대방의 닉네임을 클릭 해 바로 1:1 채팅을 보낼 수 있어요!
- 채팅방에 입장 시 실시간으로 상대방과 대화를 주고받을 수 있어요!
- 내가 쓴 글에 좋아요와 댓글이 추가 될 경우 실시간 알림으로 확인할 수 있어요!
- 읽은 알림과 안 읽은 알림을 구분할 수 있어요!
- 홈페이지 소개탭도 있으면 좋을거 같아요.
- 홈 화면을 따로 제작을 해서 서비스 설명과 함께 기능들이 제시되면 좋겠어요.
- 모바일로 사용 시 처음 부분에 지도만 덩그러니 나와서 당황했어요. 사용법이 추가된다면 좋을 것 같아요.
👉🏻피드백 반영
- 서비스 소개, 지도 사용법, 채팅버튼으로 구성된 인트로 페이지 만들고, swiper를 사용해 유저에게 편의성 제공.
- 메인페이지에서 서핑장소를 찾아가는 과정에서 너무 많은 클릭 과정이 필요하다고 느꼈습니다.
- 지역이나 해수욕장을 검색할 수 있었으면 좋겠어요.
- 지도에서 한번 클릭으로 해당 지역의 여러 서핑 스팟이 출력되었으면 좋겠어요. 버튼을 누르는 횟수가 많아서 피곤함을 느낄 수 있을 것 같아요.
👉🏻피드백 반영
- 자동완성 기능을 포함한 검색기능을 추가하여 유저가 쉽게 해수욕장을 검색할 수 있게 구현.
- 사파리에서 이용할 때 아래로 스크롤하고 다시 제일 위로 올린 뒤 로그인, 회원가입 클릭을 할 수 없습니다.
👉🏻피드백 반영
- 방어코드 작성을 통해, 회원가입 클릭이 안되는 현상을 방지함.
- 메인 화면의 기능을 더 직관적으로 알 수 있는 이름으로 변경하면 좋을 것 같아요.
- 구글폼을 읽은 후 채팅 기능이 있는 것을 인지하고 나서도 유저에게 채팅을 거는 기능을 찾는데 시간이 오래 소요되었습니다. 버튼 크기가 조금 더 크면 찾기 쉬울 것 같아요.
👉🏻피드백 반영
- 메인화면의 이름을 서핑스팟으로 변경하여 기능을 직관적으로 알 수 있게 함.
- 채팅기능에 대한 설명을 인트로 페이지에 넣고, 버튼 크기를 늘려 찾기 쉽게 변경.
-
스크롤 방향에 따라 헤더가 올라가고 내려오는 반응형 헤더 구현 시도
-
많은 스크롤 이벤트를 제어하기 위해 setTimeout으로 throttling구현. 부드러운 헤더 움직임을 위해 setTime을 50ms로 설정
- 짧은 시간 다량의 스크롤이 발생할 시 헤더의 움직임이 멈추는 현상이 발생(chrome, safari, whale, edge 동일하게 발생)
- lodash 내장 throttling을 사용을 해도 문제가 해결 되지 않았기 때문에 기존 로직에는 문제가 없다고 판단.
- call stack에서의 문제로 방향을 잡고, chrome 93버전 기준 call stack capacity가 대략 14,000개로 측정. 한번에 많은 스크롤이 생긴다면 충분히 call stack에서 문제가 생길 수 있다고 판단.
- throttling로직을 완전히 제거함.
- 이후 safari에서 bounce scroll 현상으로 문제가 생겼지만 방어 코드를 통해서 추가적으로 해결함.
- 카카오 지도에서 마커의 렌더링에 실패
- 카카오 지도는 클러스터 안에 마커를 추가하기 위해서 함수를 통해 html태그로 미리 작성된 마커를 주입하는 방식. 이렇게 했을 시 React에서 마커가 렌더링이 안됨.
- eact는 XSS를 막기 위해서 모든 jsx객체의 $$typeof 항목에 Symbol(“react.element”)를 값으로 설정하고 이 값이 없다면 element 생성을 거부한다.이 부분이 문제가 되기 때문에 마커 element가 거부됨.
- react kakao sdk를 이용해서 리액트 컴포넌트로 리팩토링 된 third-party 패키지를 사용해서 일반 컴포넌트와 동일한 방법으로 마커를 생성하며 문제를 해결함
- 이전 메세지를 무한 스크롤 하는 과정에서 모든 메세지들을 한번에 다 받음
- inview가 화면에 노출되면 데이터를 요청하는데 이전 메세지는 위로 스크롤을 해야하기 때문에 inview로 관찰하는 태그가 위에 있다. 이렇게 되면 inview가 화면에 계속 노출이 되어있어 데이터 요청을 계속 하기 때문에 모든 데이터를 한번에 받아온다.
- useEffect 구문을 통해 inview가 화면에 노출이 되고 메세지가 있을때만 요청을 한다.
- 메세지가 있어도 inview가 계속 노출이 되기 때문에 메세지가 있을때마다 스크롤 조정을 통해서 inview가 화면에 노출되는 것을 막는다.
- 메세지가 변경이 될 때마다 스크롤 위치를 새로운 데이터를 불러오기 전 마지막 채팅이 있던 곳에 스크롤 위치를 유지시켜 문제를 해결.
- 랜더링 마다 클라이언트 생성되어 소켓 반복해서 연결되는 현상
- 소켓을 연결할 때, 2개의 연결이 가게 되는 현상을 발견, client를 변수로 선언하여서 매 렌더링마다 반복하여 client를 생성하는 형태가 되었던 것.
- 리렌더링이 되더라도 계속해서 값을 유지하고, stompClient에 값이 부여되더라도 리렌더링이 일어나게 하고 싶지 않았음. 생성한 client로 연결이 이루어지므로 연결을 유지하기 위해선 client가 유지되어야 한다고 생각함.
- stompClient를 useRef로 관리하는 방법으로 해결.
- 서버데이터 변경 시 바로 반영 안되는 문제
- 쿼리로 받아온 데이터의 수정이 있을때, mutation을 사용해서 invalidate를 시켰으나, invalidate가 제대로 작동하지 않는 문제. 사용자 경험에 문제가 될 것으로 판단.
- 동일한 쿼리키로 인식하지 못한다고 생각해서 쿼리키를 따로 관리해서 동일한 쿼리키를 사용함.
- mutation.mutate의 callback은 컴포넌트 unmount시 정상 작동하지 않음.
- return문과 async await을 사용해서 invalidte 작업을 하게했으나, 일부에선 작동하지 않는 문제 발생.
- invalidteQueries의 refetchType 옵션의 값을 'all'로 수정하여 같은 쿼리키를 모두 invalidate 시켜서 해결.
- 캐시 데이터를 사용하지 않고 네트워크 요청을 하게 됨
- react query에서 prefetch로 미리 데이터를 받아와 캐시에 저장을 하였는데 기존에 캐시에 있는 데이터를 사용하지 않고 네트워크 요청을 하게 됨.
- useQuery로 받아오는 staleTime이 default가 0으로 되어있어서 기존의 캐시에 있는 데이터를 사용하지 않고 새로운 데이터를 받아오는 요청을 하게 된것이다.