~/hovelopin/articles $ ls -lah
articles
문자열 key vs selector: i18next 타입은 어떻게 만들어질까
t('pages.notFound.title')과 t($ => $.pages.notFound.title)은 같은 리소스를 조회한다. 두 방식의 타입이 어떻게 만들어지는지, enableSelector가 타입 레벨에서 무엇을 바꾸는지 비교한다.
i18next enableSelector는 런타임에서 어떻게 동작할까?
i18next의 enableSelector 옵션을 설정하면 번역 키를 함수로 쓸 수 있다. 문자열이 아닌 함수를 넘겼는데도 번역이 되는 이유를 Proxy·revoke·Symbol 중심으로 확인한다.
i18next 문자열 key에 타입을 붙이는 과정
문자열로 작성한 번역 key는 코드만 봐서는 존재 여부를 알기 어렵다. i18n Ally에 의존하던 자동완성을 i18next의 TypeScript 타입 지원으로 옮긴 과정을 정리한다.
package.json이 계약이다
exports, sideEffects, dependencies 세 필드가 소비자 번들을 어떻게 바꾸는지 측정하고, 부작용 코드가 제외되는 경우와 서로 다른 React 버전이 함께 설치되는 경우를 재현한다.
번들러는 무엇을 하는가
파일 여러 개를 하나로 합치는 일이 왜 라이브러리에서는 유독 어려운지, CommonJS와 ESM이 어디서 갈라지는지를 직접 빌드하고 확인한다.
useRef 패턴, useEffectEvent로 걷어내기
콜백 prop을 useRef로 감싸고 useEffect로 동기화하는 패턴을 useEffectEvent로 정리한 과정을 공유하고, React가 useEffectEvent를 내부에서 어떻게 구현했는지 소스까지 따라가 본다.
Jira 이슈 처리를 sub-agent에게 넘기기
Claude Code sub-agent + Atlassian MCP + Figma MCP 조합으로 Jira 이슈 처리 워크플로를 자동화한 경험과 jira-fixer agent 설계 과정을 공유한다.
React CVE-2026-23869 DoS 취약점 분석
React Server Components의 Flight 프로토콜 역직렬화에서 발견된 DoS 취약점 — new Map()의 이터레이터가 트리거하는 무한 재귀를 원인부터 패치 코드까지 추적.
React CVE-2025-55182 취약점 원인 분석
Next.js 15~16의 React Server Component에서 발견된 RCE(Severity 10) 취약점을 직접 재현하고, 패치된 코드의 차이까지 추적한 기록.
gcTime 한 줄이 SSR을 죽인 진짜 이유
이전 글에서 범인으로 지목된 gcTime: 24h. 그런데 정말 '캐시가 24시간 살아 있어서' 누수가 났을까? TanStack Query 소스 두 파일을 열어 SSR 분기의 실제 메커니즘을 따라간 기록.
웹페이지를 Figma로 되돌리기
Grab의 Cursor Talk To Figma MCP로 임의의 웹페이지를 Figma 디자인으로 자동 변환하고, 디자이너 없는 팀에서 활용해 본 기록.
화면을 보면서 디자인 시스템 맞추기
임의의 웹사이트를 Playwright MCP로 분석해 디자인 시스템 명세를 뽑고, Shadcn MCP로 컴포넌트와 페이지까지 자동 구성한 실험.
부하 테스트로 원인을 좁히기
제한된 힙 메모리 환경에서 부하 테스트를 돌려 서버사이드 메모리 누수의 직접 원인을 찾아낸 과정 — 결국 한 컴포넌트의 gcTime이 범인이었다.
Figma 링크 하나로 코드까지
Figma-MCP 프로토콜로 Figma 디자인을 Claude/Cursor/Windsurf에 연결해 코드로 자동 변환하는 셋업 가이드.