01_vite8_rolldown.md

원문 제목: Vite 8.0 is out! 원문 링크: https://vite.dev/blog/announcing-vite8 번역일: 2026-03-17 (KST)

Vite 8.0 출시 — Rolldown으로 단일 번들러 통합

Vite가 2026년 3월 12일, 드디어 8.0 정식 버전을 출시했습니다. 이번 릴리스의 핵심은 Rolldown 도입입니다. Vite는 지금까지 개발 서버에는 esbuild, 프로덕션 빌드에는 Rollup이라는 두 개의 번들러를 사용해왔습니다. 이 구조는 실용적이었지만 두 파이프라인 간의 동기화 문제, 플러그인 이중 지원, 엣지 케이스 누적 등의 기술 부채를 낳았습니다.

Vite 8에서는 Rust 기반의 Rolldown을 단일 번들러로 채택함으로써 이 문제를 해결합니다.

주요 변경 사항

성능: Rolldown은 Rollup 대비 10~30배 빠른 빌드 속도를 제공하며 esbuild 수준의 성능에 도달합니다.
호환성: 기존 Rollup/Vite 플러그인 API를 그대로 지원해 대부분의 플러그인이 Vite 8에서 별도 수정 없이 동작합니다.
새 DevTools: Rolldown 사용 시 빌드 분석 및 디버깅을 위한 DevTools가 추가되었습니다.
SSR Wasm 지원: 서버 사이드 렌더링 환경에서 WebAssembly를 지원합니다.
콘솔 로그 전달: 브라우저 콘솔 로그를 개발 서버 터미널로 포워딩합니다.
플러그인 레지스트리: registry.vite.dev를 통해 Vite/Rolldown/Rollup 플러그인을 검색할 수 있는 디렉토리가 출시되었습니다.

현재 Vite는 주간 다운로드 6,500만 회를 기록 중입니다. 마이그레이션 가이드는 공식 문서를 참고하세요.

02_vite_plus_alpha.md

원문 제목: Announcing Vite+ Alpha 원문 링크: https://voidzero.dev/posts/announcing-vite-plus-alpha 번역일: 2026-03-17 (KST)

Vite+ 알파 발표 — 통합 웹 개발 툴체인 (MIT 오픈소스)

VoidZero가 Vite+ 알파 버전을 MIT 라이선스로 오픈소스 공개했습니다. 처음에는 유료 엔터프라이즈 제품으로 기획되었지만, 방향을 바꾸어 완전 오픈소스로 출시했습니다.

Vite+는 단순한 번들러가 아닌 통합 개발 툴체인입니다. Vite, Vitest, Oxlint, Oxfmt, Rolldown, tsdown을 하나로 묶어 개발부터 테스트, 린트, 포맷, 빌드, 배포까지 단일 설정 파일로 처리합니다. Node.js 런타임과 패키지 매니저 관리까지 지원합니다.

주요 명령어

명령어	기능
`vp env`	Node.js 전역/프로젝트별 관리
`vp install`	패키지 매니저 자동 감지 후 의존성 설치
`vp dev`	Vite 개발 서버 (Native ESM + 즉시 HMR)
`vp check`	Oxlint 린팅 + Oxfmt 포맷팅 + tsgo 타입 체크
`vp test`	Vitest 실행
`vp build`	Rolldown + Oxc 프로덕션 빌드
`vp pack`	npm 라이브러리 배포 또는 독립 실행 바이너리 생성

성능 비교

Vite + Rolldown: Vite 7 대비 ~1.6× ~ 7.7× 빠른 프로덕션 빌드
Oxlint: ESLint 대비 ~50 ~ 100× 빠름
Oxfmt: Prettier 대비 최대 30× 빠름

React, Vue, Svelte 등 Vite 생태계의 모든 프레임워크와 호환됩니다.

03_temporal_api.md

원문 제목: Temporal: The 9-Year Journey to Fix Time in JavaScript 원문 링크: https://bloomberg.github.io/js-blog/post/temporal/ 번역일: 2026-03-17 (KST)

Temporal: JavaScript에서 시간을 고치기까지의 9년 여정

Bloomberg 엔지니어링팀이 작성한 글로, JavaScript의 오랜 숙원이었던 Temporal API 탄생 스토리를 담고 있습니다. Temporal은 2026년 3월 11일 TC39 Stage 4에 진입하여 ES2026 스펙의 일부가 되었습니다. Chrome, Firefox, Edge에 네이티브로 탑재됩니다.

왜 Date가 문제였나?

1995년 Brendan Eich가 10일 만에 JavaScript를 만들면서 Java의 Date 구현체를 그대로 포팅했습니다. 이 결정이 이후 30년간 개발자들을 괴롭혀왔습니다. Date의 주요 문제점:

가변(mutable): 한 번 생성된 객체를 변경할 수 있어 버그 유발
타임존 지원 빈약: UTC와 로컬 타임존만 지원, 임의 타임존 불가
달력 미지원: 그레고리력 외의 달력 처리 불가
단일 타입: 날짜만, 시간만, 타임존 없는 날짜 등 세분화된 타입 없음
직관적이지 않은 API: 월이 0-indexed (1월 = 0)

Temporal이 해결하는 것

Temporal은 다양한 타입을 제공합니다:

Temporal.PlainDate — 날짜만 (타임존 없음)
Temporal.PlainTime — 시간만
Temporal.PlainDateTime — 날짜 + 시간 (타임존 없음)
Temporal.ZonedDateTime — 완전한 타임존 포함 날짜/시간
Temporal.Instant — 절대 시점 (Unix timestamp 대체)
Temporal.Duration — 시간 간격

