아래 코드는 RTK Query의 공통 API 베이스 설정모든 서버 요청에 대해 기본 URL과 Authorization 헤더를 자동으로 설정함.import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";import type { RootState } from "../../app/store";export const baseApi = createApi({ reducerPath: "api", baseQuery: fetchBaseQuery({ baseUrl: import.meta.env.VITE_API_BASE_URL ?? "/api", prepareHeaders: (headers, { getState }) => { co..

(썸네일 이미지는 해당 글을 요약 후 ChatGPT 이미지로 생산한 것 입니다.)React에서 최적화 얘기하면 항상 따라오는 말이 있다.useMemo는 값을 메모이제이션 (value)useCallback은 함수를 메모이제이션 (func)말은 쉬운데, 실제로는 “언제 써야 하는지 / 뭐가 다른지”가 헷갈림...이번 글은 실무에서 자주 터지는 케이스 중심으로 차이를 정리함.결론부터useMemo: 값(계산 결과)을 캐싱한다.useCallback: 함수(콜백)의 참조를 캐싱한다.그리고 사실상 이렇게 생각해도 된다.useCallback(fn, deps) 는useMemo(() => fn, deps) 의 syntax sugar.즉, 둘 다 “캐싱”이 맞고, 캐싱 대상이 다르다.왜 캐싱이 필요할까? (React의 리렌..

(썸네일 이미지는 해당 글을 요약 후 ChatGPT 이미지로 생산한 것 입니다.)이번에 프리랜서로 프로젝트를 진행하면서Grid + react-hook-form + SelectBox 조합이 자주 사용되어 있는곳을 보았다.register(`sampleData.SampleList.${rowIdx}.Example`)화면에서도 잘 동작했고,폼 값도 문제없이 들어오는 것처럼 보였다. 하지만 프로젝트가 커지고정렬, 페이지 전환, 행 추가/삭제가 들어가면서이 방식이 구조적으로 위험하다는 걸 알게 됨.왜 rowIdx 기반 register가 위험한가?rowIdx는 화면 기준 인덱스 즉,정렬필터페이지 전환행 삽입 / 삭제이 중 하나만 발생해도같은 데이터라도 rowIdx는 언제든 바뀔 수 있다. 하지만 react-hook-f..

React 그리드에서 SelectBox 렌더링이 느렸던 이유와 해결 방법그리드 셀마다 SelectBox 컴포넌트를 사용하는 화면에서전체 구조를 정리하고 최적화를 적용했는데도페이지 이동이나 렌더링이 여전히 느린 문제가 있었다.원인을 추적해보니, 문제는 SelectBox 내부 로직에 있었다.문제 상황그리드의 각 셀에 SelectBoxD 컴포넌트 사용셀 수가 많고 페이지 이동 / 필터 시 리렌더가 자주 발생체감상 SelectBox가 원인처럼 느껴짐SelectBoxD 내부를 살펴보니 다음과 같은 코드가 있었다. 문제 1. renderValue에서 매번 find 실행const renderValue = () => value ? selectList.find(item => item.codeValue == val..

/***** 설정 *****/const CAL_NAME = 'EXAM NAME💻'; // 전용 캘린더 이름const EVENT_TITLE = '✅Todo List'; // 매일 생성할 종일 이벤트 제목const LOG_SHEET_NAME = 'List Script Log'; // 실행 로그를 쓸 구글 스프레드시트 이름/***** 공통: 주말 유틸 *****/function isWeekend_(date = todayDate_()) { const d = date.getDay(); // 0=Sun, 6=Sat return d === 0 || d === 6;}function getOrCreateLogSheet_() { const files = DriveApp.getFilesBy..

/***** 설정 *****/const CAL_NAME = 'EXAM NAME💻'; // 전용 캘린더 이름const EVENT_TITLE = '✅Todo List'; // 매일 생성할 종일 이벤트 제목const LOG_SHEET_NAME = 'List Script Log'; // 실행 로그를 쓸 구글 스프레드시트 이름/***** 스프레드시트 로깅 유틸 *****/function getOrCreateLogSheet_() { // 같은 이름의 스프레드시트가 있으면 첫 번째를 사용, 없으면 생성 const files = DriveApp.getFilesByName(LOG_SHEET_NAME); let ss; if (files.hasNext()) { ss = Spreads..