2. Vue.js 기초
Vue.js란 무엇인가?
Vue.js는 사용하기 쉬운 프런트엔드 프레임워크로, 단일 페이지 애플리케이션(SPA) 개발에 적합합니다. React와 마찬가지로 컴포넌트 기반의 사용자 인터페이스를 구축할 수 있으며, 반응성(Reactivity)을 통해 동적인 웹 애플리케이션을 쉽게 만들 수 있습니다.
Vue.js 설치 및 프로젝트 설정
Vue.js 프로젝트를 설정하기 위해, Vue CLI를 사용합니다.
- Vue CLI 설치
npm install -g @vue/cli
- 새로운 Vue 프로젝트 생성
vue create my-vue-app
cd my-vue-app
- 프로젝트 폴더 구조는 다음과 같습니다.
my-vue-app/
├── node_modules/
├── public/
├── src/
│ ├── assets/
│ ├── components/
│ │ └── HelloWorld.vue
│ ├── views/
│ │ └── Home.vue
│ ├── App.vue
│ ├── main.js
├── .gitignore
├── babel.config.js
├── package.json
└── README.md
- 프로젝트를 실행합니다.
npm run serve
브라우저에서 http://localhost:8080
을 열면 Vue 애플리케이션이 실행됩니다.
Vue.js의 주요 개념
1. 컴포넌트
Vue 컴포넌트는 Vue 애플리케이션의 기본 빌딩 블록입니다. 컴포넌트는 독립적인 UI 요소로, 템플릿, 스크립트, 스타일을 포함할 수 있습니다.
컴포넌트 예제
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<style scoped>
h1 {
color: #42b983;
}
</style>
2. 템플릿
Vue 템플릿은 HTML 기반의 구문으로, 컴포넌트의 UI를 정의합니다. 템플릿은 데이터 바인딩, 디렉티브, 이벤트 핸들링 등을 포함합니다.
<template>
<div>
<p>{{ message }}</p>
<button @click="updateMessage">Update Message</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Vue!'
};
},
methods: {
updateMessage() {
this.message = 'Message updated!';
}
}
}
</script>
3. 데이터 바인딩
Vue에서는 v-bind
디렉티브를 사용하여 속성을 데이터에 바인딩할 수 있습니다.
<template>
<div>
<img v-bind:src="imageSrc" alt="Example Image">
</div>
</template>
<script>
export default {
data() {
return {
imageSrc: 'https://example.com/image.jpg'
};
}
}
</script>
4. 이벤트 핸들링
Vue에서는 v-on
디렉티브를 사용하여 이벤트를 핸들링할 수 있습니다.
<template>
<div>
<button v-on:click="handleClick">Click me</button>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
alert('Button clicked!');
}
}
}
</script>
5. 조건부 렌더링
Vue에서는 v-if
, v-else-if
, v-else
디렉티브를 사용하여 조건부로 요소를 렌더링할 수 있습니다.
<template>
<div>
<p v-if="isLoggedIn">Welcome back!</p>
<p v-else>Please log in.</p>
</div>
</template>
<script>
export default {
data() {
return {
isLoggedIn: false
};
}
}
</script>
6. 리스트 렌더링
Vue에서는 v-for
디렉티브를 사용하여 리스트를 렌더링할 수 있습니다.
<template>
<div>
<ul>
<li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, text: 'Item 1' },
{ id: 2, text: 'Item 2' },
{ id: 3, text: 'Item 3' }
]
};
}
}
</script>
Vue 개발 도구
1. Vue Devtools
Vue Devtools는 브라우저 확장 프로그램으로, Vue 컴포넌트 트리와 상태를 쉽게 확인하고 디버깅할 수 있습니다.
결론
Vue.js는 사용하기 쉽고 강력한 프런트엔드 프레임워크로, 컴포넌트 기반의 사용자 인터페이스를 구축하는 데 매우 유용합니다. 이번 글을 통해 Vue.js의 기본 개념과 설치, 프로젝트 설정 방법을 배웠습니다.
다음 글에서는 Angular 기초에 대해 알아보겠습니다. 다음 글에서 만나요!
'JavaScript 프레임워크 시리즈' 카테고리의 다른 글
[JavaScript 프레임워크] 6일차: JavaScript 프레임워크에서 라우팅 설정하기 (0) | 2024.08.06 |
---|---|
[JavaScript 프레임워크] 5일차: JavaScript 상태 관리 이해하기: Redux와 Vuex (0) | 2024.08.05 |
[JavaScript 프레임워크] 4일차: JavaScript 프레임워크 프로젝트 설정 및 기본 구조 (0) | 2024.08.04 |
[JavaScript 프레임워크] 3일차: Angular 기초 이해하기 (0) | 2024.08.03 |
[JavaScript 프레임워크] 1일차: React 기초 이해하기 (0) | 2024.08.01 |