💻 윈도우 개발 환경 구축 가이드 - 완전 초보자용

Vue.js 태양계 프로젝트를 시작하기 위한 윈도우 개발 환경 구축 완벽 가이드입니다.

📋 목차

준비물 확인
Node.js 설치
VS Code 설치
VS Code 한글 설정
VS Code 확장 프로그램
터미널 기초
첫 Vue 프로젝트 만들기
문제 해결

1. 준비물 확인

1-1. 시스템 요구사항

최소 사양:

Windows 10 이상
RAM 4GB 이상 (8GB 권장)
디스크 여유 공간 5GB 이상
인터넷 연결

확인 방법:

Windows 키 + I → 시스템 → 정보
Windows 버전 확인

1-2. 설치할 프로그램

✅ Node.js (JavaScript 실행 환경 + npm)
✅ VS Code (코드 에디터)
✅ Git (선택사항, 버전 관리)

소요 시간: 약 30-40분

2. Node.js 설치

2-1. Node.js란?

Node.js

JavaScript를 컴퓨터에서 실행할 수 있게 해주는 프로그램
npm(Node Package Manager)이 함께 설치됨
Vue.js 개발에 필수!

비유:

Node.js = 자동차 엔진
npm = 부품 상점 (필요한 라이브러리를 다운로드)

2-2. 다운로드

Step 1: 공식 웹사이트 접속

https://nodejs.org/ko

주소창에 정확히 입력하세요!

Step 2: 버전 선택

화면에 2개 버튼이 보입니다:

┌──────────────────────────┐
│  20.x.x LTS              │  ← 이것 선택! ⭐
│  (추천)                  │
└──────────────────────────┘

┌──────────────────────────┐
│  21.x.x Current          │  ← 이것은 선택 X
│  (최신 기능)             │
└──────────────────────────┘

⭐ LTS (Long Term Support) 버전을 클릭하세요!

안정적이고 오래 지원됨
초보자에게 적합

Step 3: 파일 다운로드 대기

파일명: node-v20.x.x-x64.msi (약 30MB)
다운로드 폴더에 저장됨
5-10초 소요

2-3. 설치

Step 1: 설치 파일 실행

다운로드 폴더 열기
node-v20.x.x-x64.msi 파일 더블클릭
보안 경고 나오면 "실행" 클릭

Step 2: 설치 마법사 진행

화면 1: Welcome

┌────────────────────────────────┐
│ Welcome to the Node.js Setup   │
│                                │
│ [Next >]                       │
└────────────────────────────────┘

→ "Next" 클릭

화면 2: License Agreement (라이선스 동의)

┌────────────────────────────────┐
│ ☑ I accept the terms...        │
│                                │
│ [Next >]                       │
└────────────────────────────────┘

→ 체크박스 선택 후 "Next" 클릭

화면 3: Destination Folder (설치 위치)

┌────────────────────────────────┐
│ C:\Program Files\nodejs\       │
│                                │
│ [Next >]                       │
└────────────────────────────────┘

→ 그대로 두고 "Next" 클릭 (변경하지 마세요!)

화면 4: Custom Setup (구성 요소 선택)

┌────────────────────────────────┐
│ ☑ Node.js runtime              │
│ ☑ npm package manager          │
│ ☑ Add to PATH                  │
│                                │
│ [Next >]                       │
└────────────────────────────────┘

→ 모두 체크된 상태로 "Next" 클릭

⚠️ 중요: "Add to PATH"가 체크되어 있어야 합니다!

화면 5: Tools for Native Modules (선택사항)

┌────────────────────────────────┐
│ ☐ Automatically install...     │
│                                │
│ [Next >]                       │
└────────────────────────────────┘

→ 체크하지 말고 "Next" 클릭 (초보자는 불필요)

화면 6: Ready to Install

┌────────────────────────────────┐
│ Ready to install Node.js       │
│                                │
│ [Install]                      │
└────────────────────────────────┘

→ "Install" 클릭

화면 7: Installing...

┌────────────────────────────────┐
│ Installing Node.js...          │
│ ▓▓▓▓▓▓▓▓░░░░░░░░ 50%          │
└────────────────────────────────┘

→ 2-3분 대기 (커피 한 모금 ☕)

화면 8: Completed

┌────────────────────────────────┐
│ Installation Complete!         │
│                                │
│ [Finish]                       │
└────────────────────────────────┘

