Vue.js란?

 

📌 Vue.js란?

Vue.js(뷰.js)는 "진입 장벽이 낮고, 점진적으로 적용할 수 있는 프론트엔드 프레임워크" 입니다.
주로 싱글 페이지 애플리케이션(SPA) 개발에 사용되며, HTML, CSS, JavaScript를 조합하여 동적인 웹 애플리케이션을 쉽게 만들 수 있도록 도와줍니다.

🔹 Vue.js의 특징

1. 반응형(Reactivity) 데이터 바인딩
   • Vue의 핵심 기능 중 하나는 반응형 시스템입니다.
   • data 객체의 값이 변경되면, 이를 사용하는 DOM도 자동으로 업데이트됩니다.
   • Vue가 Proxy 또는 Object.defineProperty를 활용하여 변경을 감지합니다.
2. 컴포넌트 기반 아키텍처
   • Vue는 재사용 가능한 컴포넌트 기반 구조를 가집니다.
   • 각 컴포넌트는 template, script, style로 구성되며, 이를 조합해 UI를 설계할 수 있습니다.
3. 직관적인 템플릿 문법
   • {{}} 문법을 사용하여 데이터 바인딩이 가능하며, 디렉티브(v-if, v-for, v-bind 등)를 통해 동적 렌더링을 쉽게 제어할 수 있습니다.
4. Virtual DOM
   • Vue는 React처럼 Virtual DOM을 사용하여 효율적인 렌더링을 지원합니다.
   • 변경된 부분만 최소한으로 업데이트하여 성능을 최적화합니다.
5. Vue Router 및 Vuex 지원
   • Vue Router: SPA에서 페이지 이동을 처리하는 라우터 라이브러리
   • Vuex(Pinia): 상태 관리를 위한 라이브러리

 

🔹 Vue.js의 기본 문법 예제

1️⃣ Vue 인스턴스 생성

<div id="app">
  <p>{{ message }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      message: '안녕하세요, Vue.js!'
    }
  });
</script>

 

2️⃣ 디렉티브 예제 (v-bind, v-model, v-if, v-for)

<div id="app">
  <input v-model="name" placeholder="이름 입력">
  <p v-if="name">안녕하세요, {{ name }}님!</p>

  <ul>
    <li v-for="item in items" :key="item.id">{{ item.text }}</li>
  </ul>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      name: '',
      items: [
        { id: 1, text: 'Vue.js 배우기' },
        { id: 2, text: 'React.js와 비교하기' },
        { id: 3, text: 'SPA 프로젝트 만들어 보기' }
      ]
    }
  });
</script>

 

🔹 Vue의 주요 활용 분야

✅ SPA(Single Page Application) 개발
✅ 대시보드, 관리 시스템
✅ 모바일 웹앱(PWA) 개발
✅ 전자상거래 웹사이트

 

🔹 Vue의 버전

• Vue 2: Options API 방식으로 많이 사용됨 (data, methods, computed 등)
• Vue 3: Composition API(setup 함수) 도입으로 더 유연한 방식 제공

// Vue 3 Composition API 예제
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => count.value++;

    return { count, increment };
  }
};

 

🔹 Vue.js vs React.js vs Angular

특징	Vue.js	React.js	Angular
학습 난이도	쉬움	보통	어려움
데이터 바인딩	양방향(v-model)	단방향	양방향
성능	빠름	빠름	상대적으로 무거움
상태 관리	Vuex, Pinia	Redux, Recoil	NgRx
사용 사례	중소형 프로젝트	대규모 서비스	엔터프라이즈

---

✅ 정리

Vue.js는 가볍고, 배우기 쉽고, 직관적인 프레임워크로, 빠르게 프로젝트에 적용할 수 있는 장점이 있습니다.
특히 국내에서 많은 스타트업과 기업들이 Vue.js를 사용하고 있으며, SPA 개발을 고려한다면 Vue.js는 좋은 선택이 될 수 있습니다. 🚀