728x90
반응형
SMALL
1. Vue.js란?
1.1 Vue.js 소개
- Vue.js는 프론트엔드 JavaScript 프레임워크로, 데이터 바인딩과 컴포넌트 기반 개발을 쉽게 구현할 수 있도록 설계됨.
- 가볍고 배우기 쉬우며, 점진적으로 도입할 수 있어 기존 프로젝트에도 쉽게 적용 가능.
✅ 컴포넌트(Component)
- 웹을 구성하는 로고, 메뉴바, 버튼 등 웹 페이지 내의 다양한 UI요소
- 재사용 가능하도록 구조화 한 것
✅ Vue.js 공식 사이트
1.2 Vue.js의 핵심 개념
✅ MVVM 패턴(Model-View-ViewMode)
- Vue.js는 MVVM 아키텍처 패턴을 따릅
| 역할 | 설명 |
| View | HTML과 CSS로 작성된 UI |
| ViewModel | View의 데이터 및 로직을 관리하는 Vue 인스턴스 |
| Model | 데이터 및 비즈니스 로직 |
1.3 가상 DOM(Virtual DOM)
- Vue.js는 Virtual DOM(가상 DOM)을 사용하여 성능을 최적화
✅ Virtual DOM이란?
- 브라우저의 실제 DOM을 직접 수정하지 않고, 가상의 DOM을 먼저 생성하여 변경 사항을 탐지한 후 필요한 부분만 업데이트하는 방식.
- 이 과정 덕분에 빠르고 효율적인 렌더링이 가능.
✅ 핵심 요점 정리
| 항목 | 설명 |
| Vue.js | 프론트엔드 JavaScript 프레임워크 |
| MVVM 패턴 | Model, View, ViewModel로 구성 |
| Virtual DOM | 변경된 부분만 업데이트하여 성능 최적화 |
2. 개발환경 설정
2.1 Vue.js 개발 도구 설치
✅ VS Code 확장팩
- Vue 3 Snippets → Vue 코드 자동완성 지원
- 크롬 Vue.js devtools 확장팩→ Vue 애플리케이션 디버깅 도구 ( 크롬에 Vue.js devtools검색 후 설치)
✅ Vue.js CDN 방식 설치
(Vue.js를 별도 설치 없이 빠르게 테스트할 때 사용)
<script src="https://unpkg.com/vue"></script>
✅ Vue CLI 설치 (권장)
$ npm install -g @vue/cli
$ vue create my-vue-app
$ cd my-vue-app
$ npm run serve
- `npm run serve` 실행 후, `http://localhost:8080`에서 애플리케이션 확인 가능.
✅ 핵심 요점 정리
| 항목 | 설명 |
| Vue 3 Snippets | VS Code에서 Vue 코드 자동완성 지원 |
| Vue.js devtools | Vue 애플리케이션 디버깅 도구 |
| Vue CLI | 프로젝트 생성 및 개발 환경 제공 |
3. 첫 번째 애플리케이션
3.1 Vue.js 기본 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>첫 번째 Vue.js 앱</title>
</head>
<body>
<div id="app">
<h2>{{ message }}</h2>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
let model = { message: "Hello Vue3!" };
let vm = Vue.createApp({
name: "App",
data() {
return model;
}
}).mount('#app');
</script>
</body>
</html>
✅ 핵심 코드 설명
- `<div id="app">` → Vue의 마운트 대상
- `Vue.createApp({...}).mount('#app')` → Vue 인스턴스 생성 및 마운트
- `data()` → Vue 데이터 객체 설정
- `{{ message }}` → Mustache 문법을 사용한 데이터 바인딩
3.2 데이터 변경 감지 및 UI 업데이트
model.message = "Vue.js는 쉽고 강력해요!";
- Vue는 데이터가 변경될 때 자동으로 화면을 업데이트함.
✅ 핵심 요점 정리
| 항목 | 설명 |
| `Vue.createApp()` | Vue 애플리케이션 생성 |
| `mount('#app')` | 특정 DOM 요소에 Vue 인스턴스 적용 |
| `data()` | Vue 데이터 설정 |
| `{{ message }}` | Mustache 문법을 사용한 데이터 바인딩 |
📎 참고자료
- Vue.js 공식 문서
- 원썜의 Vue.js 퀵스타트 (원형섭 저)
728x90
반응형
LIST