TypeScript2 Next.js + TypeScript, STOMP + Sock.js로 실시간 채팅 구현하기 (2) 실시간 채팅을 구현하면서 맞닥뜨린 이슈채팅방에 들어가면 실시간 소통도 하지만 이전에 오갔던 채팅 메세지 조회도 하게 된다.이전 채팅 메세지 조회는 사용자가 위로 스크롤해서 스크롤이 채팅방 맨 위에 위치하게 되면, 메세지를 20개씩 로드해 보여주는 무한스크롤 형태로 개발했다.여기까지는 순조롭게 진행됐는데, 문제는 이전 채팅 메세지를 조회했을 때 스크롤의 위치였다. 스크롤 위치가 제맘대로..!스크롤을 위로 올려 과거 채팅 메세지를 불러오는 순간, 화면이 아래로 내려가버리거나 이상한 위치로 튀면서 UX가 매우 나빠졌다...처음엔 어떻게 스크롤 위치를 조정해야 할지 감도 안잡혔다.내가 채팅 메세지를 보냈을 때는 단순히 스크롤을 맨 아래로 보내기만 하면 됐지만,이건 이전 메세지도 불러오면서 현재 사용자가 있는 스.. 2025. 8. 3. Next.js + TypeScript, STOMP + Sock.js로 실시간 채팅 구현하기 (1) 암것도 모르는 상태에서 채팅 기능을 구현해보자부트캠프에서 팀 프로젝트를 진행하면서 실시간 채팅 기능을 구현을 맡게 되었다.채팅 기능은 커녕 웹소켓도 써본 경험이 없어 많이 걱정되었지만.. 그래도 기회가 있을 때 해보자라는 생각으로 무작정 부딪혀보았다. 프론트는 Next.js와 TypeScript, Tanstack Query(React Query)를 사용하고,백엔드는 spring을 사용하고 있는 프로젝트였다. 보통은 채팅 구현할 때 웹소켓을 많이 쓴다고 알고 있는데,백엔드 개발자분이 spring을 사용하신다고 STOMP와 Sock.js 기반으로 채팅을 구현하자고 했다. STOMP가 뭐지?STOMP는 웹소켓 기반으로 동작하는, 텍스트 기반의 메세징 프로토콜(Simple Text Oriented Messagi.. 2025. 8. 2. 이전 1 다음
