채팅방 구현 #81
Merged
채팅방 구현 #81
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- web api 의 Intersection Observer를 범용적으로 사용하기 위해 작성되었습니다 . - 특정 엘리먼트가 intersect 될때 실행이 될 Callback과 초기 설정을 인자로 받고, react element에 ref로 할당 가능한 node(useRef의 결과)와 observer를 반환합니다. - 결과적으로 하나의 Observer를 여러 컴포넌트에서 hooks로서 사용할 수 있습니다.
- Material ui에서 사용되는 공통된 custom 스타일을 관리합니다.
BREAKING CHANGE: 추후 모든 엘리먼트 사이징에 기본적으로 border-box가 적용됩니다.
- 빠른 개발을 위해서 초기 채팅 데이터를 가상으로 생성
- 여러 컴포넌트에서 공통으로 사용 가능한 socket연결을 만들었습니다. - 이 컴포넌트는 Context api를 이용하여 작성되었으며, 사용 되고자 하는 컴포넌트 상위에 ChatSocketProvider를 사용하고, 하위에서 useContext를 통해 socket에 접근할 수 있습니다. - context를 생성하며 가장 깊이 생각한 부분은, 1. component re rendering시에 socket의 재 연결 방지(추가적인 연결) 2. 하나의 socket 객체를 여러 컴포넌트에서 사용 가능. 그 과정에서 socket은 동이한 connection을 사용 - 기존에 작성된 방식은, 하나의 컴포넌트에서 useEffect와 useRef의 조합으로 작성하였습니다. 이렇게 생성된 socket connection을 유지한채로 다른 컴포넌트로 전달하는것은 쉬웠으나, react router를 통해 page 전환시에 그 값을 같이 전달하기에 어려움이 있었습니다. - 이를 해결하기 위해 useHistory에 state를 넘기는 시도를 하였으나, 그 값에 socket이 포함될 수 없었습니다. - 마지막으로, socket의 connection을 component(ChatSocketProvider) 내부의 useEffect 에 포함하여 react의 생명 주기를 따르려 하였으나, 현재와 같은 방식으로 파일을 읽어올 때 한번의 생성만 하는 방식으로 수정하였습니다. - 책에서 본 내용에 의하면, 이 방법이 Node의 환경에서 항상 동일한 결과(동일한 socket객체)를 제공하진 않지만, 시도해볼 좋은 방법입니다.
- 시간에 대하여 반복되어 사용되는 형태를 함수화 하고, 이를 util에 포함 - 주로 시간을 포맷팅 하는 함수에 대한 내용임
- 채팅 방에서 사용자에게 보여지는 UI/UX를 위한 컴포넌트 - prop types를 통해 최소한의 type check 완료 - 자주 쓰이는 로직을 util로 분리 - material ui의 makeStyles를 이용하여 class별로 스타일링 적용
- 1:1 채팅 화면 구현. - 다음과 같은 특징을 갖음 1. 새로운 채팅 메세지는 화면의 아래에서 시작 2. 과거 오래된 메세지는 화면의 상단에서 계속해서 불러옴 3. 과거 오래된 메세지를 불러오기 위해서 Intersection Observer를 이용하였고, 상단의 엘리먼트에 닿았을 때 추가적으로 서버로부터 과거의 채팅 메세지를 불러와서 렌더링( Intersection Observer 는 custom hooks로 제작) 4. 과거 메세지가 추가적으로 화면의 위에 쌓여도, 스크롤을 조정하여 보고 있는 화면은 그대로 유지(새로운 엘리먼트들이 상단에 들어와도, 화면은 현재 보이는 곳에 유지한 채로, 스크롤만 조정) 5. 상대방 혹은 사용자가 새로운 채팅 메세지 입력시에, 스크롤이 자동으로 해당 부분으로 포커싱 6. 전체적으로 서버와 Socket.IO 연결을 통해 메세지를 주고받음
- 1:1 채팅 방에서 상단에 존재하였던 infinite scroll을 제거하였습니다. 이유 1) 우리의 서비스는, 구매자-판매자-판매상품에 고유한 채팅방이 생성됩니다. 이는 구매자-판매자에 고유한 채팅하는 것 보다 적은 양의 메세지가 생성됩니다. 보통의 경우, 판매상품을 구매를 위해 적은양의 메세지를 주고 받은 뒤에 다시 사용되지 않는 경우가 일반적 입니다. 따라서, lazy loading할 정도록 많은 양의 메세지가 없을 것이라는 가정에서 제거하게 되었습니다. 이유 2) 현재 채팅방의 대화내용 저장을 위해서 Mongodb를 사용하고 있습니다. 구매자-판매자-판매상품에 고유한 채팅방 ID가 생성되고, 그 안에 대화내용은 messages라는 field에 array형태로 쌓이게 됩니다. 보통의 경우, findById를 통해 해당 채팅방의 내용을 한번에 받아오고, 그 속에 모든 대화 내용이 포함되어 있습니다. 따라서, 추가적으로 받아 올 과거 채팅 내용에 대한 기능이 불필요하여 제거하였습니다.
- 채팅 페이지에 입장하기 위한 임시 페이지 입니다. - 현재 인증에 관련된 기능이 구현되 있지 않은 상황에서, 임의의 값을 통해 채팅방을 생성할 수 있는 로직을 포함하고 있습니다. 기능 요약 - 구매자 & 판매자 ID를 입력하고, 방에 입장하기 버튼을 누르면 다음과 같은 순서를 거칩니다. 1) 구매자,판매자,상품ID 에대한 정보를 보내고 채팅방 ID를 생성/찾은 결과를 받아옵니다. 2) 해당 채팅방 ID를 socket에 전달하여 chat namespace를 갖고, 채팅방ID를 room으로 갖는 방에 입장하게 됩니다. 3) react router의 useHistory를 이용하여 채팅방 페이지로 이동합니다. - 채팅 ID를 입력하고, 방에 입장하기 버튼을 누르면 다음과 같은 순서를 거칩니다. 1) 채팅방 ID를 socket에 전달하여 chat namespace를 갖고, 채팅방ID를 room으로 갖는 방에 입장하게 됩니다. 2) react router의 useHistory를 이용하여 채팅방 페이지로 이동합니다.
- react router를 포함 - react router를 통해 채팅방을 위한 route를 설정
Johnie-Yeo
requested changes
Dec 9, 2019
- PR에서 제시된 의견을데 따라 소수의 오타등을 수정하였습니다.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
PR에 대한 요약
상품에 대해 구매자와 판매자가 사용 가능한 1:1 채팅 기능입니다.
PR에 대한 동기와 상황에 대한 설명 부탁드립니다.
유저스토리 #77 에 구체적인 설명이 포함되어 있습니다.
구매자가 판매자에게 상품에 대해 문의를 하고 대화를 나누는 기능을 제공합니다. 이 과정에서 대화 내용을 저장되어 여러 디바이스에서 접근이 가능하고, 대화에 참여한 유저들만 접근이 가능하도록 로직이 작성되었습니다.
세부 작업으로는 다음 이슈를 포함하고 있습니다.
이번 코드는 어떻게 테스트 되었나요?
테스트를 아직 포함하고 있지 않습니다.
결과물 스크린샷 (선택) :
어떤 변화인가요?
체크리스트:
본 PR은 다음 이슈에 해당하는 내용입니다.
Closes #78