Dani's Dev TokTok

들어가며 리팩토링 하기 전의 채팅방 기능에는 누군가가 모임에 들어갔을 때, 즉 채팅방에 입장했을 때 입장했다는 메시지가 없었다.이런식으로 누군가가 들어왔음에도 어떤 사람이 입장했는 지에 대한 메시지가 없었다.사용자 경험을 개선하기 위해 입/퇴장 메시지를 표시하는 것으로 리팩토링을 했다. 리팩토링 과정 이 프로젝트에서는 특정 모임을 생성하면 그 모임에 대한 채팅방이 열리고,누군가가 모임을 가입했을 때 채팅방에 입장하는 구조였다. 그러므로 입/퇴장 메시지를 받기 위해서는 누군가가 모임을 가입/탈퇴 했다는 정보가 필요했다.즉, 사용자가 보내는 메시지가 아니라 일종의 시스템? 메시지를 받아 올 수 있도록 서버에서부터 코드를 고쳐야 했다.담당 백엔드 분과 대화해서 그렇게 할 수 있도록 서버 쪽 코드를 고쳤다. 고..

1. 문제 발생기존에 특정 채팅방에 접속했을 때, 소켓이 열리도록 한 로직을접속해있지 않은 채팅방의 메시지도 실시간으로 업데이트 하기 위해 웹소켓을 여는 로직을 커스텀 훅으로 만들어서채팅 목록 페이지에 접근했을 때 소켓이 열리도록 로직을 수정했다.그 과정에서 특정 채팅방(A) 를 나가서 다른 채팅방 (B)를 옮겨갔음에도 B 채팅방에 보낸 메시지가 A 채팅방에도 전달되는 버그가 있었다.2. 원인 추론위에서 언급했다시피 기존에 특정 채팅방에 접속해야 열리는 소켓을 커스텀 훅으로 만들어서 따로 파일을 만들었다. 아래는 변경하기 전 코드의 일부다.onConnect 내의 로직을 변경했다. 기존에는 특정 채팅방에 대한 구독만 했기 때문에 그냥 chatroomId을 redux 의 state에서 받아왔다.  cons..

1. 문제 발생프로젝트를 배포하고 나서 채팅 테스트를 하는데 실시간 채팅에서서로 동시에 채팅을 하고 있음에도상대방 메시지 수신 시간과 나의 메시지 송신 시간이 일치하지 않은 현상이 있었다.(로컬에서는 생기지 않았던 문제!! ㅠㅠ)분명 RDS 에는 한국 기준 보낸 시간으로 잘 저장이 되는데 수신할때나, DB 에서 불러올 때는 시간이 이상하게 변해있었다. (나중에 알고보니 UTC 시간으로 변환되서 오던 것이었다.) 2. 원인 추론로컬에서는 저 현상이 없었어서 혹시나 rds 에 저장되어 있는 시간이 이상한걸까? 싶어서백엔드 담당분께 rds 에 시간이 어떻게 저장되어 있는지 여쭤봤다 그러나..한국 기준 시간으로 이쁘게 잘 저장되어 있었다.그래서 처음에는 내가 시간 로직을 이상하게 한걸까? 싶어서 로컬에서 엄청 ..

들어가며이번 프로젝트에서 실시간 채팅을 구현하기 위해 웹소켓을 썼지만 정확히 어떤 것이고 어떤 원리로 동작하는지에 대해 잘 안다고 할 수 없다.이왕 썼으니 원리에 대해서 잘 알아보려고 한다. 웹 소켓(Web Socket)이란?웹 소켓은 양방향 통신을 위한 프로토콜(약속) 이다.주로 웹 서버와 웹 브라우저가 실시간으로 메시지를 주고받을 때 사용한다. HTTP 통신은 클라이언트가 서버에 요청을 보내고, 서버가 응답하는 통신을 따른다.보통 작업에는 문제가 없지만, 채팅과 같이 실시간으로 데이터를 주고받는 것에서는 트래픽을 불필요하게 증가시키고,서버의 비용을 증가시키며 요청과 응답사이에 지연시간이 있어서 실시간 통신의 효율성을 저하시킬 수 있다. 이런 상황을 해결하기 위해 나온 것이 웹 소켓이다.웹 소켓은 HT..

이번에 부트캠프에서 하는 프로젝트에서 채팅 기능을 맡았다.프론트엔드는 리액트, 백엔드는 스프링부트를 사용했기 때문에이전에 배웠던 socket.io 가 아니라 stomp 를 사용했다.Stomp 는 Simple Text Oriented Messaging Protocol로 웹소켓을 기반으로 하는 메시지 전송 프로토콜이다.  챗지피티 선생님께선 socket.io 랑 stomp 의 차이를 이렇게 말씀하셨다.  위 부분에 대해서는 웹소켓을 더 자세히 공부해야 잘 이해를 할 것 같다.어쨋든 요약하자면1. 서버가 스프링부트임2. 스프링부트에서는 웹소켓을 사용할 때 stomp 를 많이 사용한다.3. 그래서 클라이언트에서도 그것에 맞춰서 stomp 를 사용했다. 이렇게 되겠다. 리액트에서 stomp 를 이용하려면 당연히 ..