→ "Finish" 클릭

2-4. 설치 확인

Step 1: 명령 프롬프트 열기

방법 1: 검색

Windows 키 누르기
"cmd" 입력
"명령 프롬프트" 클릭

방법 2: 단축키

Windows 키 + R
"cmd" 입력
Enter 키

Step 2: 버전 확인

검은 화면(명령 프롬프트)이 나타나면:

node --version

입력 후 Enter 키!

✅ 성공한 경우:

v20.11.0

(숫자는 다를 수 있음)

❌ 실패한 경우:

'node'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램...

해결 방법:

명령 프롬프트 닫기
컴퓨터 재시작
다시 확인

그래도 안 되면? → 8. 문제 해결 참고

Step 3: npm 확인

npm --version

✅ 성공한 경우:

10.2.4

2-5. 체크포인트 ✅

✅ Node.js가 설치되었다
✅ node --version 명령어가 작동한다
✅ npm --version 명령어가 작동한다

모두 체크되었나요? 다음 단계로! 🎉

3. VS Code 설치

3-1. VS Code란?

Visual Studio Code (VS Code)

코드를 작성하는 프로그램 (에디터)
무료!
가장 인기 있는 코드 에디터
확장 프로그램으로 기능 추가 가능

비유:

메모장 = 일반 공책
VS Code = 스마트 공책 (오타 체크, 자동 완성 등)

3-2. 다운로드

Step 1: 공식 웹사이트 접속

https://code.visualstudio.com

Step 2: 다운로드 버튼 클릭

큰 파란 버튼이 보입니다:

┌──────────────────────────┐
│  Download for Windows    │
└──────────────────────────┘

클릭!

파일명: VSCodeUserSetup-x64-1.xx.x.exe (약 90MB)
다운로드 폴더에 저장
20-30초 소요

3-3. 설치

Step 1: 설치 파일 실행

다운로드 폴더 열기
VSCodeUserSetup-x64-1.xx.x.exe 더블클릭
보안 경고 → "실행" 클릭

Step 2: 설치 마법사 진행

화면 1: 사용권 계약 동의

┌────────────────────────────────┐
│ ◉ 동의합니다                   │
│                                │
│ [다음 >]                       │
└────────────────────────────────┘

→ "동의합니다" 선택 후 "다음" 클릭

화면 2: 설치 위치

┌────────────────────────────────┐
│ C:\Users\사용자이름\AppData\..│
│                                │
│ [다음 >]                       │
└────────────────────────────────┘

→ 그대로 두고 "다음" 클릭

화면 3: 시작 메뉴 폴더

┌────────────────────────────────┐
│ Visual Studio Code             │
│                                │
│ [다음 >]                       │
└────────────────────────────────┘

→ 그대로 두고 "다음" 클릭

화면 4: 추가 작업 선택 ⭐ 중요!

┌────────────────────────────────┐
│ ☑ 바탕 화면에 아이콘 만들기    │
│ ☑ PATH에 추가                  │
│ ☑ 지원되는 파일 형식의...      │
│ ☑ Code(으)로 열기 작업을...    │
│                                │
│ [다음 >]                       │
└────────────────────────────────┘

⭐ 다음 항목들을 체크하세요:

☑ 바탕 화면에 아이콘 만들기
☑ PATH에 추가 (중요!)
☑ Code(으)로 열기 작업을 Windows 탐색기 파일의 상황에 맞는 메뉴에 추가
☑ Code(으)로 열기 작업을 Windows 탐색기 디렉터리의 상황에 맞는 메뉴에 추가

→ "다음" 클릭

화면 5: 설치 준비 완료

┌────────────────────────────────┐
│ 설치 준비 완료                 │
│                                │
│ [설치]                         │
└────────────────────────────────┘

→ "설치" 클릭

화면 6: 설치 중...

┌────────────────────────────────┐
│ 설치하는 중...                 │
│ ▓▓▓▓▓▓▓▓░░░░░░░░ 50%          │
└────────────────────────────────┘

→ 1-2분 대기

화면 7: 설치 완료

┌────────────────────────────────┐
│ ☑ Visual Studio Code 실행      │
│                                │
│ [마침]                         │
└────────────────────────────────┘

→ 체크 유지하고 "마침" 클릭

VS Code가 자동으로 실행됩니다!

3-4. 첫 실행

VS Code가 실행되면:

