잇츨링 (eatsring)

잇츨링 바로가기

시연 영상

MEMBERS

이진혁	이상민
Frontend	Frontend

1️⃣ 프로젝트 설명 🍽

“평소에 가보고 싶었던 신상 카페, 맛집 등 같이 다녀올 사람들을 잇츨링에서 찾고 다 같이 가자❗️”

잇츨링(eatsring)은 평소에 가고 싶었던 가게나 맛집들이 있지만, 같이 갈 사람이 마땅치 않아
가지 못했던 사람들을 위해 만든 서비스입니다. 

잇츨링에서 유저가 원하는 시간, 날짜에 같이 방문할 새로운 사람들을 모집하고 찾을 수 있으며 
파티를 등록한 유저는 본인이 원하는 성별, 나이대를 설정하여 특정 유저만 받을 수도 있습니다.  

지금 바로 잇츨링에서 새로운 인연들과 함께 맛집을 다녀보세요!

저희의 프로젝트가 더 궁금하신가요?⤵️

잇츨링 팀 노션

잇츨링 인스타그램

2️⃣ 프로젝트 요약 🍽

• 기간 : 2022.04.22 ~ 2022.06.03
• 개발 언어 : Javascript
• 개발 라이브러리 : React
• 배포 환경 : netlify
• 협업 툴 : Git / Notion / Figma

3️⃣ 아키텍처 🍽

4️⃣ 프로젝트 주요기능 🍽

① 로그인 페이지

• 카카오톡 api를 이용한 소셜 로그인
• 이미지 슬라이드를 통한 서비스 3장 요약
• 최소한의 페이지 구성으로 인한 유저의 편의성 증대

② 유저 초기 설정 페이지

• 성별, 연령대, 지역, 등 자신의 정보를 선택 해 원하는 파티를 쉽게 찾을수 있음
• 인스타그램 아이디 입력을 통해 초기 설정 페이지에서 받는 정보에서 부족한 점을 보완 가능

③ 파티 등록, 수정 페이지

• 식당 음식 이미지가 없어도 기본 이미지 선택을 통해 쉽게 사진 선택 가능
• 식당을 고를 때 현재 위치 근처 식당이 먼저 나와 쉽게 근처 맛집을 찾을 수 있음
• 인원수,연령대, 성별을 선택 가능해 내가 실제로 만나는 사람에 대한 불안감을 줄일수 있음
• 파티 수정을 통해 잘못된 정보 기입이나 수정하고 싶은 정보를 언제든 수정 가능

④ 메인 페이지

• 이용 가이드가 홈 화면 위에 떠있어 이 서비스를 어떻게 이용할 지 모르겠을 때 언제든 열람 가능.
• 참여할 파티, 찜한 파티 등을 통해 내가 신청하거나, 관심있는 파티 쉽게 확인 가능
• 파티 탐색을 통해 시, 구 데이터만 입력해도 그 지역의 파티가 전부 떠서 위치 기반 파티 용이

⑤ 채팅 페이지

• 채팅 방 나가기 기능을 통해 받기 싫은 유저의 메세지 거절 가능
• 메세지를 보낸 시간이 떠서 언제 유저와 채팅을 했는지 시간 확인 가능

⑥ 마이페이지

• 참여 히스토리를 통해 내가 참여했었던 파티 확인 가능
• 로그아웃, 회원탈퇴를 통해 유저의 개인정보를 안전하게 수정 가능.
• 프로필 수정을 통해 자신의 개인 취향, 인스타 아이디 변경등 개인 정보가 바꼈을 때 언제든 수정 가능

5️⃣ 트러블 슈팅 🍽

채팅 끊김 현상

useRef를 이용한 채팅 Input 값 관리

• 문제 상황
  • 간헐적으로 웹소켓 끊김 현상.
  • 채팅 input 창 안에서 타이핑 속도가 느려지는 현상.
• 문제 원인
  • 사용자가 채팅 메시지 작성 시, onChange 이벤트와 동시에 이벤트의 value값을 useState로 변경시키며 입력값을 관리.
  • 이로 인해 타이핑 할 때마다 과도한 리렌더링이 발생.
  • 과도한 리렌더링 때문에 웹소켓이 끊어지고 인풋값의 타이핑 속도가 느려지는 성능저하 및 이슈 라고 판단.

• 문제 해결
  •  ref.current 값이 변경될때 리렌더링이 발생하지않는다는 점에서 useState에서 useRef를 활용하기로 결정.
  • 웹 소켓 끊어짐 현상과 채팅 속도가 느려지는 이슈가 해결.

이미지 업로드시 발생하는 로딩 지연

이미지 리사이징

• 문제 상황

  • 프로필, 파티 등록 페이지에서 이미지를 업로드할 시 발생하는 지연 현상
  • 메인페이지에서 내려주는 파티 리스트들의 로딩 지연 현상