모든 Temporal 객체는 **불변(immutable)**이며 IANA 타임존 데이터베이스를 완전히 지원합니다.

// 예시: 한국 시간으로 현재 날짜/시간
const now = Temporal.Now.zonedDateTimeISO('Asia/Seoul');
console.log(now.toString()); // 2026-03-17T10:25:00+09:00[Asia/Seoul]

9년의 긴 여정 끝에 Moment.js, date-fns, dayjs 등의 서드파티 라이브러리 없이도 올바른 날짜/시간 처리가 가능해졌습니다.

04_nextjs_spa_reality.md

원문 제목: Next.js / SPA Reality Check (Reddit r/reactjs 토론) 원문 링크: https://www.reddit.com/r/reactjs/comments/1rrjkfm/nextjs_spa_reality_check/ 번역일: 2026-03-17 (KST)

Next.js / SPA 현실 점검 — Vite SPA로 돌아가도 괜찮아

r/reactjs에서 높은 공감을 받은 토론 스레드입니다. 원 글쓴이는 이렇게 말합니다:

"App Router와 React Server Components는 강력하지만, 지금 프론트엔드 생태계의 분위기는 도를 넘었습니다. 모든 내부 대시보드, 단순 CRUD 앱, 개인 포트폴리오가 SSR, 엣지 함수, 박사학위가 필요한 복잡한 캐싱 레이어를 필요로 하는 건 아닙니다. Vite로 SPA를 만들고 CDN에 정적 번들을 올리는 게 얼마나 깔끔한지 — 그냥 그게 죄인 것처럼 느껴지는 분위기가 이상합니다."

커뮤니티 반응 요약

동의하는 측: 앱의 90%는 Vite SPA로 충분하다. Next.js의 복잡성을 감수할 가치가 있는 프로젝트는 생각보다 적다.
반론: Next.js의 SEO, 초기 로딩 성능, App Router의 스트리밍/서스펜스 지원은 실제 프로덕션에서 유의미하다.
절충점: "use client" / "use server" 경계를 잘 이해하면 Next.js도 복잡하지 않다. 문제는 과도한 추상화가 아니라 이해 없이 쓰는 것.

실무 시사점: 새 프로젝트를 시작할 때 무조건 Next.js를 선택하지 말고, SEO·SSR 필요성, 팀의 이해도, 인프라 비용을 먼저 따져보세요.

05_css_view_transition_groups.md

원문 제목: view-transition-groups — Modern CSS Daily 원문 링크: https://modern-css.davecross.co.uk/2026/03/15/view-transition-groups/ 번역일: 2026-03-17 (KST)

CSS view-transition-groups — JS 없이 SPA 전환 애니메이션을

CSS의 새 기능인 view-transition-groups를 소개하는 글입니다. SPA에서 뷰 전환 시 여러 요소를 하나의 그룹으로 묶어 일관된 전환 애니메이션을 구현할 수 있습니다.

핵심 개념

기존 view-transition-name이 단일 요소의 전환을 다뤘다면, view-transition-groups는 여러 요소를 하나의 애니메이션 단위로 그룹화합니다. React나 Vue의 컴포넌트 상태 전환과 자연스럽게 연동됩니다.

.view-transition-group {
  display: contents;
  transition: opacity 0.5s ease-in-out;
}

.view-transition-group.exit-active,
.view-transition-group.enter {
  opacity: 0;
}

.view-transition-group.exit,
.view-transition-group.enter-active {
  opacity: 1;
}

왜 중요한가?

JavaScript 의존도 감소: 기존에는 Framer Motion 등 JS 라이브러리가 필요했던 전환 효과를 순수 CSS로 구현 가능
성능: CSS 애니메이션은 GPU 가속을 활용해 더 부드러운 60fps 전환
관심사 분리: 전환 로직을 JS 컴포넌트에서 CSS로 분리

현재 Chrome/Edge에서 지원되며 Firefox는 점진적 지원 중입니다.

06_small_web.md

원문 제목: The "small web" is bigger than you might think 원문 링크: https://kevinboone.me/small_web_is_big.html 번역일: 2026-03-17 (KST)

"스몰 웹"은 당신이 생각하는 것보다 크다

프론트엔드 엔지니어라면 한 번쯤 생각해볼 만한 에세이입니다. 저자는 광고와 기업 추적이 없는 개인 웹사이트들의 공동체, 이른바 "스몰 웹(small web)"의 규모와 의미를 탐구합니다.

스몰 웹이란?

일반 웹 브라우저와 서버를 사용하지만, 광고·추적·상업적 목적 없이 운영되는 개인 웹사이트들의 집합입니다. Gemini 프로토콜(HTTP 대신 완전히 다른 프로토콜 사용)도 이 운동의 일부로, 상업적 착취가 구조적으로 불가능하도록 설계되어 있습니다.

왜 지금 주목할까?

저자는 Gemini 피드 애그리게이터를 통해 전 세계 약 6,000개의 Gemini 캡슐(사이트)을 발견했고, 매일 흥미로운 콘텐츠를 소비합니다. 이를 일반 스몰 웹으로 확장할 수 있는지 탐구합니다.

프론트엔드 개발자에게 시사하는 것

우리가 만드는 웹사이트가 꼭 복잡한 React SPA일 필요는 없습니다
HTML 퍼스트, 가벼운 웹의 가치를 다시 생각해볼 시점
"완벽한 DX 스택"보다 실제 사용자에게 빠르고 접근 가능한 웹이 먼저

Hacker News에서 300+ 포인트를 받으며 활발한 토론이 이어지고 있습니다.

leedc0101/fe-briefing-2026-03-17.md

Select an option

No results found