케이스스터디
Case Studies기술
Engineering서버에서 텍스트 하이라이트 주입하기 — 스크롤 튐이 부른 SSR 결정
서버 렌더링된 본문에 클라이언트가 직접 span을 주입했더니 일부 브라우저에서 스크롤이 튀었다. 원인을 좇다 하이라이트 주입을 서버로 옮긴 과정 — position 기반 앵커, 텍스트↔HTML 오프셋 변환, JSDOM 주입, html-react-parser, router.refresh, 롤백 가드까지.
번들링 최적화를 통한 import cost 줄이기
컴포넌트 하나를 import했을 뿐인데 번들이 커지는 이유를 추적하고, tree-shaking과 번들링 관점에서 import cost를 줄이는 방법을 정리했습니다.
package.json 진입점 설정과 타입 접근성의 관계 이해하기
package.json의 main·module·exports 진입점 설정이 패키지 로드 방식과 타입 접근성에 어떤 영향을 주는지 정리했습니다.
Next 13 +, Tailwind, Storybook 설정하기
Next 13+ 환경에서 Tailwind와 Storybook을 함께 붙이며 부딪힌 설정 이슈와 해결 과정을 남긴 셋업 노트입니다.
React / Next.js 웹뷰에서 네이티브 앱으로 메세지 보내기/토큰받기
React·Next.js 웹뷰에서 네이티브 앱으로 메시지를 보내고 토큰을 주고받는 브릿지 통신을 구현한 기록입니다.
createPortal 로 모달 깎기
createPortal로 DOM 트리 바깥에 모달을 렌더링하는 이유와, 재사용 가능한 포탈 모달을 만드는 과정을 정리했습니다.
React custom hook - useInput 정성들여 깎기
여러 입력을 하나로 다루는 useInput 커스텀 훅을 만들며 마주친 상태 불변성·타입 가드 문제와 개선 과정을 정리했습니다.
우아콘 2023 — Module Federation과 마이크로 프론트엔드
우아콘 2023 'Module Federation' 세션을 듣고 정리한 노트. 어드민이 N개로 늘어날 때 왜 host/remote 구조가 필요한지, expose/remotes와 remoteEntry 런타임 로딩이 어떻게 도는지, 도입하면 바로 만나는 문제들(타입 지원·eager consumption·불안정성)까지.
node_modules 이해하기
node_modules가 의존성을 관리하는 방식 — 중첩·호이스팅 구조와 패키지 매니저의 동작 원리를 파헤쳤습니다.
CRA 없이 React 세팅하기 (Webpack, Babel, SWC)
CRA 없이 Webpack·Babel·SWC로 React 개발 환경을 처음부터 직접 구성하는 과정을 기록했습니다.
브라우저 렌더링 과정
브라우저가 HTML·CSS·JS를 받아 화면에 그리기까지의 렌더링 파이프라인(파싱·렌더 트리·레이아웃·페인트)을 단계별로 정리했습니다.