MasonTALK 개인 프로젝트 3일차(2023.04.28.)

🕹 3일차 구현 사항

프론트엔드

1. 클릭한 채팅바의 메시지 내용 불러오기: Context API를 사용한 상태 관리(currentChat, messages)
2. 메시지 보내기 (소켓 통신 미적용 yet)

🚀 트러블슈팅

1. 채팅방 메시지 내용 불러오기

• WHAT? 메시지 목록을 불러오는 로직 구현의 어려움
• HOW? Context API를 사용한 상태 관리

채팅방 목록은 불러왔지만 각 채팅방의 메시지 내용을 불러오는 구체적인 로직을 짤 때 어려움을 겪었습니다.

서버 엔드포인트를 만들어 놓은 상태였기 때문에 정보들을 불러올 수 있었습니다.

하지만 불러온 정보들을 어떻게 화면에 렌더링할지 구체적인 flow가 떠오르지 않았습니다.

곰곰이 생각하던 중, 채팅방을 클릭하는 이벤트에 주목했습니다.

"클릭한 채팅방을 상태변수(currentChat)로 관리하자!"

생각했던 흐름을 간단하게 정리하겠습니다.

1. 우선 Chat 컨텍스트에 useEffect 훅을 생성했습니다. 선택한 채팅방이 바뀔 때마다 다른 메시지 내용을 불러오기 위해 useEffect 의존성 배열에 currentChat 상태변수를 넣었습니다. currentChat 객체 안에는 채팅방 id가 있기 때문에 useEffect훅 안에서 메시지 내용 GET 요청을 보낼 때 사용했습니다.
2. GET 요청의 결과로 불러온 메시지 내용이 담긴 배열은 별도의 messages 상태변수로 관리했습니다.

2. 유저간 채팅 내용 실시간 동기화

• WHAT? 유저끼리 채팅을 하면 실시간으로 동기화가 되지 않는 문제
• HOW? socket.io 적용

아직 웹소켓을 적용하지 않았기 때문에 새로고침 버튼을 눌러야만 메시지 내용이 동기화되는 문제가 있었습니다.

빠르게 공식 문서와 관련 개념을 익힌 후에 살펴볼 예정입니다.