1. Vue 프로젝트 생성 방법

Vue 프로젝트를 생성하는 방법은 여러 가지가 있다.

Vite 기반 (권장)

npm create vue@latest

대화형으로 옵션을 선택할 수 있으며, TypeScript, Router, Pinia 등 필요한 기능을 선택할 수 있다.

기타 방법

명령어	설명
`npm create vue@latest`	Vue 3 + Vite (공식 권장)
`npm create vite@latest`	Vite 기반 (Vue, React, Svelte 등 선택 가능)
`npm create nuxt@latest`	Nuxt (Vue SSR)
`vue create my-app`	Vue CLI (레거시, Webpack 기반)

2. npm create vue@latest와 Vite의 관계

npm create vue@latest는 내부적으로 Vite를 기본 번들러로 사용한다.

생성된 vite.config.ts:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()]
})

package.json의 scripts도 Vite 명령어 기반:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Vite는 전역 설치가 불필요하다. 프로젝트 생성 시 devDependencies에 자동으로 설치된다.

3. 프로젝트 생성 옵션 선택 가이드

일반 기능

옵션	설명	추천
JSX Support	Vue에서 JSX 문법 사용	거의 불필요
Router	페이지 라우팅 (Vue Router)	SPA면 필수 ✅
Pinia	전역 상태관리	추천 ✅
Vitest	유닛 테스트	실무 프로젝트 추천 ✅
End-to-End Testing	브라우저 전체 흐름 테스트	소규모면 패스
Linter	ESLint 코드 오류 검사	추천 ✅
Prettier	코드 자동 포맷팅	추천 ✅

실험적 기능 (Experimental)

옵션	설명	추천
Replace Prettier with Oxfmt	Rust 기반 포맷터	베타, 패스
Vite 8 (beta)	Vite 최신 베타	베타, 패스
Vue 3.6 (beta)	Vue 최신 베타	베타, 패스

실무 프로젝트라면 실험적 기능은 전부 패스 권장

나중에 따로 설치하는 방법

npm install vue-router      # Router
npm install pinia           # Pinia
npm install -D vitest       # Vitest
npm install -D eslint       # ESLint
npm install -D prettier     # Prettier

단, 생성 시 선택하면 설정 파일과 예제 코드까지 자동 생성해주므로 처음부터 선택하는 것이 편하다.

4. 프로젝트 생성 후 기본 실행

cd my-app
npm install
npm run dev
# → http://localhost:5173 접속

Git 초기화:

git init && git add -A && git commit -m "initial commit"

5. npm create 동작 원리

npm create vue@latest
# 위 명령어는 아래와 동일
npx create-vue@latest

npm create xxx는 npx create-xxx의 축약 문법이다.
create-vue 패키지를 임시로 다운받아 실행 후 삭제하기 때문에 전역 설치가 필요 없다.

6. npm vs npx

	npm	npx
정체	Node Package Manager	Node Package eXecute
주 역할	패키지 설치/관리	패키지 실행
설치 여부	로컬 또는 전역 설치	설치 없이 임시 실행

두 명령어 모두 Node.js 설치 시 자동으로 함께 설치되는 실행파일이다.

7. Node.js의 동작 구조

OS별 실행파일

OS	파일	형식
Windows	`node.exe`	PE (Portable Executable)
macOS	`node`	Mach-O 바이너리
Linux/Ubuntu	`node`	ELF (Executable and Linkable Format)

Windows만 .exe 확장자를 사용하고, Unix 계열은 확장자 없이 파일 퍼미션(x)으로 실행파일을 구분한다.

npm의 실행 구조 (Windows 기준)

npm install vue
    ↓
npm.cmd 실행 (배치 스크립트)
    ↓
node.exe 실행
    ↓
npm-cli.js 실행 (실제 npm 로직, JavaScript로 작성)

핵심: node.exe가 실행 주체이고, npm/npx는 node.exe 위에서 돌아가는 JS 프로그램이다.

