TECH NOTES
기술노트
현장에서 검증된 개발 지식을 기록합니다.
605958575655545352515049
Frontend
Lightning CSS 2.0 — PostCSS 작별, 브라우저 호환 빌드 전략
Rust 기반 파서·트랜스포머로 PostCSS 대비 100배. browserslist 트랜스파일, CSS 모듈, 플러그인 마이그레이션 가이드.
Frontend
CSS 프레임워크 2026 — Tailwind v4 vs UnoCSS vs Panda 결정 가이드
Tailwind v4, UnoCSS, Panda CSS 세 프레임워크의 빌드 시간·번들 크기·DX 실측 비교와 팀 규모별 선택 기준.
Frontend
Tailwind CSS v4 Oxide 엔진 — Rust 빌드 5배 가속 실측
Tailwind v4 Oxide(Rust) 엔진 실측. 대형 프로젝트 빌드 4.8배·증분 11배 가속. CSS-first config 전환 함정과 v3 호환 한계.
Frontend
CSS @scope · @layer · nesting — 2026년 새 캐스케이드 전략
CSS 캐스케이드를 재설계하는 3가지 신기능(@scope·@layer·native nesting). 우선순위, BEM/Tailwind와의 공존, 실전 패턴.
Frontend
CSS Container Queries 실전 — 미디어 쿼리 작별, 컴포넌트 단위 반응형
2026년 표준이 된 Container Queries 실전 가이드. 컴포넌트가 위치에 따라 다르게 보이는 진정한 반응형 패턴.
Frontend
CSS Modern Layout — Container Queries·Subgrid·anchor positioning
CSS의 모던 레이아웃 도구들 — Container Queries (반응형 재정의), Subgrid (자식 grid 정렬), Anchor positioning (절대 위치 혁명). 모두 표준화 완료.
Frontend
View Transitions API 실전 — Next.js 16 페이지 전환 애니메이션
View Transitions API로 SPA·MPA 페이지 전환을 자연스럽게 만드는 실전 — Next.js 16 통합, hero 이미지 트랜지션, fallback 처리.
Frontend
Web Performance 2026 — INP 최적화 + Speculation Rules 실전
Core Web Vitals의 INP(Interaction to Next Paint)를 200ms 아래로 끌어내리는 실전 기법 + Speculation Rules로 페이지 전환 0초.
Frontend
Tailwind v4 실전 — CSS-first config·variants·Container Query 활용
Tailwind v4의 CSS-first config, Container Query, @starting-style 등 신기능을 실제 디자인 시스템에 통합하는 패턴.
Frontend
Web Components 2026 — 프레임워크 없이 재사용 UI 만드는 법 (Shadow DOM·Slot·Form Internals)
Web Components는 프레임워크 독립적인 브라우저 표준 UI 컴포넌트다. Custom Elements·Shadow DOM·Slot·Form Internals로 실전 컴포넌트를 만드는 법을 정리한다.
Frontend
Tailwind CSS 4 마이그레이션 가이드 — CSS-first 설정과 성능 개선 총정리
Tailwind CSS 4의 CSS-first 설정, Oxide 엔진, 새로운 유틸리티 클래스 등 주요 변경사항과 마이그레이션 가이드
Frontend
CSS Scroll-Driven Animations — 스크롤 기반 애니메이션
CSS Scroll-Driven Animations API로 JavaScript 없이 스크롤 애니메이션을 구현하기.