MasonTALK 개인 프로젝트 7일차(2023.05.02.)

👷🏻‍♂️ 중간 점검

클라이언트 쪽에서 소켓을 다루면서 에러가 자주 발생했습니다.

이대로는 프로젝트를 마무리하지 못할 것 같아 6일차에는 정리 시간을 가졌습니다.

정리를 하며 소켓 서버와 클라이언트 사이 워크플로우를 살펴봤습니다.

useEffect훅이 업데이트 되는 로직을 단계별로 정리하고 소켓과 통신하며 어떻게 하면 상태관리를 효율적으로 할 수 있을지를 중점적으로 고민했습니다.

그 과정에서 불필요한 상태를 제거함으로써 로직을 단순화하는 작업을 거쳤습니다.

그 결과 작성한 코드의 전체적인 동작 방식에 대해 자신감이 생기는 경험을 할 수 있었습니다.

하루 동안 정리하는 시간을 가지고 마지막 7일차에 프로젝트를 성공적으로 마무리했습니다.

지속적으로 코드를 들여다보고, 코드에 대해 생각하면서 개선점에 대해 끊임없이 생각하는 개발자가 되겠습니다!!

🕹 7일차 구현 사항

소켓 서버

- 🟡 getNotification 이벤트 EMIT: 소켓 서버는 클라이언트에서 발생시키는 sendMessage를 구독중입니다. sendMessage 이벤트가 발생하면 소켓 서버는 getNotification 이벤트를 발생시킵니다. 이벤트를 발생시키는 동시에 클라이언트로 객체를 전달합니다. 전달하는 객체에는 senderId(메시지를 전송한 id)와 date메시지를 전달받은 서버쪽 타임스탬프) 정보가 담겨있습니다.

클라이언트

- 🟡 getNotification 이벤트 ON: 클라이언트 쪽에서 구독중인 이벤트입니다. 이벤트가 발생해 객체를 전달받으면 해당 객체를 상태로 관리합니다. 모든 알림은 notifications 상태로 관리합니다.

- 모든 알림 읽음으로 표시 기능

- 특정 알림 읽음으로 표시: 모든 알림을 읽음으로 표시하는 로직보다 구현하는 과정이 까다로웠습니다. 하지만 notifications 상태와 선택한 채팅방의 상대방 유저 아이디를 불러오는 커스텀훅을 생성한 결과 구현에 성공했습니다.

🚀 트러블슈팅

(사실 모든 과정이 트러블슈팅 과정이었습니다... 😭)

1. 한글 중복 입력 이슈

• WHAT? 한글로 입력한 메시지 전송시 해당 메시지가 중복 전송되는 문제
• HOW? 이벤트 관련 코드 추가

별 문제는 아니었지만 문제 해결 과정이 기억에 남습니다.

가설을 검증하는 과정이 유난히 깔끔했기 때문입니다.

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

1. 한글로 입력한 메시지를 전송하면 메시지가 중복 전송되는 문제가 발생했습니다. 콘솔 출력 결과를 통해 메시지 전송 이벤트가 중복 발생하는 사실을 확인했습니다.
2. 영어로 입력한 메시지도 전송하면 메시지가 중복 전송되는지 확인했습니다. 하지만 영어로 입력한 메시지는 그렇지 않았습니다. 따라서 해당 키워드를 중심으로 구글링을 진행한 결과, 짧은 시간 안에 해결책을 찾아냈습니다.

한글로 입력한 메시지가 중복 전송되는 문제는 한글이 조합문자이기 때문에 발생하는 문제였습니다.

KeyboardEvent.isComposing
조합문자를 작성할 때 사용하는 'composition session'의 실행 여부를 감지해 불리언 값으로 나타내는 프로퍼티

해당 프로퍼티를 false로 설정하면 composition session이 종료된 뒤에 값을 추가합니다.

아래 조건문을 추가하면 한글 메시지 중복 전송 이슈를 해결할 수 있습니다.

event.nativeEvent.isComposing === false

짠! 🎉🎉🎉