useQuery 에서 더이상 onError 콜백을 사용할 수 없습니다. React Query 에서 자주 쓰였었던 onError,onSettled,onSuccess 세개의 콜백이 더이상 사용할수 없게되었습니다. 그래서 저같은경우 API를 정의한 파일에서 에러발생시 토스트 알림을 띄우도록 설정을 해주었습니다. export async function getChatHistory( roomId: string, targetId: number, ): Promise { try{ let url = `/endpoint/api/chatroom/${roomId}/message?size=20`; if (targetId !== 0) { url += `&targetId=${targetId}`; } const response = a..
https://taejinii.tistory.com/73 리액트 Stompjs,Sockjs 실시간 채팅 구현 - (1) 진행 중인 사이드 프로젝트에서 실시간 채팅 도메인을 전적으로 맡았는데 실시간 채팅, 채팅 이미지 업로드를 어떻게 구현했는지 공유를 해보려 합니다. 일단 웹소켓을 구현하려면 백엔드와 소 taejinii.tistory.com 지난 글인 웹소켓 연결에 이어서 이번 포스트에서는 이전에 채팅했던 기록을 역순 무한스크롤로 불러오는 기능에 대해 포스트 해보겠습니다. 해당 기능구현에 있어 필요한 라이브러리는 React-query 하나만 있으면 충분합니다. yarn add @tanstack/react-query 1. 이전 채팅 기록 역순으로 바꿔주기 import { useInfiniteQuery } f..
진행 중인 사이드 프로젝트에서 실시간 채팅 도메인을 전적으로 맡았는데 실시간 채팅, 채팅 이미지 업로드를 어떻게 구현했는지 공유를 해보려 합니다. 일단 웹소켓을 구현하려면 백엔드와 소통이 중요합니다. 백엔드의 설정과 프론트엔드 서로 설정을 맞춰야 하기 때문입니다. 저희 백엔드는 Stomp 와 SockJs를 기준으로 웹소켓을 구현하셨다고 하였고 저 또한 StompJs, SockJs를 설치하여 구현하였습니다. 구현에 필요한 패키지들을 설치해 줍니다. yarn add @stomp/stompjs yarn add sockjs-client 1. 소켓 연결 import SockJs from 'sockjs-client'; import { Stomp } from '@stomp/stompjs'; export default..
요즘 프로젝트를 진행하면서 클린코드에 대해 관심이 많아졌습니다. 클린코드란? "클린 코드"는 프로그래밍과 소프트웨어 개발에서 매우 중요한 개념 중 하나로, 소스 코드의 가독성, 유지보수성, 품질, 효율성, 그리고 버그의 최소화를 목표로 하는 개념을 나타냅니다. 클린 코드는 다른 개발자가 이해하고 협업하기 쉽고, 오랫동안 유지보수할 수 있는 코드를 작성하는 방식입니다. - ChatGPT Chat GPT 선생님께선 가독성, 유지보수성, 품질, 효율성 등등등... 이 조건들을 잘 지키는 것이 클린코드라고 합니다.. 지극히 주관적인 제 기준에서의 클린코드란 남이 봤을 때 이쁘게 짠 코드 즉 술술 잘 읽히는 코드라고 생각됩니다. 코드가 잘 읽힌다는 것은 가독성 있게 잘 짠 것일 테고 잘 읽힌다면 전체적인 구조를 ..
