🧩 Vue 2로 배우는 프론트엔드 기초

🎯 학습 목표

• Vue 2의 주요 버전 흐름과 2.6.14를 선택한 이유를 이해한다.
• Vue CLI를 이용해 Vue 2.6.14 프로젝트를 생성하고 실행할 수 있다.

🔍 Vue 2의 역사와 2.6.14 선택 이유

Vue는 Evan You가 만든 오픈소스 프레임워크로, 2014년에 첫 공개되었습니다.

Vue 2는 2016년 정식 출시 이후 많은 개선이 있었고, 그 중 가장 안정적인 장기 지원 버전이 2.6.14입니다.

🔧 Vue 3는 완전히 다른 구조와 문법(Composition API 등)을 가지고 있어, 기존 Vue 2 앱을 유지하거나 실무에서 마이그레이션을 고려 중인 경우 2.6.14를 사용하는 것이 적합합니다.

✅ 개발 환경 세팅 (Vue CLI 기반)

1️⃣ Node.js 설치

• 공식 사이트에서 Node.js LTS 버전 설치

  👉 https://nodejs.org/ko

2️⃣ Vue CLI 설치

npm install -g @vue/cli

설치 완료 후 확인:

vue --version

@vue/cli 5.0.8

3️⃣ Vue 2.6.14 프로젝트 생성

vue create vue2-app

선택 예시:

• ? Generate project in current directory? Yes
• ? Please pick a preset: Default ([Vue 2] babel, eslint)

4️⃣ 프로젝트 실행

cd vue2-app
npm run serve

실행 후 http://localhost:8080에서 결과 확인

🗂 폴더 구조

vue2-app/
├── public/          # index.html, favicon 등
├── src/
│   ├── App.vue      # 루트 컴포넌트
│   ├── main.js      # 앱 초기화 진입점
├── package.json     # 프로젝트 설정 및 의존성

💻 실습: App.vue 기본 수정

src/App.vue를 아래처럼 수정해보세요.

<template>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Vue 2.6.14 앱이 성공적으로 실행되었습니다!'
    };
  }
}
</script>

✅ 마무리 정리

• Vue 2.6.14는 Vue 2 계열에서 가장 안정적인 버전입니다.
• Vue 2는 실무에서 여전히 많이 사용되며, Vue 3와 구조적으로 다릅니다.
• Vue CLI로 구조화된 Vue 2 프로젝트를 손쉽게 만들 수 있습니다.

GitHub - heroyooi/vue2-app at ch1