콘텐츠로 이동

Vite

파일이 많아지는 에디터 프로젝트에서 개발 서버가 매번 전체를 다시 묶으면, 파일 하나 고치고 화면 보는 데까지 몇 초씩 걸리기 마련이에요. 특히 캔버스처럼 컴포넌트가 수백 개씩 쌓이는 화면은 그 기다림이 개발 흐름을 끊죠. Vite는 개발 서버와 빌드를 매우 빠르게 만들어주는 도구입니다. 파일을 고치면 바뀐 모듈만 즉시 반영(HMR)해서 기다림을 줄여줘요. 데이터스케쳐스에서는 캔버스 같은 React 에디터를 Vite로 빌드합니다.

기술 하이라이트 / 핵심 개념

  • 네이티브 ES 모듈(ESM) — 개발 중에는 번들링을 미루고 브라우저가 ES 모듈을 직접 읽게 해서 서버 시작이 빨라요. 프로젝트가 커져도 대부분의 파일을 미리 묶지 않기 때문에, 규모가 커져도 개발 서버 시작 시간이 크게 늘지 않는 게 장점이죠.
  • HMR(Hot Module Replacement) — 코드를 고치면 페이지 전체를 새로고침하지 않고 바뀐 모듈만 교체해요. 에디터처럼 편집 상태를 유지하면서 결과를 바로 봐야 하는 화면에서 유리합니다. 수정한 컴포넌트만 갱신되고 나머지 상태는 그대로 남죠.
  • 빌드 시 Rollup 번들링 — 배포용 빌드는 롤업(Rollup)으로 최적화해 산출물을 만듭니다. 개발은 빠른 ESM·HMR로, 배포는 최적화된 번들로 — 개발 속도와 배포 성능을 따로 잡는 구조예요.
  • 플러그인 생태계 — React·TypeScript 지원은 물론 다양한 플러그인으로 확장합니다. 새 프레임워크나 도구가 나오면 대부분 Vite 플러그인 형태로 먼저 지원되기도 해요. 템플릿(react-ts) 생성을 비롯해 기본 설정만으로 React + TypeScript 개발 환경이 갖춰집니다.
# 프로젝트를 만들고 개발 서버를 띄우는 기본 흐름이에요.
npm create vite@latest my-editor -- --template react-ts
cd my-editor
npm install
npm run dev   # 개발 서버, HMR이 켜진 상태로 뜹니다.
npm run build # Rollup이 배포용 번들을 만듭니다.

사용 사례 / 실제 적용

  • D-SKET Canvas — React + Vite 에디터로 캔버스를 그립니다. Zustand 상태, Tailwind 스타일, dnd-kit 인터랙션을 Vite가 하나로 묶어 개발·빌드해요. 개발 중엔 HMR 덕분에 노드를 옮기는 로직을 고쳐도 화면 상태를 유지한 채 바로 확인할 수 있어요.

캔버스 에디터처럼 상태를 오래 들고 있는 화면에서 HMR은 특히 중요해요. 페이지가 통째로 새로고침되면 편집 중이던 상태가 사라지지만, HMR은 수정한 부분만 교체해서 화면과 상태를 모두 유지해 줍니다.

반면 웹빌더(Webbuilder)는 Next.js로 돌아갑니다. 같은 React 코드라도 캔버스는 Vite, 웹빌더는 Next.js로 쓰임새를 나눠요. 캔버스처럼 클라이언트 중심인 에디터에선 Vite의 개발 속도가, SEO·SSR·SSG가 필요한 웹빌더에선 Next.js의 서버 렌더링이 더 어울리는 거죠. Vite는 순수 클라이언트 앱을 빠르게 만들 때, Next.js는 서버가 개입해야 할 때 선택하는 식입니다.

에디터 프로젝트는 파일 수가 많아서 개발 경험이 그대로 생산성으로 이어져요. Vite의 ESM·HMR 조합은 "고치고 바로 보기" 반복을 빠르게 만들어, 캔버스처럼 상태를 유지하며 다듬어야 하는 화면에서 특히 도움이 됩니다. npm run dev로 띄운 개발 서버와 npm run build로 만드는 배포 산출물은 역할이 다르다는 점만 기억해 두면 돼요.

더 알아보기