The modu6ah's intro from maiowol

🎈 프로젝트 소개

공동육아를 함께 할 멤버를 모집하고 육아템, 장소 등 다양한 꿀정보를 공유하는 커뮤니티

🗓 프로젝트 기간 & 팀원 소개

2022.06.24 ~ 2022.08.02 ( 6주 ) 👩 김숙영 🧑 정인성

🛠 서비스 아키텍쳐

✨ 기능

💌 로그인 & 회원가입

💡 로컬 회원가입 시 사용자는 이메일 인증을 통해 회원가입을 진행할 수 있습니다.

💡 로컬 로그인과 카카오 소셜 로그인 둘 중 편리한 방법을 선택하여 로그인할 수 있습니다.

💌 메인 페이지

💡 카테고리별로 게시글을 볼 수 있습니다.

💡 체험모집 게시글은 모집중이면서 최근 게시글 기준으로 6개씩 보여줍니다.

💡 장소추천 게시글은 별점이 높으면서 최근 게시글 기준으로 2개씩 보여줍니다.

💡 육아템 리뷰 게시글은 최근 게시글 기준으로 2개씩 보여줍니다.

💌 체험모집 게시글

💡 원하는 게시글을 클릭하고 상세보기로 들어가면 댓글을 작성할 수 있습니다.

💡 무한 스크롤을 통해 게시글을 조회할 수 있습니다.

💡 게시글 수정 시 토글을 통해 모집상태를 수정할 수 있습니다.

💌 장소추천 게시글

💡 게시글 작성 시 다중 이미지를 업로드할 수 있습니다.

💡 무한 스크롤을 통해 게시글을 조회할 수 있습니다.

💡 게시글 조회 시 카카오맵을 통해 장소를 한눈에 볼 수 있습니다.

💡 원하는 게시글을 클릭하고 상세보기로 들어가면 댓글을 작성할 수 있습니다.

💌 육아템 리뷰 게시글

💡 게시글 작성 시 다중 이미지를 업로드할 수 있습니다.

💡 무한 스크롤을 통해 게시글을 조회할 수 있습니다.

💡 원하는 게시글을 클릭하고 상세보기로 들어가면 댓글을 작성할 수 있습니다.

💌 1:1 실시간 채팅

💡 체험모집 게시글에서 관심있는 게시글에 대해 1:1 채팅을 할 수 있습니다.

💡 로그인한 상태에서 1:1 실시간 채팅이 오면 화면 왼쪽 아래 알림이 뜹니다.

💌 게시글 검색

💡 게시글의 제목과 내용에 포함된 검색어를 입력하면 검색어가 포함된 게시글을 카테고리별로 보여줍니다.

💡 검색한 게시글을 클릭하면 해당 게시글의 상세페이지로 이동합니다.

💌 마이페이지( 프로필조회 / 북마크 조회)

💡 프로필 조회에서 프로필 이미지 및 자기소개 수정을 할 수 있습니다.

💡 북마크 조회에서 본인이 북마크한 게시글에 대한 정보를 카테코리별로 한눈에 볼 수 있습니다.

🚀 기술 스택

📓 라이브러리

프로젝트에 사용된 라이브러리😀

이름	사용 이유	버전
axios	서버 & 클라이언트 데이터통신	0.27.2
animate.css	애니메이션 효과	4.1.1
react-daum-postcode	주소 검색	3.1.1
react-scroll-to-bottom	채팅창 스크롤 자동하단	4.2.0
react-redux	전역 상태 관리	8.0.2
redux-thunk	비동기 통신 미들웨어	2.4.1
react-toastify	토스트 알림 기능	8.2.0
socket.io-client	실시간 채팅 기능	4.5.1
sweetalert2	디자인 된 알림창	11.4.23
react-modal	모달창 띄우기	3.15.1
react-datepicker	달력 띄우기	4.8.0
react-infinite-scroll-component	무한 스크롤 구현	6.1.0
styled-components	스타일 css	5.3.5
react-router-dom	라우터	6.3.0
react-icons	리액트 아이콘	4.4.0
react-device-detect	모바일 감지	2.2.2

💢 트러블 슈팅

Socket.io 특정 사용자에게 데이터가 오지 않는 문제

🔴 문제 상황

Client 가 특정 경로로 보낸(emit) 메시지를 Server 측에서 특정 경로로 받고(on) 다시 다른 경로로 전송(emit)해주는데 전체로 돌려주게 되면
데이터가 들어오지만 특정 사람(user_id 또는 nickname)을 지정하면특정 사람에게 데이터가 오지 않는 문제 발생

🟠 발생 원인 및 해결 시도

사진속 io.emit으로 코드를 짜기전 아래의 5가지의 특정 조건을 붙혔다

