Vite

9 posts
Void: Vite 네이티브 배포 프랫폼

Void: Vite 네이티브 배포 프랫폼

Vite+가 로컬 개발 도구를 하나로 통합했다면, 이번에는 배포까지 먹으러 왔습니다. VoidZero가 내놓은 Void는 Vite 앱에 플러그인 하나를 추가하고 void deploy 한 방이면 데이터베이스, 인증, KV 스토리지, 큐까지 갖춘 풀스택 애플리케이션이 Cloudflare Workers 위에 올라가는 배포 플랫폼입니다. "자바스크립트에 드디어 Rails 순간이 온 건가, 아니면 그냥 Cloudflare 종속에 리본을 달아놓은 건가?" 궁금해서 Void가 뭘 하는 건지 직접 파헤쳐봤습니다. Vite+와 Void의 관계 먼저

TanStack Start: 타입 안전한 풀스택 React 프레임워크

TanStack Start: 타입 안전한 풀스택 React 프레임워크

React로 풀스택 앱을 만들 때 어떤 프레임워크를 쓰시나요? 아마 Next.js를 먼저 떠올리실 텐데요. Next.js가 사실상 표준처럼 자리 잡긴 했지만 쓰다 보면 아쉬운 점도 있습니다. 타입 안전성이 중간중간 끊긴다거나, 캐싱 동작이 예상과 다르게 돌아간다거나, 배포할 때 특정 플랫폼에 묶이는 느낌이 든다거나요. 그런 분들에게 TanStack Start가 반가울 겁니다. TanStack Query와 TanStack Table로 유명한 TanStack 생태계에서 나온 풀스택 React 프레임워크인데요. "엔드투엔드 타입 안전성"

Vite+로 웹 개발 도구 통합하기

Vite+로 웹 개발 도구 통합하기

웹 프론트엔드 프로젝트 하나를 제대로 셋업하려면 도구가 정말 많이 필요하죠. 번들러는 Vite, 테스트 러너는 Vitest, 린터는 ESLint, 포맷터는 Prettier... 거기에 Node.js 버전 관리자랑 패키지 매니저까지 더하면 package.json의 devDependencies가 금세 길어지고 설정 파일도 여기저기 흩어집니다. 2026년 3월, Vite의 창시자 Evan You가 이끄는 VoidZero가 이 문제에 대한 답을 내놓았는데요. Vite+ — Vite, Vitest, Oxlint, Oxfmt, Rolldown

Oxc로 자바스크립트 린팅과 포맷팅을 압도적으로 빠르게

Oxc로 자바스크립트 린팅과 포맷팅을 압도적으로 빠르게

자바스크립트 프로젝트를 하나 세팅하려면 설치해야 할 도구가 한두 개가 아닙니다. 코드 린팅에는 ESLint, 포맷팅에는 Prettier, 트랜스파일링에는 Babel이나 SWC, 번들링에는 Webpack이나 Vite... 각각 다른 팀이 다른 언어로 만든 도구들을 조합해서 쓰다 보니 설정 파일만 여러 개, 플러그인 간 버전 충돌에 빌드 속도는 답답하고. 😩 이 파편화된 자바스크립트 도구 생태계를 하나로 통합하겠다는 프로젝트가 있는데요, 바로 Oxc입니다. 이번 포스팅에서는 Oxc가 무엇이고, 어떤 도구들로 구성되어 있으며, 실제 프

RedwoodSDK: Cloudflare를 위한 React 프레임워크

RedwoodSDK: Cloudflare를 위한 React 프레임워크

예전에 RedwoodJS로 풀스택 웹 앱 만들기라는 글에서 RedwoodJS를 소개해드린 적이 있는데요. React, GraphQL, Prisma를 하나로 묶어서 풀스택 앱을 빠르게 만들 수 있게 해주는 프레임워크였죠. 그 글 마지막에 잠깐 언급했던 RedwoodSDK가 2025년 3월 드디어 v1.0으로 정식 출시되었습니다. RedwoodSDK는 기존 RedwoodJS의 후속작이라기보다는 완전히 새로운 프레임워크에 가깝습니다. GraphQL과 Prisma 중심이었던 기존 접근 방식을 버리고, React Server Componen

Cloudflare Vinext: Next.js 앱을 Vite로 돌리기

Cloudflare Vinext: Next.js 앱을 Vite로 돌리기

2026년 2월 말, Cloudflare가 꽤 파격적인 프로젝트를 공개했습니다. 이름은 Vinext — Next.js의 공개 API를 Vite 플러그인으로 재구현한 오픈소스 프로젝트인데요. Next.js를 포크한 게 아니라, Next.js가 제공하는 라우팅, 서버 렌더링, next/* 모듈 임포트, CLI 등의 API 표면을 Vite 생태계 위에서 처음부터 다시 만든 겁니다. "AI가 일주일 만에 만들었다"는 타이틀이 워낙 자극적이라 화제가 됐는데, 막상 내용을 들여다보면 기술적으로 꽤 흥미로운 지점이 많습니다. 이번 글에서는 Vi

Lightning CSS로 CSS 빌드 속도 극한까지 올리기

Lightning CSS로 CSS 빌드 속도 극한까지 올리기

프론트엔드 프로젝트의 CSS 빌드 파이프라인을 생각하면 머리가 복잡해지곤 합니다. 벤더 프리픽스를 자동으로 붙여주는 Autoprefixer, 최신 CSS 문법을 변환해주는 postcss-preset-env, 결과물을 압축해주는 cssnano... 이 모든 걸 PostCSS 위에 플러그인 형태로 쌓아올리다 보면 설정 파일이 점점 길어지고 빌드 시간도 함께 느려지는 경험, 한 번쯤 해보셨을 겁니다. 이번 포스팅에서는 이 모든 기능을 하나의 도구에 통합하면서도 압도적인 성능을 자랑하는 Lightning CSS에 대해서 알아보겠습니다. L

CRA 대신에 Vite로 React 프로젝트 시작하기

CRA 대신에 Vite로 React 프로젝트 시작하기

이번 포스팅에서는 차세대 번들러인 Vite 사용하여 React 프로젝트를 생성하고 설정하는 방법에 대해서 알아보겠습니다. Vite에 대한 기초적인 내용에 대해서는 별도 포스팅에서 자세히 다루고 있으니 참고하세요. CRA 🆚 Next.js 🆚 Vite 오랫동안 React 프로젝트를 만들기 위해서 Create React App라는 CLI 도구가 사용되었습니다. State of JS 2023 설문 결과를 보시면 Create React App을 사용해봤다는 응답자가 90%가 넘을 정도로 CRA는 오랫동안 React 생태계에서 프로젝트를

Vite 처음 시작하기

Vite 처음 시작하기

Vite가 Webpack이나 Parcel과 같은 기존 번들러(bundler)를 제치고 자바스크립트 생태계의 표준 빌드 도구로 자리 잡았습니다. Vue.js의 창시자인 Evan You가 만든 Vite는 2026년 3월 Vite 8 출시와 함께 Rust 기반의 Rolldown을 도입하면서 성능이 한층 빨라졌는데요. 이번 포스팅에서는 Vite를 처음 사용하시는 분들을 위해서 Vite로 웹 프로젝트를 시작하는 아주 기초적인 방법을 알려드리겠습니다. Vite란? Vite는 기존 자바스크립트 번들러의 만성적인 성능 문제를 해결하고 개발자 경험

Discord