Hello Vue.js 프로젝트 만들기
1. HTML 구조
<html>
<head>
<title>Vue Sample</title>
</head>
<body>
<div id="app">
{{message}}
</div>
</body>
</html>
- 기본적인 HTML 페이지 구조로, <div id="app"> 요소는 Vue.js 애플리케이션이 동작하는 루트 DOM 요소입니다.
- {{message}}는 Vue.js의 템플릿 문법으로, Vue 인스턴스에서 제공하는 data 속성의 message 값을 출력합니다.
2. Vue.js 라이브러리 포함
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
- Vue.js를 외부 CDN에서 불러와서 웹 페이지에 Vue.js 기능을 사용할 수 있게 합니다. 이 코드에서는 Vue 2.5.2 버전을 사용하고 있습니다.
3. Vue 인스턴스 생성
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
});
</script>
- new Vue({})는 새로운 Vue 인스턴스를 생성합니다.
- el: '#app': Vue 인스턴스가 연결될 DOM 요소를 지정합니다. 여기서는 id="app"을 가진 요소에 Vue.js가 적용됩니다.
- data: Vue 인스턴스의 데이터를 정의하는 객체입니다. 여기서 message라는 속성에 'Hello Vue.js!'라는 문자열이 저장됩니다.
- Vue.js는 {{message}} 템플릿을 인식하고, 해당 위치에 message 데이터의 값을 출력합니다.
전체 흐름
<html>
<head>
<title>Vue Samle</title>
</head>
<body>
<div id ="app">
{{message}}
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
});
</script>
</html>- Vue.js 라이브러리를 로드합니다.
- new Vue()로 Vue 인스턴스를 생성하여 HTML의 #app 요소에 연결합니다.
- Vue 인스턴스의 data에 정의된 message 값이 HTML의 {{message}} 부분에 자동으로 반영되어 'Hello Vue.js!'가 화면에 출력됩니다.
크롬 개발자 도구로 확인하기
1. 크롬 개발자 도구
2. 뷰 개발자 도구
Vue 개발자 도구(Vue DevTools)는 Vue.js 애플리케이션을 디버깅하고 성능을 최적화하는 데 매우 유용한 도구입니다. 이를 사용하면 다음과 같은 장점이 있습니다:
- 컴포넌트 구조 시각화: Vue 애플리케이션의 컴포넌트 구조를 트리 형태로 볼 수 있어, 애플리케이션의 컴포넌트 계층을 한눈에 파악할 수 있습니다.
- 데이터 및 상태 추적: 각 컴포넌트의 상태(data, props)를 실시간으로 확인할 수 있으며, 데이터가 어떻게 변하는지 쉽게 추적할 수 있습니다.
- 디버깅 및 수정: 컴포넌트의 상태를 직접 수정하여 애플리케이션의 동작을 실시간으로 테스트할 수 있습니다. 이로 인해 코드를 수정하지 않고도 UI와 데이터 변화를 즉시 확인할 수 있습니다.
- 성능 모니터링: 컴포넌트가 렌더링되거나 업데이트되는 시점을 파악하여, 성능 병목을 진단하고 최적화하는 데 도움이 됩니다.
- Vue Router 및 Vuex 지원: Vue Router나 Vuex를 사용하는 애플리케이션에서는 라우트 상태나 Vuex 스토어 상태를 쉽게 추적할 수 있습니다.
Vue 개발자 도구를 사용하면 애플리케이션의 동작을 직관적으로 파악하고, 문제를 빠르게 해결할 수 있어 개발 생산성을 크게 향상시킵니다.
'웹 개발 > Vue.js' 카테고리의 다른 글
| [Vue.js] 뷰 라우터 (0) | 2024.10.13 |
|---|---|
| [Vue.js] 컴포넌트 통신 (0) | 2024.10.12 |
| [Vue.js] 뷰 컴포넌트 (0) | 2024.10.12 |
| [Vue.js] 뷰 인스턴스 (0) | 2024.10.11 |
| [Vue.js] Vue.js란? (0) | 2024.10.10 |
