프로젝트 세팅 (Vite)

Vue를 배우려면 먼저 코드를 실행할 환경이 필요합니다. 이번 강의에서는 Node.js를 설치하고, Vite 로 Vue 프로젝트를 만들어 개발 서버를 띄우는 것까지 처음부터 끝까지 따라 해 봅니다. 한 번만 해 두면 다음 강의부터는 바로 SFC 작성에 집중할 수 있어요.

학습 목표

• Node.js와 npm이 무엇이고 왜 필요한지 안다.
• npm create vue 로 Vue 프로젝트를 생성할 수 있다.
• 개발 서버(npm run dev)를 실행해 브라우저에서 결과를 확인할 수 있다.
• 프로젝트 폴더 구조에서 어떤 파일이 무슨 역할을 하는지 파악한다.

1. Node.js 설치

Vue 도구들은 Node.js 위에서 동작합니다. Node를 깔면 패키지 관리자 npm 도 함께 설치돼요.

1. nodejs.org 에서 LTS 버전을 받아 설치합니다.
2. 터미널을 열고 설치가 됐는지 확인합니다.

node -v   # v20.x 처럼 버전이 찍히면 성공
npm -v    # 10.x 처럼 버전이 찍히면 성공

💡 TIP — LTS(Long Term Support)는 가장 안정적인 버전입니다. 특별한 이유가 없으면 LTS를 쓰세요. 버전이 안 찍히면 터미널을 껐다 켜거나 컴퓨터를 재시작해 보세요.

2. 프로젝트 만들기 — create-vue

Vue 공식 도구인 create-vue(내부적으로 Vite를 씁니다)로 프로젝트를 만듭니다. 아래 한 줄이면 됩니다.

npm create vue@latest

실행하면 프로젝트 이름과 함께 몇 가지 옵션을 물어봅니다. 처음에는 대부분 No 로 두고, 아래만 신경 쓰면 됩니다.

✔ Project name: … my-app
✔ Add TypeScript? … No          # 이 강좌는 JS 기준
✔ Add Vue Router? … No          # 라우팅은 나중에
✔ Add Pinia? … No               # 상태관리도 나중에
✔ Add ESLint? … Yes             # 코드 검사는 켜 두면 좋음

💡 TIP — 잘 모르겠으면 일단 다 No(ESLint만 Yes)로 진행하세요. Router·Pinia는 나중에 강의에서 직접 추가하는 법을 배웁니다. 화살표 키로 옮기고 Enter로 선택합니다.

생성이 끝나면 안내대로 폴더로 들어가 패키지를 설치합니다.

cd my-app
npm install      # package.json에 적힌 라이브러리들을 내려받음

npm install 은 node_modules 폴더에 Vue를 포함한 의존성들을 내려받습니다. 이 폴더는 용량이 크고 다시 만들 수 있으므로 보통 .gitignore 로 git 추적에서 제외합니다.

3. 개발 서버 실행

npm run dev

실행하면 터미널에 다음과 비슷한 주소가 뜹니다.

  VITE v5.x  ready in 320 ms

  ➜  Local:   http://localhost:5173/

브라우저에서 http://localhost:5173 을 열면 Vue 기본 환영 화면이 보입니다. 코드를 저장하면 새로고침 없이 화면이 즉시 바뀌는데, 이걸 HMR(Hot Module Replacement) 이라고 합니다.

⚠️ 주의 — 개발 서버는 켜 둔 채로 작업합니다. 끄려면 터미널에서 Ctrl + C 를 누르세요.

4. 폴더 구조 살펴보기

생성된 프로젝트의 핵심 파일은 다음과 같습니다.

my-app/
├── index.html          # 앱이 끼워지는 단 하나의 HTML
├── package.json        # 프로젝트 정보·스크립트·의존성 목록
├── vite.config.js      # Vite 설정
└── src/
    ├── main.js         # 진입점: Vue 앱을 #app에 연결
    ├── App.vue         # 최상위 컴포넌트(SFC)
    ├── components/     # 컴포넌트들을 모아 두는 폴더
    └── assets/         # 전역 스타일·이미지

진입점인 src/main.js 는 대략 이렇게 생겼습니다.

import { createApp } from 'vue';
import App from './App.vue';
import './assets/main.css';

createApp(App).mount('#app');

• App.vue 를 가져와 createApp 으로 앱을 만들고, index.html 의 #app 요소에 mount 합니다.
• App.vue 안에 우리가 만들 컴포넌트들이 차곡차곡 들어가게 됩니다.

5. 첫 화면 바꿔 보기

src/App.vue 를 열어 내용을 통째로 아래로 바꿔 봅시다.

<script setup>
const message = '안녕하세요, Vue!';
</script>

<template>
  <h1>{{ message }}</h1>
</template>

저장하면 브라우저 화면이 곧바로 "안녕하세요, Vue!" 로 바뀝니다. 이게 바로 다음 강의에서 배울 SFC(Single File Component) 입니다. 세팅은 여기까지면 충분해요.

요약

• Vue 개발에는 Node.js(+ npm)가 필요하다. LTS 버전을 설치한다.
• npm create vue@latest 로 프로젝트를 만들고, 옵션은 처음엔 대부분 No로 둔다.
• npm install 로 의존성을 받고, npm run dev 로 개발 서버를 띄운다.
• index.html(빈 #app) → src/main.js(마운트) → src/App.vue(최상위 SFC) 순으로 연결된다.
• 보통 src/App.vue 부터 작업을 시작한다.

연습문제

1. 터미널에서 Node와 npm 버전을 확인하는 명령을 각각 쓰세요.
2. Vue 공식 도구로 새 프로젝트를 만드는 명령 한 줄을 쓰세요.
3. npm install 이 만드는 폴더 이름은 무엇이며, 왜 보통 git에서 제외하나요?
4. 브라우저가 실제로 처음 읽어들이는 HTML 파일은 무엇이고, Vue는 그 안 어디에 그려지나요?

힌트 — 4번은 index.html 안의 id="app" 요소와 main.js 의 mount('#app') 를 떠올려 보세요.