• 문제 원인

  • 이미지의 크기가 과도하게 클 경우 http body에 담기지 않는 문제라고 판단.(413
    Request Entity Too Large Error)

• 문제 해결
  • 라이브러리(react-image-file-resizer)를 사용하여 이미지 압축
  • 리사이징 전 대비 파일 크기가 현저히 낮아지고 로딩 및 업로드시 속도 개선.
  • 사진 크기를 줄여서 백엔드에 들어가는 용량도 아낄수 있게 됨.

Netlify 404 Not Found 오류

_redirects

• 문제 상황
  • netlify로 배포 후 모든 페이지에서 404 not found 오류가 발생하면서 아무런 페이지도 보여주지 못 하는 이슈가 발생.
• 문제 원인
  • 리액트의 경우 SPA(Single Page Application)이기 때문에 오직 하나의 페이지인 index.html만 렌더링
  • root가 아닌 페이지에 접속할 때 netlify는 route를 처리하는 방법을 알 수가 없기 때문에 발생하는 것으로 판단.

• 문제 해결
  • netlify는 client 측에서 처리되지 않는 URL을 처리할 수 있도록 _redirects라는 파일을 제공
  • 프로젝트 내의 public/디렉토리 내의 _redirects 파일을 만들어 해결

6️⃣ 피드백 개선 🍽

악의적인 유저 신고 기능 추가

• 피드백

단순히 맛집이나 새로운 곳을 가기 위한 목적이 아니라 불순한 의도나 이성과의 만남 그 자체에 
목적을 둔 유저들이 있을 수도 있다는 생각이 들었습니다. 이를 위해 유저에 대한 신고 기능이
있으면 좋겠습니다.  

• 개선 내용
  • 프로필 화면 우측 상단에 신고기능이라는 것을 알 수 있는 이미지를 넣고 모달을 통해 해당 기능을 이용할 수 있도록 기능 추가.
    또한 이 유저를 왜 신고하는지 이유도 나눠져 있어서 악의적인 유저 세분화 가능

서비스에 대한 이해 부족으로 이탈률이 높아지는 것에 대한 이슈 개선

• 피드백

서비스 이용 가이드가 없어서 아쉽습니다 ㅜㅜ 서비스 이용 가이드 버튼이나 탭이 있으면 
너무 좋을 것 같습니다!! 

• 개선 내용 - 홈 화면에서 책자 버튼을 클릭하면 언제든지 서비드 가이드를 확인 할 수 있어서 앱 사용에 대한 전반적인 이해도를 높임.

지역필터 수정

• 피드백

파티 탐색 시 시/도만 입력해도 해당 시/도의 모든 파티 데이터가 나오면 좋을 것 같아요

• 개선 내용
  피드백을 통해 시만 클릭해도 해당 시의 모든 파티가 나오는게 좋겠다는 것을 인지.
  전체 회의를 통해 시만 클릭해도 파티가 다 나오게 구현 완료. 또 지역을 입력하면 그 지역의 파티만 나와서 내가 원하는 지역의 파티를 쉽게 찾을 수 있게 됨

``

현재 위치 기반 식당 찾기

• 피드백

지도 실행시 현재 위치 기반으로 지도 이동이 되었으면 더 편할 것 같아요.

• 개선 내용
  피드백을 통해 현재 위치 근처에 식당이 나오는게 좋음을 인지. 전체회의를 통해
  1.지도 클릭시 현재 위치 확인 가능
  2.맛집 검색시 현재 위치 근처에 맛집들 검색 가능
  등의 기능을 추가해 위치 기반 파티를 더 용이하게 함.

``

``

하단 아이콘 디자인 수정

• 피드백

하단 gnb바의 말풍선모양을 메세지로 인식하지 못하고 커뮤니티로 알았어요. 
하단 바 디자인이 조금더 명확했으면 좋겠어요.

• 개선 내용
  피드백을 통해 하단바 디자인이 명확하지 않음을 인지. 전체회의를 통해
  하단바에 글자를 추가 + 조금 더 명확한 다자인으로 변경.

(변경 전)

(변경후 )

더 많은 피드백 개선 사항을 보시려면? ⤵️

잇츨링 유저 피드백 개선 사항

7️⃣ 사용한 라이브러리(패키지)

라이브러리명	내용	참고
axios	서버통신
redux	상태관리
lodash	디바운스를 이용한 무한스크롤 구현
history	history 동기화
styled-component	컴포넌트 스타일링
material-ui	달력, 시간, 탭바
react-slick	이미지 슬라이더
react-modal	팝업창 기능
react-image-file-resizer	이미지 리사이징
stompjs	소켓 통신	실시간 채팅
sockjs-client	소켓 통신	실시간 채팅
date-fns	한국 날짜로 설정
react-device-detect	모바일 최적화