#웹 성능
2개의 포스트
2026년 프론트엔드 실전 팁 9가지 — 직접 재현해 보는 함정과 해법
라이브러리 고르는 법을 다룬 지난 글에 이어, 이번에는 매일 코드를 쓰는 사람이 알아야 할 습관 아홉 가지를 정리했습니다. 보안 패치는 기능 업데이트가 아니라는 것(React2Shell, Next.js 8월·9월 보안 릴리스), npm 공급망 공격에 대비해 새 버전을 하루 늦게 받는 법, React Compiler 시대의 '렌더는 순수하게' 규칙과 useEffectEvent, React 19.3과 Next.js 16.3의 변화, INP를 지키는 작업 쪼개기, 라이브러리 전에 확인할 브라우저 기본 기능, 한글 입력 중 Enter 두 번 전송 버그, keep-all·대체 글꼴·Intl로 다듬는 한국어 화면, 그리고 AI가 짠 코드를 브라우저에서 확인하는 습관. 각 팁에는 여러분의 브라우저에서 직접 재현하고 측정하는 데모 6개를 붙였습니다.
2026년 9월 프론트엔드 라이브러리 지도 — 11개 라이브 데모로 직접 보고 고르기
Tailwind·shadcn/ui·Motion·GSAP·Lenis·Three.js는 같은 문제를 푸는 도구가 아닙니다. 스타일, 인터페이스 구조, 상태 변화, 복합 연출, 스크롤 감각, 3D를 각각 맡습니다. 2026년 9월 30일 npm 레지스트리와 GitHub에서 버전·날짜·라이선스를 다시 확인해 역할별로 정리했고, 올해 주목받은 Paper Shaders·Torph·Sileo·Pretext·json-render까지 다뤘습니다. 무엇보다 각 라이브러리를 이 페이지에서 실제로 불러 돌리는 인터랙티브 데모 11개를 붙였습니다. 컨테이너 쿼리로 배치가 바뀌는 카드, Motion의 상태 전환 네 가지, 스크롤로 조종하는 GSAP 타임라인, Lenis와 기본 스크롤 비교, 멈추면 렌더도 멈추는 3D, 셰이더 재질 8종, 한국어 말풍선을 DOM 없이 재는 Pretext, AI가 승인된 컴포넌트로만 화면을 조립하는 json-render를 직접 만져 보고 고르세요.