파일	역할
`node.exe`	진짜 실행파일 (C++로 작성된 바이너리)
`npm.cmd`	node.exe를 호출하는 배치 스크립트
`npm-cli.js`	npm의 실제 로직 (JavaScript)

8. Node.js와 V8 엔진

Node.js는 구글이 만든 게 아니다. OpenJS Foundation이 관리하는 오픈소스 프로젝트다.

Node.js = V8 엔진(구글) + libuv(비동기 I/O) + 기타 모듈

구글은 Node.js 자체가 아니라 내부 엔진인 V8을 만들고 관리한다.

Node.js의 역사

2009년 Ryan Dahl이 개인적으로 개발
      ↓
2015년 Node.js Foundation 설립
      ↓
2019년 JS Foundation과 합병
      ↓
현재 OpenJS Foundation에서 관리

9. Ryan Dahl과 Deno

Node.js를 만든 Ryan Dahl은 나중에 Node.js의 설계를 후회하고 Deno를 만들었다.

Node.js에서 후회한 점

후회 포인트	설명
`node_modules`	너무 복잡해짐
`package.json`	불필요하다고 생각
보안	기본 보안 모델 부재
TypeScript	처음부터 지원하지 않은 것

Deno의 장점

장점	설명
TypeScript 기본 지원	별도 설정 불필요
보안	파일/네트워크 접근 권한 명시적
URL import	npm 없이 모듈 사용
웹 표준	fetch, WebSocket 등 기본 내장

Deno 생태계 전망

Node.js의 방대한 생태계(npm 패키지 200만개+)를 대체하기는 현실적으로 어렵다.
Deno 2.0에서 npm 호환성을 추가하는 방향으로 가고 있으나, 틈새시장 유지 수준에 그칠 가능성이 높다.

10. Bun - 차세대 JS 런타임

Deno보다 오히려 Bun이 더 주목받고 있다.

Node.js vs Deno vs Bun 비교

	Node.js	Deno	Bun
엔진	V8 (구글)	V8 (구글)	JavaScriptCore (애플)
작성 언어	C++	Rust	Zig
속도	기준	비슷	2~4배 빠름
npm 호환	✅	△	✅
TypeScript	❌ 별도 설정	✅	✅
패키지 매니저	npm	내장	내장 (초고속)

Bun이 빠른 이유

Node.js = V8 엔진 (Chrome용, 장시간 실행 최적화)
Bun     = JavaScriptCore (Safari용, 시작 속도 최적화)
        + Zig (C보다 빠른 저수준 언어)

상황	승자
시작 속도 (cold start)	JavaScriptCore (Bun) ✅
장시간 실행 (JIT 최적화)	V8 (Node.js) ✅

패키지 설치 속도 비교

npm install   # 10초
bun install   # 1초 이하

Bun은 올인원 툴킷

Bun 하나로
├── 런타임      (node 대체)
├── 패키지 매니저 (npm 대체)
├── 번들러      (webpack/vite 대체)
└── 테스트 러너  (jest 대체)

JavaScriptCore도 오픈소스

Bun이 사용하는 JavaScriptCore는 애플의 WebKit 프로젝트의 일부로 오픈소스다.

WebKit (애플 오픈소스 프로젝트)
├── WebCore (HTML/CSS 렌더링)
└── JavaScriptCore (JS 엔진)

정리

npm create vue@latest = create-vue 패키지로 Vue 3 + Vite 프로젝트 생성

npm, npx 모두 node.exe 위에서 동작하는 JS 프로그램

Node.js 내부 엔진 V8은 구글이 만들고 관리

Node.js 창시자 Ryan Dahl은 Deno를 만들었지만 생태계 장벽이 높음

Bun은 JavaScriptCore + Zig로 압도적인 속도를 자랑하는 차세대 런타임

Vue3

Vue 프로젝트 생성부터 Node.js 생태계까지 한번에 정리

Vue Router children으로 중첩 라우트 완벽 정리

Vue 3 ref의 .value — 템플릿 vs 스크립트 접근 방식 차이

Vue 3 Computed 완벽 정리