최근 사이드 프로젝트의 담당 기능을 다 구현하여 Light House의 지표를 통한 성능 최적화를 진행해 보았습니다. Light House의 점수 기준은 아래와 같습니다. 0~49(빨간색): 나쁨 50~89(주황색): 개선 필요 90~100(녹색): 양호 Light House의 공식문서에는 좋은 사용자 경험을 위해 90점 이상을 유지하도록 노력해야 한다고 말하고 있습니다. Light House 측정은 정확한 측정을 위하여 yarn build -> yarn start를 진행하여 production 환경에서 진행하였습니다. 최적화 전 측정 점수 Performance 최적화 Performance를 측정하는 항목은 5가지로 정의됩니다. 초록색은 빠름, 노란색은 중간, 빨간색은 느림을 의미합니다. First ..
폴더구조 처음엔 너무 집착하지 마세요! 다들 프로젝트 진행 전에 폴더구조를 어떻게 하면 이쁘게 만들 수 있을까? 한 번쯤은 고민해 보셨을 겁니다. 하지만 이건 정답이 없는 문제입니다. 리액트의 공식문서에서도 너무 깊이 생각하지 말고 5분 이상 시간을 투자하지 말라고 권고하고 있습니다. 그만큼 폴더구조란 언제든 변경될 수 있는 것이고 프로젝트가 커짐에 따라 어느 파일은 어느 폴더로 가야 할지 리팩토링 할 순간이 알아서 오기 때문입니다. 제가 최근 진행했던 사이드 프로젝트의 기존 폴더구조입니다. 현재 리팩토링을 진행하고 있으며 팀원들과 소통하여 최근 폴더구조를 변경하였습니다. 해당 프로젝트 폴더 구조의 간략한 설명은 아래와 같습니다. app : 페이지 라우팅 components pages : 특정 페이지에서..
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..