io.to(‘user’).emit ( X )
io.in(‘user’).emit ( X )
socket.to(‘user’).emit ( X )
socket.broadcast.to.emit ( X )
socket.broadcast.in.emit ( X ) -> 발신자를 제외한 모두 , 한명의 사용자만이 가지고 있는 고유한 소켓ID 로 데이터를 보낼려 했으나 실패

🟢 문제 해결

소켓 라이브러리의 버그로 판단하여 io.emit으로 전체로 데이터 값을 받은 뒤 프론트에서 필터링 하기로 결정

하나의 메시지에는 이러한 데이터가 포함 되어 있다 이 데이터를 이용하여 전체로 받은뒤 2가지 조건을 걸어 필터링

1 . 데이터를 보낸 사람과 나의 닉네임이 다를 경우에만 알림 토스트를 생성하여 자신에게 알림이 오는것을 막음
2 . 데이터를 받는 사람과 나의 닉네임이 같은 경우에만 알림 토스트를 생성하여 해당 유저에게만 알림이 가도록 설정

socket.io 채팅 중복 문제

🔴 문제 상황

실시간 채팅을 하게 되면 한번 작성한 채팅이 2번 또는 4번 .. 8번 .. 으로 찍히는 문제 발생

🟠 발생 원인 및 해결 시도

특정 이벤트 경로로 이벤트를 발생 시키고 데이터를 받고 보내게 되는데 발생한 이벤트를 제거해주지 않았던 것이였다

따라서 적을 때마다 계속 랜더링이 되고 그 이벤트는 계속 쌓이게 된다

🟢 문제 해결

socket.off로 이벤트에 대한 리스너를 제거해주면 채팅 중복 문제가 해결 된다

🎧 유저 & 개발자 피드백

유저 피드백 1번 ( 채팅창 개선 )

🎨 와이어 프레임

⭐ Figma

maiowol / modu6ah Goto Github PK

modu6ah's Introduction

🎈 프로젝트 소개

🗓 프로젝트 기간 & 팀원 소개

2022.06.24 ~ 2022.08.02 ( 6주 ) 👩 김숙영 🧑 정인성

🛠 서비스 아키텍쳐

✨ 기능

💌 로그인 & 회원가입

💡 로컬 회원가입 시 사용자는 이메일 인증을 통해 회원가입을 진행할 수 있습니다.

💡 로컬 로그인과 카카오 소셜 로그인 둘 중 편리한 방법을 선택하여 로그인할 수 있습니다.

💌 메인 페이지

💡 카테고리별로 게시글을 볼 수 있습니다.

💡 체험모집 게시글은 모집중이면서 최근 게시글 기준으로 6개씩 보여줍니다.

💡 장소추천 게시글은 별점이 높으면서 최근 게시글 기준으로 2개씩 보여줍니다.

💡 육아템 리뷰 게시글은 최근 게시글 기준으로 2개씩 보여줍니다.

💌 체험모집 게시글

💡 원하는 게시글을 클릭하고 상세보기로 들어가면 댓글을 작성할 수 있습니다.

💡 무한 스크롤을 통해 게시글을 조회할 수 있습니다.

💡 게시글 수정 시 토글을 통해 모집상태를 수정할 수 있습니다.

💌 장소추천 게시글

💡 게시글 작성 시 다중 이미지를 업로드할 수 있습니다.

💡 무한 스크롤을 통해 게시글을 조회할 수 있습니다.

💡 게시글 조회 시 카카오맵을 통해 장소를 한눈에 볼 수 있습니다.

💡 원하는 게시글을 클릭하고 상세보기로 들어가면 댓글을 작성할 수 있습니다.

💌 육아템 리뷰 게시글

💡 게시글 작성 시 다중 이미지를 업로드할 수 있습니다.

💡 무한 스크롤을 통해 게시글을 조회할 수 있습니다.

💡 원하는 게시글을 클릭하고 상세보기로 들어가면 댓글을 작성할 수 있습니다.

💌 1:1 실시간 채팅

💡 체험모집 게시글에서 관심있는 게시글에 대해 1:1 채팅을 할 수 있습니다.

💡 로그인한 상태에서 1:1 실시간 채팅이 오면 화면 왼쪽 아래 알림이 뜹니다.

💌 게시글 검색

💡 게시글의 제목과 내용에 포함된 검색어를 입력하면 검색어가 포함된 게시글을 카테고리별로 보여줍니다.

💡 검색한 게시글을 클릭하면 해당 게시글의 상세페이지로 이동합니다.

💌 마이페이지( 프로필조회 / 북마크 조회)

💡 프로필 조회에서 프로필 이미지 및 자기소개 수정을 할 수 있습니다.

💡 북마크 조회에서 본인이 북마크한 게시글에 대한 정보를 카테코리별로 한눈에 볼 수 있습니다.

🚀 기술 스택

📓 라이브러리

💢 트러블 슈팅

🎧 유저 & 개발자 피드백

🎨 와이어 프레임

Recommend Projects

Recommend Topics

Recommend Org