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로 압도적인 속도를 자랑하는 차세대 런타임