┌─────────────────────────────────────────┐
│  File  Edit  Selection  View  Go  ...  │
├─────────────────────────────────────────┤
│                                         │
│         Welcome                         │
│                                         │
│   Start                                 │
│   - New File                            │
│   - Open Folder                         │
│                                         │
│   Recent                                │
│   (없음)                                │
│                                         │
└─────────────────────────────────────────┘

축하합니다! VS Code가 설치되었습니다! 🎉

3-5. 체크포인트 ✅

✅ VS Code가 설치되었다
✅ VS Code가 실행된다
✅ 바탕화면에 아이콘이 있다

4. VS Code 한글 설정

4-1. 한국어 팩 설치

VS Code는 기본적으로 영어입니다. 한글로 바꿔봅시다!

Step 1: Extensions 열기

방법 1: 아이콘 클릭

왼쪽 사이드바에서 네모 4개 아이콘 클릭
(Extensions)

방법 2: 단축키

Ctrl + Shift + X

Step 2: 한국어 검색

Extensions 창에서:

검색창에 "korean" 입력
"Korean Language Pack for Visual Studio Code" 찾기
"Install" 버튼 클릭

┌────────────────────────────────┐
│ Korean Language Pack for VS... │
│ Microsoft                      │
│ [Install]                      │
└────────────────────────────────┘

Step 3: 재시작

오른쪽 아래에 팝업이 나타납니다:

┌────────────────────────────────┐
│ Restart to enable Korean?      │
│                                │
│ [Restart]        [Not Now]     │
└────────────────────────────────┘

→ "Restart" 클릭

Step 4: 확인

VS Code가 재시작되면 한글로 바뀝니다!

┌─────────────────────────────────────────┐
│  파일  편집  선택  보기  이동  ...       │
├─────────────────────────────────────────┤
│                                         │
│         시작                            │
│                                         │
└─────────────────────────────────────────┘

성공! 🎉

4-2. 체크포인트 ✅

✅ VS Code 메뉴가 한글로 표시된다

5. VS Code 확장 프로그램

5-1. 필수 확장 프로그램

Vue.js 개발에 필요한 확장 프로그램을 설치합니다.

5-2. Vue 확장 프로그램 설치

1. Vue - Official (Volar) ⭐ 가장 중요!

설치 방법:

Ctrl + Shift + X (Extensions 열기)
검색: "Vue - Official"
만든 사람: Vue
"설치" 클릭

기능:

.vue 파일 문법 강조
자동 완성
오류 체크

2. ESLint (선택사항)

설치 방법:

검색: "ESLint"
만든 사람: Microsoft
"설치" 클릭

기능:

코드 오류 체크
코딩 스타일 통일

3. Prettier (선택사항)

설치 방법:

검색: "Prettier - Code formatter"
만든 사람: Prettier
"설치" 클릭

기능:

코드 자동 정렬
저장할 때 자동 포맷팅

5-3. 유용한 확장 프로그램 (선택)

4. Auto Rename Tag

기능: HTML 태그 자동 수정

<div>  →  <p>
</div> →  </p>  (자동!)

5. Bracket Pair Colorizer 2

기능: 괄호 색상 표시

function() {
  if (true) {    ← 빨강
    return []    ← 파랑
  }               ← 빨강
}                 ← 기본

6. Material Icon Theme

기능: 파일 아이콘 예쁘게

.vue 파일 → 초록 아이콘
.js 파일 → 노랑 아이콘
.css 파일 → 파랑 아이콘

5-4. 설치된 확장 프로그램 확인

Ctrl + Shift + X
왼쪽 위 "설치됨" 클릭
목록 확인

최소한 있어야 할 것:

✅ Korean Language Pack
✅ Vue - Official

5-5. 체크포인트 ✅

✅ Vue - Official 확장 프로그램이 설치되었다
✅ (선택) ESLint가 설치되었다
✅ (선택) Prettier가 설치되었다

6. 터미널 기초

6-1. 터미널이란?

터미널 (Terminal)

명령어를 입력하는 검은 화면
마우스 대신 키보드로 작업
"명령 프롬프트", "CMD", "PowerShell"이라고도 함

비유:

GUI (그래픽) = 식당 메뉴판 (사진 보고 선택)
터미널 = 주방에 직접 주문 (말로 주문)

6-2. VS Code에서 터미널 열기

방법 1: 메뉴

상단 메뉴 → 터미널 → 새 터미널

