yunkogong

2026년 6월 25일. 분명히 동일한 로직인데 화면만 이상하게 동작하던 하루를, 까먹기 전에 일기처럼 남겨둔다. 거창한 트러블슈팅 가이드가 아니라 그냥 "오늘 이런 걸 놓칠 뻔했고, 이렇게 잡았다"는 기록이다.자가체크 화면이 이상했다레거시 프로젝트에 있던 자가체크 화면을 신규 컨테이너로 이식하는 작업이었다. 병원 방문 → 접종 → 자가체크 설문 → 결과 확인에 이르는 단계별 진행 상태가 있고, 화면 아래에는 현재 단계에 따라 버튼이 달라지는 구조다. "설문 시작", "이어서 하기", "결과 확인" 세 가지.그런데 컨테이너를 옮기고 화면을 띄웠더니, 단계와 상관없이 전부 "결과 확인" 버튼만 떠 있었다. 설문을 아직 시작도 안 한 사용자에게도, 진행 중인 사용자에게도, 완료한 사용자에게도 같은 버튼이 보..

환경: React + TypeScript / i18next (다국어 4개 로케일)들어가며도메인 용어는 기획·서버·클라이언트가 합의해 정하지만, 운영 도중에도 바뀝니다. 문제는 다국어(i18n) 환경에서 "한국어 키만 고치면 끝"이라는 착각입니다.i18next의 fallbackLng: 'ko' 설정 때문에, 다른 로케일 번역이 누락돼 있어도 화면에는 한국어가 조용히 표시됩니다. 에러도 없고 화면이 깨지지도 않으니, QA 단계가 없으면 누락이 영영 보이지 않습니다.실제로 한 프로젝트에서 같은 필드 용어가 세 차례(예: "관리코드" → "표준코드" → "품목코드") 바뀌었고, 그 과정에서 일부 로케일(ja·ru)의 번역 키 수십~수백 개가 누락된 상태였다는 걸 한참 뒤에 발견했습니다.1. fallbackLng..

환경: React + TypeScript / Module Federation 모노레포들어가며관리자 시스템에서 "같은 화면인데 권한에 따라 다르게 동작해야 한다"는 요구는 흔합니다. 그런데 Module Federation 기반 모노레포에서는 구조적인 고민이 하나 더 붙습니다.로그인 상태(역할 정보)는 호스트 앱이 들고 있고, 실제 UI 기능은 원격 모듈에 흩어져 있습니다. 원격 모듈이 호스트 store를 직접 참조하면 두 패키지가 강하게 결합되어 버리죠. 그래서 "역할(role)을 어떻게 원격 모듈로 내려보낼지"를 먼저 정해야 합니다.1. "숨김(hidden)" vs "비활성(disabled)" 기준부터권한 UI를 짜기 전에, 요소를 숨길지 아니면 비활성화할지부터 정해야 합니다. 이 기준이 흔들리면 화면마..

환경: React + TypeScript / 데이터 페칭 + 페이지네이션 화면들어가며리스트 + 필터 + 페이지네이션이 있는 화면을 useEffect + useState로 만들다 보면, 어느 순간 컴포넌트가 "API 호출 + 상태 동기화 + 로딩/에러 관리 + 의존성 추적"을 한꺼번에 떠안게 됩니다. 기능이 늘수록 useEffect가 늘고, 의존성 배열을 잘못 건드려 무한 호출이 나기도 하죠.이번에 같은 화면을 React Query(TanStack Query) 로 옮기면서 코드가 어떻게 단순해졌는지 정리했습니다.1. 기존 구조 — useEffect로 호출, useState로 보관useEffect(() => { const params = { keyword, sort, page, size: 10 }; fe..