전은성 Dev

AI
- AI-Pairing
- Backend
- DB-Query
- Frontend
- Infra
AWS
- 업무에 바로쓰는 AWS 입문
Database
- Postgresql
Develop
Docker
Etc
Git
Java
- Live-Study
Kubernetes
Linux
React
- 처음 만난 리액트
Sap
Spring
Home

Contact

Copyright © 2024 | Yankos

Home > AI > Frontend

Now Loading ...

Frontend

죽은 파일이 살아있는 파일보다 최신이었다
감사의 목적은 번들 축소가 아니었다 죽은 코드 감사를 시작한 이유는 흔한 것 — 번들 크기나 파일 수 — 이 아니었다. “죽은 코드를 살아있다고 착각하고 거기에 작업하는 사고”를 막는 것이 목적이었다. 계기는 그 사고가 이미 여러 번 일어났기 때문이다. 조사해보니 2주 동안 같은 패턴이 5회 반복됐다. 원인: git log가 거짓말을 한다 가장...
AI · 2026-07-28
같은 버그를 두 번 고친 날, V1/V2 이중 스택을 정리하기로 했다
계기: 같은 버그를 양쪽에서 따로 고쳤다 한 화면에 V1과 V2 두 벌의 구현이 공존하고 있었다. 신규 작성 화면은 V2를 쓰고, 월 업데이트 화면은 V1을 쓰는 식이었다. 카테고리 상태가 어긋나는(desync) 버그가 나왔을 때, 이걸 V1 쪽에서 고치고 며칠 뒤 V2 쪽에서 또 고쳤다. 같은 원인, 같은 증상, 같은 수정을 두 번 한 것이다. ...
AI · 2026-07-27
엑셀 라이브러리가 두 개였다 — xlsx에서 exceljs로 통일하기
문제 한 프로젝트 안에서 엑셀을 내보내는 경로가 두 개였고, 각각 다른 라이브러리를 쓰고 있었다. 경로 라이브러리 헤더 스타일 AG Grid export xlsx 불가 리포트 export exceljs...
AI · 2026-07-16
PDF 다운로드가 7초 걸렸는데, 범인은 한글 폰트였다
문제 제품 배출량을 산정하는 B2B 웹앱에서 결과 리포트를 PDF로 내려받는 기능이 있었다. 버튼을 누르면 약 7초가 걸렸다. 그동안 화면은 로딩만 돌고 아무 일도 일어나지 않는다. 사용자가 “먹통이 됐나” 하고 다시 누르기 충분한 시간이다. 구현은 @react-pdf/renderer 4.x였다. 화면의 차트 6종을 off-screen에 마운트해 ...
AI · 2026-06-21
RTK Query 워터폴을 평탄화하고, 캐시를 켜자 stale이 드러났다
문제 대시보드 탭 하나를 여는 데 요청이 직렬로 줄줄이 이어졌다. summary 조회 → 첫 제품 자동 선택 → 해당 제품의 LCA 선택 → 상세 데이터 호출 각 단계가 앞 단계의 응답을 기다린 뒤에야 시작된다. 전형적인 워터폴이다. 게다가 이 API 그룹은 keepUnusedDataFor: 0으로 캐싱이 꺼져 있어서, 탭...
AI · 2026-06-12
AG Grid의 autoHeight는 행 가상화를 끈다
문제 입출력 데이터를 입력하는 그리드 화면이 있었다. 행이 수백 개인 상황에서 셀 하나를 편집할 때마다 눈에 띄게 버벅였다. 값을 타이핑하는 속도를 화면이 못 따라오는 수준이었다. 원인 1: 편집할 때마다 columnDefs가 통째로 재생성됐다 columnDefs를 useMemo로 감싸긴 했는데, 의존성 배열에 rows, visibleRows, ...
AI · 2026-06-02
TanStack Query에서 로그아웃은 토큰만 지우는 게 아니다
문제: 로그아웃했는데 이전 사용자 데이터가 보인다 같은 백엔드를 쓰는 쌍둥이 Next.js 프론트엔드 — 관리자 포털과 사용자 포털이다. 두 앱 모두 인증은 Zustand, 서버 상태는 TanStack Query로 나눠 관리한다. 이 분리 자체는 흔하고 합리적인 구성이다. 문제는 로그아웃 경로였다. useAuthStore.logout()은 토큰과 ...
AI · 2026-05-10
localStorage에 남은 isAuthenticated: true가 로그인을 막았다
문제: 로그인 페이지가 “로딩 중…“에서 안 넘어간다 사용자 포털에서 올라온 버그다. 한동안 안 쓰다가 다시 들어오면 로그인 화면이 “로딩 중…“만 띄운 채 멈춘다. 폼이 안 나오니 로그인할 방법이 없다. localStorage를 비우면 정상으로 돌아왔다. localStorage를 비워야 풀린다는 건 지속된 상태가 원인이라는 뜻이다. 원인: pe...
AI · 2026-05-09
invalidateQueries를 refetchQueries로 바꿨더니
문제: mutation 후 목록이 즉시 안 바뀐다 관리자 포털과 사용자 포털 양쪽에서 같은 QA 피드백이 반복됐다. 항목을 삭제하거나 생성했는데 목록이 그대로다. 탭을 옮겼다 오거나 새로고침하면 그제야 반영된다. mutation 성공 후 invalidateQueries를 호출하고 있었는데도 그랬다. 원인: invalidate는 lazy하다 in...
AI · 2026-05-07
게이트웨이가 죽었는데 사용자가 F5를 누른다 — 브라우저 서킷 브레이커
문제: 새로고침이 서버를 한 번 더 때린다 같은 백엔드를 공유하는 쌍둥이 Next.js 프론트엔드가 있다. 관리자 포털과 사용자 포털. 게이트웨이가 502/503/504를 뱉으면 두 앱 모두 전역 오버레이를 띄워 “잠시 후 다시 시도해 주세요”라고 안내하고 있었다. 문제는 그 다음이다. 사용자는 화면이 멈춘 걸 보면 F5를 누른다. 새로고침하면 Z...
AI · 2026-04-20
navigator.clipboard는 HTTPS에서만 동작한다
문제: 복사 버튼이 아무 반응이 없다 관리자 포털의 대시보드 화면에는 토큰을 복사하는 버튼이 있다. 로컬에서는 잘 됐다. 배포 환경에 올리니 버튼을 눌러도 아무 일도 일어나지 않았다. 에러 토스트도 없고 콘솔에도 아무것도 안 찍혔다. 원인은 코드가 아니라 배포 환경이다. 이 시스템은 폐쇄망 HTTP 환경에 배포된다. 그리고 navigator.cli...
AI · 2026-04-20
탭 상태를 useState에 두지 마라 — URL 파생 상태로 바꾸기
문제: 사이드 메뉴로 이동하면 탭이 안 바뀐다 관리자 포털의 여러 목록 화면이 탭을 갖고 있다. 탭 상태는 ?tab= 쿼리 파라미터에 실려 있어서 링크 공유와 새로고침이 된다. 이걸 담당하는 게 useTabQuery 훅이었다. QA에서 올라온 증상은 이랬다. 사이드 메뉴에 ?tab=code로 가는 링크와 ?tab=codeGroup으로 가는 링크가 ...
AI · 2026-04-19
사이드바 권한 분기 100줄을 지우고 ICON_MAP만 남기다
문제: 사이드바가 권한을 안다 사용자 포털의 사이드 메뉴는 상수 배열로 하드코딩돼 있었다. 두 그룹의 메뉴가 파일 안에 박혀 있고, 각 항목에 permission 문자열이 붙어 있다. const OAUTH_MENU_ITEMS = { IAM: { label: "IAM 관리", icon: IamIcon, href: "/oauth/iam", perm...
AI · 2026-04-19

Touch background to close