방법 2: 단축키 (추천!)

Ctrl + `
(백틱, ESC 아래 키)

방법 3: 아이콘

하단 패널에서 터미널 아이콘 클릭

6-3. 터미널 화면

┌─────────────────────────────────────────┐
│  파일  편집  선택  보기  터미널  ...     │
├─────────────────────────────────────────┤
│                                         │
│  (코드 작성 영역)                        │
│                                         │
├─────────────────────────────────────────┤
│  터미널                                 │
│  PS C:\Users\사용자이름>               │
│  ▋                                      │
└─────────────────────────────────────────┘

깜박이는 커서가 보이면 준비 완료!

6-4. 기본 명령어

현재 폴더 확인

pwd

결과:

C:\Users\사용자이름

폴더 내용 보기

dir

결과:

2024-01-15  오후 02:30    <DIR>          Documents
2024-01-15  오후 02:30    <DIR>          Downloads
...

폴더 이동

cd Documents

의미: Documents 폴더로 이동

상위 폴더로 이동

cd ..

의미: 한 단계 위로

폴더 만들기

mkdir my-project

의미: "my-project"라는 폴더 생성

6-5. 터미널 단축키

단축키	기능
`↑` (위 화살표)	이전 명령어
`↓` (아래 화살표)	다음 명령어
`Tab`	자동 완성
`Ctrl + C`	실행 중단
`Ctrl + L`	화면 지우기

6-6. 체크포인트 ✅

✅ VS Code에서 터미널을 열 수 있다
✅ pwd 명령어를 사용할 수 있다
✅ cd 명령어로 폴더를 이동할 수 있다

7. 첫 Vue 프로젝트 만들기

7-1. 프로젝트 폴더 만들기

Step 1: 바탕화면에 폴더 만들기

방법 1: 윈도우 탐색기

바탕화면에서 오른쪽 클릭
"새로 만들기" → "폴더"
이름: "vue-projects"

방법 2: 터미널

cd Desktop
mkdir vue-projects

Step 2: VS Code에서 폴더 열기

방법 1: 메뉴

VS Code 열기
파일 → 폴더 열기
"vue-projects" 선택
"폴더 선택" 클릭

방법 2: 단축키

Ctrl + K 누른 후 Ctrl + O
폴더 선택

방법 3: 터미널

cd Desktop\vue-projects
code .

7-2. Vue 프로젝트 생성

Step 1: 터미널 열기

VS Code에서:

Ctrl + `

Step 2: Vue 프로젝트 생성 명령어

터미널에 입력:

npm create vue@latest

Enter 키!

Step 3: 프로젝트 설정

여러 질문이 나옵니다. 천천히 답변하세요!

질문 1: Project name (프로젝트 이름)

✔ Project name: › my-first-vue-app

→ "my-first-vue-app" 입력 (또는 원하는 이름) → Enter

⚠️ 주의:

공백 없이
소문자 사용
하이픈(-) 사용 가능

질문 2: TypeScript?

✔ Add TypeScript? › No / Yes

→ N 입력 (또는 그냥 Enter) → 초보자는 No!

질문 3: JSX Support?

✔ Add JSX Support? › No / Yes

→ Enter (기본값 No)

질문 4: Vue Router?

✔ Add Vue Router for Single Page Application development? › No / Yes

→ Enter (기본값 No) → 나중에 배울 것

질문 5: Pinia?

✔ Add Pinia for state management? › No / Yes

→ Enter (기본값 No)

질문 6: Vitest?

✔ Add Vitest for Unit Testing? › No / Yes

→ Enter (기본값 No)

질문 7: E2E Testing?

✔ Add an End-to-End Testing Solution? › No

→ Enter (기본값 No)

질문 8: ESLint?

✔ Add ESLint for code quality? › No / Yes

→ Enter (기본값 No) → 초보자는 불필요

질문 9: Prettier?

✔ Add Prettier for code formatting? › No / Yes

→ Enter (기본값 No)

Step 4: 프로젝트 생성 대기

Scaffolding project in C:\Users\...\my-first-vue-app...

Done. Now run:

  cd my-first-vue-app
  npm install
  npm run dev

생성 완료! 🎉

7-3. 프로젝트 실행

Step 1: 프로젝트 폴더로 이동

터미널에 입력:

cd my-first-vue-app

Step 2: 패키지 설치

npm install

설명:

프로젝트에 필요한 라이브러리 설치
처음에만 실행
2-3분 소요

진행 상황:

npm WARN deprecated ...
added 123 packages in 45s

대기하세요!

Step 3: 개발 서버 실행

npm run dev

결과:

  VITE v5.0.8  ready in 523 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

성공! 서버가 실행되었습니다!

7-4. 브라우저에서 확인

Step 1: 브라우저 열기

터미널에 표시된 주소를 클릭:

http://localhost:5173/

또는:

웹 브라우저(Chrome, Edge 등) 열기
주소창에 입력: localhost:5173
Enter

Step 2: 화면 확인

Vue 기본 화면이 보입니다:

┌──────────────────────────────┐
│                              │
│        You did it!           │
│                              │
│     [Vue 로고]               │
│                              │
│     + Vite                   │
│                              │
└──────────────────────────────┘

축하합니다! 첫 Vue 프로젝트가 실행되었습니다! 🎉🎊

7-5. 코드 수정해보기

Step 1: 파일 열기

VS Code 왼쪽 사이드바:

my-first-vue-app
├── node_modules
├── public
├── src
│   ├── assets
│   ├── components
│   ├── App.vue       ← 이 파일 열기!
│   └── main.js
├── package.json
└── ...

src/App.vue 파일 클릭

Step 2: 텍스트 변경

파일에서 "You did it!" 텍스트를 찾아서:

<h1>You did it!</h1>

다음과 같이 변경:

<h1>안녕하세요! 내 첫 Vue 앱!</h1>

Ctrl + S (저장)

Step 3: 브라우저 확인

브라우저가 자동으로 새로고침 됩니다!

변경된 텍스트가 보이나요?

안녕하세요! 내 첫 Vue 앱!

성공! 🎉

7-6. 서버 종료

작업이 끝나면:

터미널에서:

Ctrl + C

확인 메시지:

Terminate batch job (Y/N)?

→ Y 입력 → Enter

서버가 종료됩니다.

7-7. 체크포인트 ✅

✅ Vue 프로젝트를 생성했다
✅ npm install이 완료되었다
✅ npm run dev로 서버를 실행했다
✅ 브라우저에서 앱이 보인다
✅ 코드를 수정하고 결과를 확인했다

모두 체크되었다면, 개발 환경 구축 완료! 🎊

8. 문제 해결

8-1. Node.js 설치 문제

문제: node 명령어를 찾을 수 없음

증상:

'node'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램이 아닙니다.

해결 방법 1: 재시작

모든 명령 프롬프트/터미널 닫기
컴퓨터 재시작
다시 시도

해결 방법 2: PATH 확인

Windows 키 + R
"sysdm.cpl" 입력 → Enter
"고급" 탭 → "환경 변수"
"시스템 변수"에서 "Path" 찾기
더블클릭
다음 경로가 있는지 확인:
```
C:\Program Files\nodejs\
```
없으면 "새로 만들기"로 추가
확인 → 확인 → 재시작

해결 방법 3: 재설치

설정 → 앱 → "Node.js" 찾기
"제거" 클릭
Node.js 다시 설치
설치 시 "Add to PATH" 꼭 체크!

8-2. npm install 오류

문제 1: 권한 오류

증상:

Error: EPERM: operation not permitted

해결 방법:

VS Code를 관리자 권한으로 실행
- VS Code 아이콘 우클릭
- "관리자 권한으로 실행"
다시 npm install

문제 2: 네트워크 오류

증상:

network timeout

해결 방법:

인터넷 연결 확인
잠시 후 다시 시도
또는 npm 캐시 삭제:
```
npm cache clean --force
npm install
```

8-3. npm run dev 오류

문제 1: 포트가 이미 사용 중

증상:

Port 5173 is already in use

해결 방법 1: 다른 서버 종료

실행 중인 다른 터미널 찾기
Ctrl + C로 종료

해결 방법 2: 포트 변경

npm run dev -- --port 3000

문제 2: 패키지가 없음

증상:

Cannot find module 'vite'

해결 방법:

npm install

다시 실행:

npm run dev

8-4. VS Code 한글이 안 됨

해결 방법:

Ctrl + Shift + P
"Configure Display Language" 입력
"ko" 선택
VS Code 재시작

또는:

Extensions에서 "Korean Language Pack" 재설치
VS Code 재시작

8-5. 브라우저에 아무것도 안 보임

체크리스트:

