Frontend — 관련 콘텐츠 74건

Tailwind CSS v4 — 무엇이 달라졌나

한 줄 요약: Tailwind CSS v4는 설정 파일 대신 CSS 기반 설정(@theme), Rust 기반 엔진 Oxide로 빌드 속도 10배 향상, CSS-first 접근법이 핵심 변경이다. Tailwind v3에서 v4로의 전환은 단순 업그레이드가 아니라 설정 패러다임 자체가 변경된다. Tailwind CSS v4의 가장 큰 변화: 설정 파일 대신 CSS에서 직접 설정.

Playwright E2E 테스트 자동화 실전 가이드 — 설치부터 CI/CD 통합까지

"수동으로 클릭해서 테스트하고 있다면, 그건 테스트가 아니라 기도다." 프론트엔드 배포 후 로그인이 깨지고, 결제 플로우가 멈추고, 모달이 안 닫히는 걸 사용자가 먼저 발견 한 경험이 있다면 — 이 가이드가 필요하다. Playwright는 Microsoft가 만든 E2E 테스트 프레임워크로, Chromium·Firefox·WebKit 세 엔진을 하나의 API로 제어한다.

React Server Components 실전 가이드

한 줄 요약: React Server Components(RSC)는 서버에서 렌더링되어 클라이언트 번들에 포함되지 않는 컴포넌트로, 번들 크기 감소와 데이터 페칭 간소화가 핵심 장점이다. RSC는 React 18에서 도입되고 Next.js App Router에서 기본값이 된 패러다임이다. React Server Components는 서버에서만 실행되는 컴포넌트 입니다.

Vite vs Webpack 2026 — 프론트엔드 번들러 실전 비교

새 프로젝트를 시작할 때마다 반복되는 질문이 있다. "Vite로 갈까, Webpack으로 갈까?" 2024년까지만 해도 Webpack이 기본값이었다. 2026년 지금, npm 트렌드에서 Vite의 주간 다운로드가 Webpack의 60%를 넘겼고, Next.js 15는 Turbopack을 기본 번들러로 전환했다. 하지만 엔터프라이즈 프로젝트의 70% 이상은 여전히 Webpack 위에서 돌아간다. 이 글의 결론을 먼저 말하면 신규 프로젝트 + 소~중규모 팀 → Vite 대규모 레거시 + 복잡...

Next.js 15 핵심 변경사항 총정리

한 줄 요약: Next.js 15는 Turbopack 안정화, 캐싱 전략 변경(기본 no-cache), Partial Prerendering(PPR), React 19 통합이 핵심이다. Next.js 14에서 15로 마이그레이션하면 무엇이 달라지는지, 실전 프로젝트에서 주의할 점은 무엇인지 정리한다. 특히 캐싱 동작 변경은 기존 앱의 성능에 직접 영향을 미치므로 반드시 확인해야 한다.

웹 접근성 체크리스트 2026 — WCAG 2.2 기준 프론트엔드 점검 38항목

"우리 서비스 접근성 괜찮은 거 맞아?" — 이 질문에 자신 있게 답할 수 있는 프론트엔드 팀은 드물다. Lighthouse 점수 100이 나와도 스크린 리더 사용자가 장바구니에 상품을 담지 못하는 경우가 실제로 발생한다. 38개 항목을 5개 영역 으로 나눴다. 각 영역은 독립적이므로, 현재 가장 취약한 영역부터 시작해도 된다.

Tailwind CSS v4 심층 분석 — Oxide 엔진, CSS-first 설정, 마이그레이션 전략

Tailwind CSS v4가 2025년 1월 정식 릴리스되었고, 2026년 3월 현재 v4.1까지 안정화되면서 프로덕션 마이그레이션이 본격화되고 있다. 가장 큰 변화는 설정 파일이 사라졌다 는 것이다. v4의 핵심은 Oxide 엔진이다. Tailwind의 코어 로직 — 클래스 감지(content scanning), 유틸리티 생성, CSS 출력 — 을 JavaScript에서 Rust로 재작성했다.

Core Web Vitals 완벽 분석 — LCP, INP, CLS 점수를 90+로 만드는 실전 전략

