1. Vue가 뭐야?

Vue(뷰)

Vue(뷰)는 프로그레시브 프레임워크(Progressive Framework) 로,
웹 애플리케이션의 UI를 구축하기 위해 사용되는 JavaScript 프레임워크야.
React나 Angular 같은 프레임워크와 비슷하지만,
상대적으로 가볍고 배우기 쉬운 것이 장점이야.

 

1. Vue가 뭐야? 
2. 프레임워크란?
3. Vue3 기본 문법
4. Vue Router (<router-link>, <router-view>)
5. Pinia (상태 관리 라이브러리)
6. Vue3 Composition API
7. Pinia Store에서 ref와 reactive를 사용하는 방법
8. Pinia에서의 Composition API 스타일과 Options API 스타일

🔹 Vue의 주요 특징

1. 반응형(Reactivity) 시스템

• 데이터가 변경되면 자동으로 UI가 업데이트돼.
• ref()나 reactive() 같은 기능으로 반응형 상태를 만들 수 있어.

2. 컴포넌트 기반(Component-Based) 아키텍처

• 재사용 가능한 컴포넌트로 UI를 구성할 수 있어.
• 유지보수와 확장성이 뛰어나.

3. 템플릿 문법(Template Syntax)

• HTML과 비슷한 문법을 사용해서 UI를 쉽게 정의할 수 있어.

<template>
  <h1>{{ message }}</h1>
  <button @click="changeMessage">클릭</button>
</template>

<script setup>
import { ref } from 'vue';

const message = ref("안녕하세요!");

function changeMessage() {
  message.value = "Vue는 재미있어!";
}
</script>

• 위 코드에서 {{ message }} 는 Vue의 데이터 바인딩 기능을 활용한 예시야.

4.단방향 및 양방향 데이터 바인딩

• v-bind를 사용하면 HTML 속성에 데이터를 연결할 수 있어.
• v-model을 사용하면 양방향 데이터 바인딩이 가능해.

<input v-model="username" />
<p>입력한 이름: {{ username }}</p>

5. 디렉티브(Directives)

• v-if, v-for, v-show 같은 지시어를 사용해서 조건문이나 반복문을 쉽게 적용할 수 있어.

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

6. Vue Router & Vuex/Pinia 지원

• Vue Router: SPA(Single Page Application)에서 페이지 이동을 쉽게 처리할 수 있어.
• Pinia / Vuex: 상태 관리를 위한 라이브러리야.

🔹 Vue를 어디에 사용할 수 있을까?

• PWA(프로그레시브 웹 앱): 네이티브 앱처럼 동작하는 웹 앱을 만들 때 유용해.
• 대시보드 & 관리 시스템: 데이터가 자주 변경되는 UI를 쉽게 만들 수 있어.
• 실시간 채팅 앱: Firebase와 함께 사용하면 강력한 실시간 채팅 기능을 구현할 수 있어.

다음 : 2. 프레임워크란?