서버가 실행 중인가?
```
npm run dev
```
올바른 주소인가?
```
http://localhost:5173/
```
(포트 번호 확인!)
방화벽 차단?
- Windows Defender 방화벽 → 앱 허용
- "Node.js" 체크
브라우저 캐시 삭제
- Ctrl + Shift + R (강력 새로고침)

8-6. 파일 저장이 안 됨

해결 방법:

읽기 전용 확인
- 파일 우클릭 → 속성
- "읽기 전용" 체크 해제
관리자 권한
- VS Code를 관리자 권한으로 실행
다른 프로그램에서 열려있음
- 다른 에디터 닫기

8-7. Git 오류 (선택사항)

증상:

git is not recognized

해결 방법:

Git 설치: https://git-scm.com
설치 시 "Git from the command line" 선택
VS Code 재시작

참고: Git이 없어도 Vue 개발은 가능합니다!

9. 추가 설정 (선택사항)

9-1. VS Code 설정 최적화

Step 1: 설정 열기

Ctrl + ,

Step 2: 유용한 설정

자동 저장:

Files: Auto Save → afterDelay

탭 크기:

Editor: Tab Size → 2

포맷팅:

Editor: Format On Save → ✓

9-2. 터미널 설정

PowerShell로 변경 (추천)

터미널 우측 상단 "+" 옆 "v" 클릭
"기본 프로필 선택"
"PowerShell" 선택

PowerShell이 더 예쁘고 기능이 많습니다!

9-3. 테마 변경

Step 1: 테마 선택

Ctrl + K, Ctrl + T

Step 2: 마음에 드는 테마 선택

추천 테마:

Dark+ (기본, 눈에 편함)
Light+ (밝음)
Monokai (인기)
Dracula (보라빛)

10. 다음 단계

10-1. 개발 환경 완성! 🎉

축하합니다! 이제 준비가 완료되었습니다:

✅ Node.js 설치
✅ VS Code 설치
✅ Vue 개발 환경 구축
✅ 첫 프로젝트 실행

10-2. 이제 무엇을?

태양계 프로젝트 시작!

기초학습_1_HTML_CSS.md 읽기
기초학습_2_JavaScript.md 읽기
기초학습_3_Vue.js.md 읽기
기초학습_5_Three.js.md 읽기
Vue_태양계_프로젝트_실행_매뉴얼.md 따라하기

11. 유용한 단축키 정리

11-1. VS Code 필수 단축키