Lighthouse 점수 50점대. 배포 직후에는 괜찮았는데 이미지 몇 개 추가하고, 서드파티 스크립트 붙이고, 폰트 바꾸다 보니 어느새 빨간불이 켜졌다. Google Search Console에서 "Core Web Vitals 개선 필요" 경고가 뜨고, 검색 순위가 밀리기 시작한다. Core Web Vitals는 2021년에 Google 검색 랭킹 요소로 도입된 이후, 2024년 3월에 FID가 INP로 교체되면서 더 엄격해졌다. 이제는 단순히 "페이지가 빠르면 된다"가 아니라 로딩(L...

Google AI Studio 풀스택 전환 — Antigravity 에이전트와 Firebase 통합 바이브코딩

한 줄 요약: Google AI Studio가 풀스택 바이브코딩 IDE로 변신했다. Antigravity 코딩 에이전트가 프롬프트 하나로 백엔드·인증·DB까지 세팅하고, Firebase가 내장됐다. 2026년 3월 20일, Sundar Pichai가 직접 발표한 이번 업데이트의 핵심은 세 가지다: 1. Antigravity 코딩 에이전트 통합 Google의 내부 코딩 에이전트 Antigravity의 핵심 컴포넌트가 AI Studio에 탑재됐다.

Next.js App Router 마이그레이션 완벽 가이드 — Pages Router에서 전환하기

한 줄 요약: Pages Router에서 App Router로의 마이그레이션은 점진적으로 가능하다. 두 라우터는 같은 Next.js 프로젝트 안에서 공존할 수 있으므로 페이지 단위로 전환하는 전략이 현실적이다. App Router(Next.js 13.4에서 stable)는 React Server Components(RSC)를 기반으로 한다. Pages Router의 컴포넌트는 기본적으로 클라이언트 컴포넌트였지만, App Router에서는 기본이 서버 컴포넌트다.

React 19 새 기능 실전 가이드 — use, Actions, Server Components 통합

한 줄 요약: React 19는 use 훅, Actions, form actions, 개선된 Server Components 통합으로 비동기 상태 관리와 서버-클라이언트 데이터 흐름을 크게 단순화했다. 기존 useEffect + useState 패턴 상당 부분을 더 선언적인 방식으로 대체할 수 있다. use 는 React 19에서 도입된 새로운 훅으로, 다른 훅과 달리 조건문 안에서도 호출 가능 하다.

Remix vs Next.js — 풀스택 프레임워크 비교 2026

한 줄 요약: Remix는 웹 표준 기반의 단순한 데이터 로딩과 뮤테이션이 강점이고, Next.js는 App Router와 Server Components로 대규모 프로덕션 환경에서의 성숙도가 높다. 2026년 기준 Next.js는 여전히 풀스택 선택의 기본값이고, Remix는 명확한 요구사항이 있을 때 차별화된다. 이 글이 필요한 사람 새 풀스택 프로젝트의 프레임워크를 고르고 있는 개발자 Next.js에서 Remix로 전환을 검토 중인 팀 라우팅, 데이터 로딩, 서버 사이드 처리 방식의...

CSS Container Queries 실전 가이드

한 줄 요약: CSS Container Queries는 부모 컨테이너의 크기를 기준으로 스타일을 조건부 적용하는 기능으로, 재사용 가능한 컴포넌트 기반 레이아웃을 구축할 때 Media Query보다 훨씬 정확하다. 이 글이 필요한 사람 같은 컴포넌트가 사이드바와 메인 영역에서 다르게 보여야 하는 레이아웃을 구현 중인 개발자 Media Query만으로 해결이 안 되는 반응형 컴포넌트 문제를 겪고 있는 경우 @container 문법과 브라우저 지원 현황을 실무 기준으로 파악하려는 경우 CSS...

Svelte 5 vs React 19 — 2026년 프론트엔드 프레임워크 비교

한 줄 요약: Svelte 5는 번들 크기와 런타임 성능에서 앞서고, React 19는 에코시스템과 채용 시장 범용성에서 압도적이다. 2026년 기준으로 신규 프로젝트라면 팀 규모와 장기 유지보수 계획이 선택 기준이 된다. 이 글이 필요한 사람 신규 프론트엔드 프로젝트의 기술 스택을 결정해야 하는 개발자 / 팀 리더 React에서 Svelte로 마이그레이션을 고민 중인 경우 Svelte 5 Runes와 React 19 Hooks의 실질적 차이를 코드 레벨에서 파악하려는 경우 번들 크기와 ...