합성(Composition) 패턴의 리렌더 최적화 원리 — JSX 변환으로 확인하기
합성으로 넘긴 children은 받는 컴포넌트 몸통에서 React.createElement로 변환되지 않는다. 그래서 참조가 유지되고 리렌더가 전파되지 않는다 — JSX 변환 결과로 확인한다.
사내 정보 Wiki를 MCP 서버로 만들기 (RAG + 로컬 임베딩)
NotebookLM으로 쓰던 사내 위키의 한계를 넘어, 코드 에이전트가 검색 도구로 바로 쓰는 사내 Wiki MCP 서버를 RAG와 로컬 임베딩(Ollama)으로 만든 과정을 정리한다.
테스트 앱 배포 방식 — Android와 iOS는 어떻게 다를까
네이티브 테스트 앱을 어떻게 설치시키는지 정리. 크게 '빌드 파일 직접 설치'와 '배포 앱을 통한 설치'로 나뉘고, Android랑 iOS가 각각 다르게 동작한다.
레이아웃 컴포넌트, Compound 패턴 vs Prop 패턴 — 언제 무엇을 쓸까
검색 필터 레이아웃을 공통 컴포넌트로 뽑으며 prop 대신 compound를 택한 이유. 두 패턴의 차이와, 레이아웃에 compound가 유리한 상황을 정리했다.
배럴 임포트란 무엇인가: 트리쉐이킹 저하부터 빌드 OOM까지
배럴 임포트가 왜 개발 서버를 느리게 만들고 빌드 메모리를 폭증시키는지, AST 분석부터 의존성 그래프 구축까지 단계별로 살펴보고 직접 경로 임포트 등 해결책을 정리했다.
트리쉐이킹이란 무엇인가: ESM과 CJS, enum과 as const, sideEffects까지
트리쉐이킹이 정적 구조(ESM)에서만 가능한 이유, enum·const enum·as const가 트랜스파일 후 어떻게 달라지는지, usedExports·sideEffects가 실제로 무엇을 지우는지까지 예제 코드로 정리했다.
모달 상태를 어디에 둘까 — Context provider 대신 모듈 스토어와 Portal
모달을 훅으로 걷어낸 다음 질문은 '그 상태를 어디에 둘까'다. 흔한 Context provider 대신, 전역에 노출되는 모달의 성격에 맞춰 모듈 스토어와 Portal 루트로 provider 없이 두는 방법과 트레이드오프를 정리한다.
좋은 코드 작성하기 — 한 번에 한 가지만 하는 코드
좋은 코드는 결국 한 번에 한 가지만 한다. 그래야 읽기 쉽고, 고치기도 쉽다. 복잡한 건 아래에 맡긴다는 하나의 원리로, 명령형·선언형·함수형이 프론트엔드에서 어떻게 적용되는지 두 가지 리팩터링으로 풀어본다.
선언형 모달 보일러플레이트를 훅으로 걷어내기 — 추상화와 지역 상태 축소
컴포넌트마다 반복되는 useState + 조건부 렌더 모달 패턴을 useModal 훅으로 추상화하면서, 추상화와 선언적이 어떻게 다른지, 그리고 호출부의 지역 상태가 어떻게 사라지는지 정리했다.
React 배칭은 어떻게 동작하나 — flushSync와 업데이트 큐
state를 변경하면 리렌더링이 언제, 몇 번 일어날까? React의 배칭 동작과 flushSync를 업데이트 큐 관점에서 따라가며 정리한 메모.
공개키·비밀키부터 mTLS까지 — 인증서가 HTTPS에서 동작하는 원리
자물쇠와 열쇠 비유로 공개키·비밀키·대칭키를 정리하고, 일반 HTTPS와 클라이언트 인증서(양방향 인증)가 신원을 증명하는 과정, 그리고 키체인이 이 모든 걸 왜 '인증서'로 묶어 다루는지 짚는다.
useQuery vs useMutation, POST라고 무조건 useMutation은 아니다
조회 API가 POST로 구현됐다고 useMutation을 쓰는 건 오해다. 둘을 가르는 기준은 HTTP 메소드가 아니라 서버 상태의 멱등성이다. 메소드와 본질이 어긋나는 실사례와 Key 관리까지 정리한다.