📝 PAPER

화상으로 소통하는 블로그 플랫폼

자신의 생각을 글로 적어보아요.

공감 가는 글을 읽고 블로거 주인과 소통하고 싶나요?

나의 생각을 공유해 나뭇잎을 모으고 댓글뿐만 아니라 화상채팅으로 소통할 수 있습니다.

자신만의 이야기로 소통할 수 있는 블로그 PAPER

사이트 주소 Link.

시연 영상 Link.

📆 프로젝트 기간

• 2022.06.24 - 2022.08.06

📖 주요 기능

1. 글 작성, 수정, 삭제 ( + 댓글 )

자신의 생각이나 지식을 마크다운 형식으로 자신의 Paper에 작성 가능합니다!

2. 타 블로거에게 화상 채팅 예약하기

블로거가 쓴 글에 궁금한점이나 알고 싶은 것에 대한 질문에 답변이 달리는걸 더이상 기다리지 마십쇼!

1. A블로그의 개인 페이지에 들어가서 채팅 예약하기를 누른다.
2. 예약 페이지에서 원하는 시간대에 예약을 한다.

3. 화상채팅

블로거와 집적 대화를 하며 의사소통하며 서로의 의견을 주고 받을수 있는 기회가 이곳에 있습니다!

1. 오른쪽 위 자신의 사진을 눌러 ‘예약 리스트’로 들어와 타 블로거가 예약을 수락하면 양쪽에서 Start라는 화상 채팅이 가능해지는 버튼으로 바뀐다.
2. start를 눌러 채팅방에 들어온 후 ‘화상채팅 연결’을 누르면 상대방에게 연결 신호가 가고 ‘화상채팅 연결’ 버튼은 ‘Answer’로 바뀐다. 그 후 ‘Answer’ 버튼을 누르고 입장한다.
3. 둘만의 채팅룸에서 화상 대화 or 채팅을 한다.

4. 금주의 인기Paper와 인기 블로거를 확인

좋아요를 가장 많이 받은 Paper와 가장 인기가 좋은 블로거를 메인페이지에서 확인 가능합니다!

1. 메인 페이지 상단의 카테고리란에서 카테고리에 맞는 글들을 모아 볼수 있습니다.
2. 검색으로 원하는 글을 찾으실수 있습니다.
3. 좋아요 순으로 메인 페이지의 상단에 금주의 best Paper가 기재 됩니다.
4. 화상채팅을 통해 인기도가 오른 순으로 인기 블로그란에 기재 됩니다.

🧱 아키텍쳐

🛠 기술 스택

💻 라이브러리

이름	사용 이유
React	Component 단위의 작성을 통해 UI를 구성하는 개별적인 뷰단위의 개발을 하여 하나의 컴포넌트를 여러 부분에 다중 사용할수 있게 만들거 생산성과 유지 보수를 용이하게 하고 JSX를 사용해 컴포넌트를 쉽게 구성할수 있도록 해주며 Vitual DOM을 이용해 연산 비용을 줄일수 있기에 React 라이브러리를 사용하게 되었습니다.
Reqct-Query	store에 전역에서 사용하지 않는 서버 데이터가 쌓이는 게 비효율적이라고 판단하여 React-Query로 서버로 부터 받은 데이터를 관리하였습니다. 추가로 React-Query를 사용할 시 코드가 단순화 되고, option을 사용한다면 다양한 기능들을 간단히 추가시킬 수 있기에 다른 기술이 아닌 React-Query를 사용하게 됐습니다.
socket.io, WebRTC	WebRTC는 HTML5에 내장된 API지원으로 최신브라우저에서 재생가능하고 대표적인 화상채팅 기술이어서 선택, peer간의 초기 연결 및 room을 통한 실시간 채팅기능 구현을 위해 WebSocket보다 유연한 socket.io를 선택
Axios	우선 Fetch 같은 경우 호환성이 떨어져 웹브라우저가 구버전일 경우 지원하지 않는 경우가 있으며, Fetch에 비해 객체의 형태로 Param이나 Query를 성정할수 있어 가독성이 뛰어나며, 따로 JSON형태의 변환이 필요없이 자동 변환이 되고 개선된 error handling의 성능을 가지고 있기에 Axios를 사용하게 되었습니다.

🔥 트러블 슈팅

➡️ 채팅을 보낼때 여러번 출력되는 현상이 발생하였다.

해결방안

• 채팅에서의 소켓연결과 화상채팅에서의 소켓연결을 따로 하다보니 socket이 중복으로 연결되어 메세지가 여러번 찍히는 현상이 발생, context provider로 socket 연결 후 사용하는 컴포넌트에 import를 해서 사용하는 방식으로 변경

결과

• 소켓이 한번만 연결되어 채팅이 여러번 출력되는 현상이 사라졌다.

➡️ 예약 수락, 취소 버튼 클릭시 상태값 변화에 따른 렌더링이 바로 일어나지 않았다.

해결방안

• 부킹리스트에서 상태값에 따른 렌더링을 할수가 없어서 부킹리스트 안의 부킹 아이템 컴퍼넌트 안에서 useEffect를 통해 상태값 변화에 따른 리렌더링을 시켜 주었다.

결과

• 버튼 클릭시 새로고침이 필요 없이 바로 상태값 변화에 따른 화면을 렌더링 해주었다.

😎 팀원

구자덕	임운철	정대규	문광민	송민지	박선우	김성준
Frontend	Frontend	Frontend	Backend	Backend	Backend	Backend