juni

채팅 관련 로직 개선 전// ChatList 컴포넌트 마운트 시ChatList Performance Metrics: { renderTime: "156.42ms", // 초기 렌더링 시간 memoryUsage: "24.85MB", // 메모리 사용량 renderCount: 1 // 렌더링 횟수}// ChatRoom 컴포넌트 (각각)ChatRoom Performance Metrics: { renderTime: "12.31ms", // 개별 채팅방 렌더링 시간 memoryUsage: "0.45MB", // 추가 메모리 사용량 renderCount: 1 // 렌더링 횟수}// 채팅방 입장 시Chat Perform..

1. 리액트의 렌더링 프로세스와 가상 DOMconst ChatRoom = () => { const [messages, setMessages] = useState([]); // 1. 렌더 단계 (Render Phase) console.log("컴포넌트 렌더링 시작"); // 2. 커밋 단계 (Commit Phase) useEffect(() => { console.log("실제 DOM 업데이트 후 실행"); }); return {/* JSX */};};랜더링 과정랜더 단계: 가상 DOM 트리 생성재조정: 이전 가상 DOM과 비교커밋 단계: 실제 DOM 업데이트2. 각 Hook/메모이제이션의 동작 시점const ChatRoom = ({ roomId }) => { console.log..

기존 zustand에서 단일로 관리되던 좋아요를 복수로 관리하여 투어별 좋아요를 관리하여메인페이지, 상세페이지, 마이페이지에서 적용되도록 Store 및 컴포넌트 코드 개선-> 좋아요가 필요한 컴포넌트 로직 단순화로 가독성 상승  기존 Store 코드import { create } from 'zustand';import axios from 'axios';interface LikeState { liked: boolean; fetchLikeStatus: (postId: string, userId: string) => Promise; toggleLike: (postId: string, userId: string) => Promise;}export const useLikeStore = create((set)..