단축키	기능
`Ctrl + S`	저장
`Ctrl + Z`	실행 취소
`Ctrl + Shift + Z`	다시 실행
`Ctrl + F`	찾기
`Ctrl + H`	찾아 바꾸기
`Ctrl + /`	주석 토글
`Ctrl + ``	터미널 열기
`Ctrl + P`	파일 빠르게 열기
`Alt + ↑/↓`	줄 이동
`Shift + Alt + ↓`	줄 복사

11-2. 터미널 필수 명령어

명령어	기능
`npm install`	패키지 설치
`npm run dev`	개발 서버 실행
`Ctrl + C`	서버 종료
`cd 폴더명`	폴더 이동
`cd ..`	상위 폴더
`dir`	파일 목록
`cls`	화면 지우기

12. 마무리

12-1. 최종 체크리스트

✅ Node.js 설치 완료
✅ npm 명령어 작동
✅ VS Code 설치 완료
✅ VS Code 한글 설정
✅ Vue 확장 프로그램 설치
✅ 첫 Vue 프로젝트 생성
✅ 프로젝트 실행 성공
✅ 코드 수정 및 확인

모두 체크되었나요? 완벽합니다! 🎊

12-2. 학습 팁

1. 하루에 조금씩

한 번에 다 하려고 하지 마세요!
하루 1-2시간씩 꾸준히!

2. 오류를 두려워하지 마세요

오류 = 배움의 기회
오류 메시지를 읽는 습관
구글에 오류 메시지 검색

3. 실험하세요

코드를 바꿔보세요
망가뜨려보세요
다시 고쳐보세요
→ 그게 배움입니다!

4. 저장하는 습관

Ctrl + S
Ctrl + S
Ctrl + S
→ 자주 저장!

12-3. 도움받기

막혔을 때:

오류 메시지 읽기
- 무엇이 문제인지 설명
구글 검색
- 오류 메시지 복사
- 검색!
이 문서 참고
- 8. 문제 해결
커뮤니티 질문
- Vue.js 한국 사용자 모임
- Stack Overflow

12-4. 다음 학습 자료

기초 학습 완료 후:

Vue 공식 문서: https://ko.vuejs.org
Three.js 예제: https://threejs.org/examples
MDN Web Docs: https://developer.mozilla.org/ko

🎉 축하합니다!

개발 환경 구축을 완료했습니다!

당신은 이제:

✅ Node.js와 npm을 사용할 수 있습니다
✅ VS Code로 코딩할 수 있습니다
✅ Vue 프로젝트를 만들 수 있습니다
✅ 웹 개발자의 첫 걸음을 뗐습니다!

이제 태양계 프로젝트를 만들어봅시다! 🚀🌟

만든 날짜: 2025년 10월 대상: 프로그래밍 완전 초보자 소요 시간: 30-60분 다음 단계: 기초 학습 자료 읽기

행운을 빕니다! 💪

Name		Name	Last commit message	Last commit date
Latest commit History 4 Commits
README.md		README.md
Vue_Router_다중페이지_가이드.md		Vue_Router_다중페이지_가이드.md
Vue_Router_멀티페이지_생성예제.pdf		Vue_Router_멀티페이지_생성예제.pdf
기초학습_1_HTML_CSS.md		기초학습_1_HTML_CSS.md
기초학습_2_JavaScript.md		기초학습_2_JavaScript.md
기초학습_3_Vue.js.md		기초학습_3_Vue.js.md
기초학습_4_통합_학습_가이드.md		기초학습_4_통합_학습_가이드.md

rexo-dev/sva_vue_tutorial

Folders and files

Latest commit

History

Repository files navigation

💻 윈도우 개발 환경 구축 가이드 - 완전 초보자용

📋 목차

1. 준비물 확인

1-1. 시스템 요구사항

1-2. 설치할 프로그램

2. Node.js 설치

2-1. Node.js란?

2-2. 다운로드

Step 1: 공식 웹사이트 접속

Step 2: 버전 선택

Step 3: 파일 다운로드 대기

2-3. 설치

Step 1: 설치 파일 실행

Step 2: 설치 마법사 진행

2-4. 설치 확인

Step 1: 명령 프롬프트 열기

Step 2: 버전 확인

Step 3: npm 확인

2-5. 체크포인트 ✅

3. VS Code 설치

3-1. VS Code란?

3-2. 다운로드

Step 1: 공식 웹사이트 접속

Step 2: 다운로드 버튼 클릭

3-3. 설치

Step 1: 설치 파일 실행

Step 2: 설치 마법사 진행

3-4. 첫 실행

3-5. 체크포인트 ✅

4. VS Code 한글 설정

4-1. 한국어 팩 설치

Step 1: Extensions 열기

Step 2: 한국어 검색

Step 3: 재시작

Step 4: 확인

4-2. 체크포인트 ✅

5. VS Code 확장 프로그램

5-1. 필수 확장 프로그램

5-2. Vue 확장 프로그램 설치

1. Vue - Official (Volar) ⭐ 가장 중요!

2. ESLint (선택사항)

3. Prettier (선택사항)

5-3. 유용한 확장 프로그램 (선택)

4. Auto Rename Tag

5. Bracket Pair Colorizer 2

6. Material Icon Theme

5-4. 설치된 확장 프로그램 확인

5-5. 체크포인트 ✅

6. 터미널 기초

6-1. 터미널이란?

6-2. VS Code에서 터미널 열기

6-3. 터미널 화면

6-4. 기본 명령어

현재 폴더 확인

폴더 내용 보기

폴더 이동

상위 폴더로 이동

폴더 만들기

6-5. 터미널 단축키

6-6. 체크포인트 ✅

7. 첫 Vue 프로젝트 만들기

7-1. 프로젝트 폴더 만들기

Step 1: 바탕화면에 폴더 만들기

Step 2: VS Code에서 폴더 열기

7-2. Vue 프로젝트 생성

Step 1: 터미널 열기

Step 2: Vue 프로젝트 생성 명령어

Step 3: 프로젝트 설정

Step 4: 프로젝트 생성 대기

7-3. 프로젝트 실행

Step 1: 프로젝트 폴더로 이동

Step 2: 패키지 설치

Step 3: 개발 서버 실행

7-4. 브라우저에서 확인

Step 1: 브라우저 열기

Packages