vue 설정 및 문법

Vue.js는 사용자 인터페이스를 만들기 위한 자바스크립트 프레임워크입니다. React나 Angular와 같은 프론트엔드 프레임워크 중 하나이며, 컴포넌트 기반 개발과 양방향 데이터 바인딩, 가상 DOM, 반응형 데이터 시스템 등이 주요 특징입니다.

 

✅ Vue.js의 특징

1. 컴포넌트 기반 개발: UI를 재사용 가능한 컴포넌트 단위로 분리해서 개발.
2. 양방향 데이터 바인딩: HTML과 데이터가 자동으로 동기화됨 (v-model).
3. 반응형(Reactive) 데이터: 데이터가 바뀌면 자동으로 UI 갱신.
4. 가상 DOM 사용: DOM 조작을 효율적으로 처리함.
5. 학습 곡선이 낮음: HTML, CSS, JS 기본만 알면 시작 가능.

 

📦 Vue 기본 구조

<!-- CDN 방식 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

<div id="app">
  <h1>{{ message }}</h1>
  <input v-model="message" />
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: '안녕하세요, Vue!'
    }
  });
</script>

 

🔧 주요 문법 정리

1. 데이터 바인딩

<p>{{ message }}</p> <!-- 출력 -->
<input v-model="message"> <!-- 양방향 바인딩 -->

 

2. 디렉티브

Vue에서는 v-로 시작하는 특수 속성(디렉티브)을 사용합니다.

 

 

디렉티브	설명
v-bind	HTML 속성에 데이터 연결
v-model	양방향 데이터 바인딩
v-if	조건부 렌더링
v-for	리스트 렌더링
v-on	이벤트 리스너 연결 (@로도 사용 가능)

<p v-if="seen">보이기</p>
<ul>
  <li v-for="item in items">{{ item }}</li>
</ul>
<button v-on:click="sayHello">클릭</button>
<!-- 축약 -->
<button @click="sayHello">클릭</button>

 

🧩 컴포넌트 사용 예시 (Vue 2 기준)

Vue.component('hello-world', {
  template: '<p>안녕하세요, {{ name }}</p>',
  data() {
    return {
      name: 'Vue 사용자'
    };
  }
});

new Vue({
  el: '#app'
});

<div id="app">
  <hello-world></hello-world>
</div>

 

🛠 Vue CLI를 이용한 개발

보다 복잡한 앱을 개발하려면 Vue CLI를 사용하는 것이 일반적입니다.

npm install -g @vue/cli
vue create my-project
cd my-project
npm run serve

 

 

✅ 1. Vue Router (SPA 페이지 이동 기능)

📌 역할

• Vue 애플리케이션에서 SPA(싱글 페이지 애플리케이션) 방식으로 페이지 간 이동을 처리하는 공식 라우터입니다.

설치

npm install vue-router@4

 

🧩 기본 사용법 (Vue 3 기준)

 

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

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

<!-- App.vue -->
<template>
  <router-link to="/">홈</router-link>
  <router-link to="/about">소개</router-link>
  <router-view /> <!-- 컴포넌트가 여기에 렌더링 -->
</template>

 

 

✅ 2. Vuex (전통적인 상태 관리 라이브러리)

📌 역할

• 전역 상태 관리를 위한 Vue의 공식 라이브러리.
• Vue 2에서 널리 쓰였고 Vue 3에서도 사용 가능하지만, 구조가 무겁고 복잡한 편입니다.

📦 설치

npm install vuex@4

 

 

🧩 기본 구조

// store/index.js
import { createStore } from 'vuex';

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
});

export default store;

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

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

<!-- 컴포넌트 -->
<template>
  <p>{{ count }}</p>
  <button @click="increment">+1</button>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: mapState(['count']),
  methods: mapActions(['increment'])
}
</script>

 

✅ 3. Pinia (Vuex의 차세대 버전)

📌 역할

• Vuex보다 더 간결하고 가벼운 상태 관리 라이브러리
• Vue 3에 최적화되어 있고, Composition API 기반으로 작성 가능
• Vue 공식 추천 라이브러리로 자리잡음

📦 설치

npm install pinia

 

🧩 기본 구조

// stores/counter.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++;
    }
  },
  getters: {
    double: (state) => state.count * 2
  }
});

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import { createPinia } from 'pinia';

const app = createApp(App);
app.use(createPinia());
app.mount('#app');

<!-- 컴포넌트 -->
<template>
  <p>{{ counter.count }}</p>
  <button @click="counter.increment()">+1</button>
</template>

<script setup>
import { useCounterStore } from '@/stores/counter';
const counter = useCounterStore();
</script>

 

📊 정리

 

항목	Vue Router	Vuex	Pinia
역할	라우팅 (페이지 이동)	상태 관리	경량화된 상태 관리
Vue 3 지원	✔️ (버전 4)	✔️ (Vuex 4)	✔️ (권장)
코드 구조	단순함	복잡하고 보일러플레이트	간단하고 유연함
API 스타일	선언적	Options API 중심	Composition API 중심