지난번 Void는 Vite 네이티브 배포 플랫폼이라는 글에서 "이게 자바스크립트의 Rails가 될 수 있을까"를 다뤘는데요. 그때는 직접 써보지 않고 개념만 파헤친 소개글이었습니다. 이번엔 다릅니다. TanStack Start + Cloudflare Workers + D1으로 운영 중이던 실서비스를 하루 만에 Void로 컷오버하면서 직접 부딪힌 기록이에요. 결론부터 말씀드리면 코드 변경은 거의 없었고, 빌드는 3배 빨라졌고, 그리고 베타 제품답게 문서에 없는 지뢰를 다섯 개나 밟았습니다. 💥 이 글은 그 지뢰들을 어떻게 역공학으로
Void 라우팅에서 데이터를 읽어 오는 로더는 자세히 봤는데요. 정작 데이터를 바꾸는 쪽은 "로더 대신 action을 내보낸다"는 한 줄로 넘어갔습니다. 사실 폼을 다루는 일은 읽기보다 손이 많이 가죠. 입력값을 검증하고, 에러를 화면에 표시하고, 제출 중에는 버튼을 막고, 성공하면 목록을 새로고침하고… 이번 글에서는 Void가 이 과정을 useForm 하나로 어떻게 묶어주는지 살펴보겠습니다. 액션으로 데이터 바꾸기 데이터를 읽을 때 로더를 썼다면, 바꿀 때는 액션을 씁니다. 페이지의 .server.ts에서 action을 내보내면
Void: Vite 네이티브 배포 플랫폼에서 데이터베이스를 소개할 때 "로컬에서는 SQLite, 프로덕션에서는 Cloudflare D1로 매핑된다"는 한 줄로 짚고 넘어갔는데요. 이번엔 그 데이터베이스 레이어를 제대로 들여다볼게요. 스키마는 어떻게 정의하고, 마이그레이션은 어떻게 굴리고, 쿼리는 어떻게 날리는지까지 차근차근 살펴보겠습니다. Void 라우팅에서 API 핸들러에 insertUserSchema로 입력을 검증하는 예제를 봤는데, 그 검증기가 어디서 오는지도 이 글에서 채워집니다. 로컬은 SQLite, 프로덕션은 D1 Voi
Void: Vite 네이티브 배포 플랫폼에서 프로젝트 구조를 훑어볼 때 pages/와 routes/ 디렉토리를 잠깐 스쳐 지나갔는데요. 사실 이 두 디렉토리가 Void로 앱을 만드는 거의 모든 것을 담당합니다. 화면을 그리는 일도, API를 여는 일도 결국 "어떤 파일을 어디에 두느냐"로 결정되거든요. 이번 글에서는 Void의 라우팅을 제대로 파헤쳐볼게요. 파일 하나가 어떻게 URL이 되는지, 서버에서 가져온 데이터가 어떻게 화면 컴포넌트로 흘러가는지, API 핸들러는 어떻게 쓰고 입력 검증과 미들웨어는 어떻게 거는지까지 차근차근
Vite+가 로컬 개발 도구를 하나로 통합했다면, 이번에는 배포까지 먹으러 왔습니다. VoidZero가 내놓은 Void는 Vite 앱에 플러그인 하나를 추가하고 void deploy 한 방이면 데이터베이스, 인증, KV 스토리지, 큐까지 갖춘 풀스택 애플리케이션이 Cloudflare Workers 위에 올라가는 배포 플랫폼입니다. "자바스크립트에 드디어 Rails 순간이 온 건가, 아니면 그냥 Cloudflare 종속에 리본을 달아놓은 건가?" 궁금해서 Void가 뭘 하는 건지 직접 파헤쳐봤습니다. Vite+와 Void의 관계 먼저
React로 풀스택 앱을 만들 때 어떤 프레임워크를 쓰시나요? 아마 Next.js를 먼저 떠올리실 텐데요. Next.js가 사실상 표준처럼 자리 잡긴 했지만 쓰다 보면 아쉬운 점도 있습니다. 타입 안전성이 중간중간 끊긴다거나, 캐싱 동작이 예상과 다르게 돌아간다거나, 배포할 때 특정 플랫폼에 묶이는 느낌이 든다거나요. 그런 분들에게 TanStack Start가 반가울 겁니다. TanStack Query와 TanStack Table로 유명한 TanStack 생태계에서 나온 풀스택 React 프레임워크인데요. "엔드투엔드 타입 안전성"
웹 프론트엔드 프로젝트 하나를 제대로 셋업하려면 도구가 정말 많이 필요하죠. 번들러는 Vite, 테스트 러너는 Vitest, 린터는 ESLint, 포맷터는 Prettier... 거기에 Node.js 버전 관리자랑 패키지 매니저까지 더하면 package.json의 devDependencies가 금세 길어지고 설정 파일도 여기저기 흩어집니다. 2026년 3월, Vite의 창시자 Evan You가 이끄는 VoidZero가 이 문제에 대한 답을 내놓았는데요. Vite+ — Vite, Vitest, Oxlint, Oxfmt, Rolldown
자바스크립트 프로젝트를 하나 세팅하려면 설치해야 할 도구가 한두 개가 아닙니다. 코드 린팅에는 ESLint, 포맷팅에는 Prettier, 트랜스파일링에는 Babel이나 SWC, 번들링에는 Webpack이나 Vite... 각각 다른 팀이 다른 언어로 만든 도구들을 조합해서 쓰다 보니 설정 파일만 여러 개, 플러그인 간 버전 충돌에 빌드 속도는 답답하고. 😩 이 파편화된 자바스크립트 도구 생태계를 하나로 통합하겠다는 프로젝트가 있는데요, 바로 Oxc입니다. 이번 포스팅에서는 Oxc가 무엇이고, 어떤 도구들로 구성되어 있으며, 실제 프
예전에 RedwoodJS로 풀스택 웹 앱 만들기라는 글에서 RedwoodJS를 소개해드린 적이 있는데요. React, GraphQL, Prisma를 하나로 묶어서 풀스택 앱을 빠르게 만들 수 있게 해주는 프레임워크였죠. 그 글 마지막에 잠깐 언급했던 RedwoodSDK가 2025년 3월 드디어 v1.0으로 정식 출시되었습니다. RedwoodSDK는 기존 RedwoodJS의 후속작이라기보다는 완전히 새로운 프레임워크에 가깝습니다. GraphQL과 Prisma 중심이었던 기존 접근 방식을 버리고, React Server Componen
2026년 2월 말, Cloudflare가 꽤 파격적인 프로젝트를 공개했습니다. 이름은 Vinext — Next.js의 공개 API를 Vite 플러그인으로 재구현한 오픈소스 프로젝트인데요. Next.js를 포크한 게 아니라, Next.js가 제공하는 라우팅, 서버 렌더링, next/* 모듈 임포트, CLI 등의 API 표면을 Vite 생태계 위에서 처음부터 다시 만든 겁니다. "AI가 일주일 만에 만들었다"는 타이틀이 워낙 자극적이라 화제가 됐는데, 막상 내용을 들여다보면 기술적으로 꽤 흥미로운 지점이 많습니다. 이번 글에서는 Vi
프론트엔드 프로젝트의 CSS 빌드 파이프라인을 생각하면 머리가 복잡해지곤 합니다. 벤더 프리픽스를 자동으로 붙여주는 Autoprefixer, 최신 CSS 문법을 변환해주는 postcss-preset-env, 결과물을 압축해주는 cssnano... 이 모든 걸 PostCSS 위에 플러그인 형태로 쌓아올리다 보면 설정 파일이 점점 길어지고 빌드 시간도 함께 느려지는 경험, 한 번쯤 해보셨을 겁니다. 이번 포스팅에서는 이 모든 기능을 하나의 도구에 통합하면서도 압도적인 성능을 자랑하는 Lightning CSS에 대해서 알아보겠습니다. L
Vite로 프로젝트를 만들다 보면 @vitejs/plugin-react나 vite-plugin-svgr 같은 플러그인을 한두 개쯤은 꼭 설치하게 되는데요. vite.config.js의 plugins 배열에 함수 하나 넣었을 뿐인데 JSX가 변환되고, SVG가 컴포넌트로 바뀌고, 환경 변수가 주입됩니다. 도대체 이 플러그인이라는 게 안에서 무슨 일을 하길래 빌드 과정에 이렇게 자연스럽게 끼어들 수 있는 걸까요? 🤔 사실 Vite 플러그인은 생각보다 훨씬 단순한 구조로 되어 있습니다. 객체 하나에 약속된 이름의 함수 몇 개를 넣어주면
이번 포스팅에서는 차세대 번들러인 Vite 사용하여 React 프로젝트를 생성하고 설정하는 방법에 대해서 알아보겠습니다. Vite에 대한 기초적인 내용에 대해서는 별도 포스팅에서 자세히 다루고 있으니 참고하세요. CRA 🆚 Next.js 🆚 Vite 오랫동안 React 프로젝트를 만들기 위해서 Create React App라는 CLI 도구가 사용되었습니다. State of JS 2023 설문 결과를 보시면 Create React App을 사용해봤다는 응답자가 90%가 넘을 정도로 CRA는 오랫동안 React 생태계에서 프로젝트를
Vite가 Webpack이나 Parcel과 같은 기존 번들러(bundler)를 제치고 자바스크립트 생태계의 표준 빌드 도구로 자리 잡았습니다. Vue.js의 창시자인 Evan You가 만든 Vite는 2026년 3월 Vite 8 출시와 함께 Rust 기반의 Rolldown을 도입하면서 성능이 한층 빨라졌는데요. Vite를 관리하는 회사 VoidZero는 2026년 6월 Cloudflare에 인수되었지만, Vite는 변함없이 MIT 라이선스 오픈소스로 유지됩니다. 이번 포스팅에서는 Vite를 처음 사용하시는 분들을 위해서 Vite로