#React

undo 하나 넣었다가 4단 도미노

시작: undo 스냅샷이 과거를 바꿨다 그리드에 Ctrl+Z를 붙였다. 그런데 되돌리면 엉뚱한 값이 되살아났다. 재현이 딱 떨어졌다. 행1 월 셀에 11 입력 행2 월 셀에 22 입력 Ctrl+Z 2회 결과 — 행1은 0으로 복원되는데 행2가 22로 되살아남 (기대 0) 원인은 얕...

재는 행위가 크기를 바꾸면 화면이 폭주한다

문제: 차트가 무한히 커진다 화면 — LCA 결과 요약 증상 — 차트가 계속 커지며 레이아웃이 깨지고 깜빡거림 특징 — 멈추지 않는다. 가만히 둬도 계속 커진다 폭을 재봤더니 약 1,200만 px까지 갔다. 매 사이클 약 3.1배씩 커지고 있었다. 원인: CSS 한 줄이 만든 피드...

PDF 다운로드가 7초 걸렸는데, 범인은 한글 폰트였다

문제 대상 — 제품 배출량을 산정하는 B2B 웹앱의 결과 리포트 PDF 다운로드 소요 시간 — 버튼 클릭 후 약 7초 그동안 화면 — 로딩만 회전, 아무 변화 없음 사용자 반응 — “먹통이 됐나” 하고 재클릭하기 충분한 시간 구현 스택 — @react-pdf/renderer 4.x...

AI 에이전트 72개로 메모리 누수를 감사하고, 그 결과를 다시 검증했다

문제 오래 켜두는 SPA의 메모리 누수 — 재현부터 어려움 조건: 특정 화면 열고 닫기를 수십 번 반복해야 드러남 그 시점엔 이미 어느 컴포넌트 탓인지 특정하기 어려움 수백 개 컴포넌트를 사람이 하나씩 훑는 건 비현실적 그래서 접근 전환 병렬 에이전트 72개를 띄워 프론트엔드 컴포...

RTK Query 워터폴을 평탄화하고, 캐시를 켜자 stale이 드러났다

문제 대시보드 탭 하나를 여는 데 요청이 직렬로 연결. summary 조회 → 첫 제품 자동 선택 → 해당 제품의 LCA 선택 → 상세 데이터 호출 각 단계가 앞 단계의 응답을 기다린 뒤에야 시작 — 전형적인 워터폴 추가로 이 API 그룹은 keepUnusedDataFor: 0으로...

AG Grid의 autoHeight는 행 가상화를 끈다

문제 입출력 데이터를 입력하는 그리드에서 행이 수백 개로 늘어나자 셀 하나를 편집할 때마다 눈에 띄게 버벅였다. 타이핑 속도를 화면이 못 따라오는 정도였다. 원인 1: 편집할 때마다 columnDefs가 통째로 재생성됐다 columnDefs는 useMemo로 감싸져 있었음 의존성 ...

TanStack Query에서 로그아웃은 토큰만 지우는 게 아니다

문제: 로그아웃했는데 이전 사용자 데이터가 보인다 구성: 같은 백엔드를 쓰는 쌍둥이 Next.js 프론트엔드 — 관리자 포털, 사용자 포털 인증 상태: Zustand 서버 상태: TanStack Query 이 분리 자체는 흔하고 합리적인 구성 문제 지점: 로그아웃 경로 useAut...

localStorage에 남은 isAuthenticated: true가 로그인을 막았다

문제: 로그인 페이지가 “로딩 중…“에서 안 넘어간다 사용자 포털 버그 리포트 한동안 안 쓰다가 다시 진입하면 로그인 화면이 “로딩 중…“만 표시한 채 정지 폼 미표시 → 로그인 경로 없음 localStorage 비우면 정상 복귀 localStorage를 비워야 풀린다 → 원인은 ...

invalidateQueries를 refetchQueries로 바꿨더니

문제: mutation 후 목록이 즉시 안 바뀐다 관리자 포털과 사용자 포털 양쪽에서 반복된 QA 피드백. 증상 — 항목을 삭제하거나 생성했는데 목록이 그대로 반영 시점 — 탭을 옮겼다 오거나 새로고침한 뒤 전제 — mutation 성공 후 invalidateQueries 호출 중...

게이트웨이가 죽었는데 사용자가 F5를 누른다 — 브라우저 서킷 브레이커

문제: 새로고침이 서버를 한 번 더 때린다 구성: 같은 백엔드를 공유하는 쌍둥이 Next.js 프론트엔드 — 관리자 포털, 사용자 포털 게이트웨이가 502/503/504 반환 시 두 앱 모두 전역 오버레이 표시 (“잠시 후 다시 시도해 주세요”) 진짜 문제는 그 다음: 사용자가 멈...

navigator.clipboard는 HTTPS에서만 동작한다

문제: 복사 버튼이 아무 반응이 없다 화면: 관리 화면 기능: 값 복사 버튼 로컬: 정상 동작 배포 환경: 버튼 눌러도 무반응 에러 토스트 없음, 콘솔 출력 없음 원인 위치 — 코드가 아니라 배포 환경 조건: HTTPS가 아닌 환경에서 서비스되는 경우 navigator.clipbo...

탭 상태를 useState에 두지 마라 — URL 파생 상태로 바꾸기

문제: 사이드 메뉴로 이동하면 탭이 안 바뀐다 관리자 포털의 여러 목록 화면이 탭 보유 탭 상태 위치 — ?tab= 쿼리 파라미터 그 덕에 되는 것 — 링크 공유, 새로고침 담당 훅 — useTabQuery 하나 QA에서 올라온 증상 사이드 메뉴 구성 — ?tab=code 링크와 ...

사이드바 권한 분기 100줄을 지우고 ICON_MAP만 남기다

문제: 사이드바가 권한을 안다 사용자 포털 사이드 메뉴: 상수 배열로 하드코딩 두 그룹의 메뉴가 파일 안에 박혀 있음 각 항목에 permission 문자열 부착 // 권한 코드와 경로는 가명. 구조만 그대로다. const GROUP_A_MENU_ITEMS = { ALPHA: { l...

리액트 시작하기 (6 ~ 장)

State 리액트 Component의 상태를 관리하는 객체 state는 개발자가 정의한다. 랜더링이나 데이터의 흐름에 사용되는 값들만 state에 포함시켜야한다. state가 변경될 경우, 컴포넌트가 재 랜더링 되기 때문에 랜더링과 데이터의 흐름에 관계없는 데이터를 저장하면, 컴포...

리액트 시작하기 (1 ~ 5장)

리액트 설치 방법 npm 설치 node 설치 툴은 원하는대로 JSX 문법 자바스크립트 확장 문법 JavaScript + XML/HTML ex) 예시 const element = <h1>Hello, world!</h1>; 원리 React.createElement...