yunkogong

2026년 6월 25일. 오늘 하루 종일 붙잡았던 작업을, 까먹기 전에 일기처럼 남겨둔다. 거창한 튜토리얼이 아니라 그냥 "오늘 이런 걸 고민했고 이렇게 풀었다"는 기록이다.시작은 엉뚱하게도 GitHub 트렌딩이었다아침에 기술 뉴스를 보다가 GitHub 트렌딩에 AI 에이전트 프레임워크들이 잔뜩 올라온 걸 봤다. gstack, deer-flow, 뭐 이런 것들. "나는 프론트엔드 개발자인데, 이 중에 우리가 실제로 도입할 만한 게 있나?" 하는 가벼운 궁금증에서 오늘이 시작됐다.결론부터 말하면 대부분은 우리랑 상관없었다. deer-flow는 백엔드 에이전트 인프라였고, 영상·음성 생성 도구도 우리 도메인(모바일 웹앱)이랑 접점이 없었다.gstack에 살짝 김이 샜다gstack은 그나마 프론트엔드 개발 도..

환경: 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..