Vue 개발의 아쉬운 부분 개선
다른 설치 없이 순수 Vue를 통해 개발하는 것에는 아쉬운 부분이 많다.
- 코드의 변화를 인식하고 자동 로드, 업데이트 기능
- IDE의 자동 완성 & 오류 검수 기능
- 구현한 JavaScript 코드를 불러오고 내보내는 기능
이 같은 기능을 사용하고 싶을때, 우리는 Vue CLI를 활용할 수 있다.
Vue CLI
- 내부에서 Node.js 사용 (자동 로드 기능 제공)
- javascript 런타임. 브라우저 밖에서 javascript를 사용하기 위해 필요
- npm: node package manager
npm run serve: 서버 시작ctrl + C: 서버 종료
- ESLint (코드 자동 완성 & 오류 검수 기능)
- JavaScript 코드 문제점 식별 & 코드 품질 향상을 위해 사용되는 정적 코드 분석 도구
폴더 구조 분석
my-vue-project/
├── node_modules/
├── public/
│ ├── index.html
│ └── favicon.ico
├── src/
│ ├── assets/
│ │ └── logo.png
│ ├── components/
│ │ └── HelloWorld.vue
│ ├── views/
│ │ └── Home.vue
│ ├── App.vue
│ └── main.js
├── babel.config.js
├── package.json
├── package-lock.json
├── README.md
├── vue.config.js
└── ...src
- 메인 작업이 수행되는 디렉토리
assets
- 정적 자원(이미지, 스타일 시트 등)을 저장
components
- Vue 컴포넌트 파일들을 저장하는 폴더.
- 컴포넌트
- 웹 페이지의 다양한 부분을 구성하는 재사용 가능한 요소
- 자체적으로 데이터와 동작을 가질 수 있다.
- 다른 컴포넌트와 조합하여 웹 애플리케이션을 구축하는 데 사용
- 이 폴더에 저장된 Vue 컴포넌트 파일들이 Vue 앱에서 임포트하여 사용된다.
main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')- vue 앱의 진입점
import: 한 파일에서 다른 파일로 코드를 불러오는 모던 javascript 기능- 이제 더 이상
Vue.createApp을 통해 app을 만들지 않고import { createApp } from 'vue'를 통해 Vue 프레임워크로부터 createApp 메서드와 같이 항목을 불러와 사용한다.
App.vue
- vue앱 작성을 돕는다.
- 3가지 부분으로 나뉜다.: tempalte, script, style
App.vue코드 자체에는 브라우저에서 작동하지 않을 코드가 있으나, Vue CLI가 백그라운드에서 코드를 변환하여 최종적으로 유저의 브라우저에서 작동하도록 변환해준다.
기본 Vue app 생성
지금까지 app을 생성해온 방식.
App.vue
<template></>
<script>
const app = {
data() {
return {
friends: []
}
}
}
</script>main.jsp
import { createApp } from 'vue';
createApp({}).mound('#app);이 app 코드가 main.js의 구성 객체가 되도록 할 것이다. 어떻게 이 구성 객체를 main.js의 createApp 메서드에 넣을 수 있을까? import를 사용하면 된다.
import
import 불러올 객체 이름(자유롭게 지정 가능. 일반적으로는 파일명과 통일) from '불러올 파일 경로(./상대주소)'
- vue 패키지에서 불러오는것이 아닌 커스텀 파일인 경우 파일 경로를 지정해줘야 한다.
import App from './App.vue'
createApp(app).mount('#app');이 코드 수정으로 우리는 이제 App 코드(javascript 객체)를 createApp으로 전달 가능하게 되었다. 그러나 현재는 이를 내보내고있지 않다. 상수(const)에 코드를 저장하면 해당 파일에서만 사용가능하고 다른 파일에선 사용할 수 없기 때문이다. 대신, javascript의 기본 구문인 export default 키워드를 사용할 수 있다.
export default
App.vue
<template></template>
<script>
export default {
data() {
return {
friends: []
}
}
}
</script>- javascript에게 이 객체가 이 App.vue 파일의 default export임을 알려준다.
- 이는 import마다 해당 default를 불러오게 됨을 의미한다.
- 결과적으로 App.vue 파일에서 main.js파일로 이 객체를 공유한다.
컴포넌트 추가하기
App과 Component
Vue에는 앱이 있고 컴포넌트가 있다.
-
vue App
App.vue: 매인 Vue 앱 -
vue Component
- 미니 앱 같은 것
- 여러 컴포넌트를 합쳐 하나의 앱으로 만들 수 있다.
- 각 컴포넌트들은 서로 통신할 수 있다.
- 여러 다른 컴포넌트를 합쳐 복잡한 사용자 인터페이스를 구축할 수 있다.
- 보편적으로 파스칼 케이스로 작명한다.(첫글자 대문자 + 여러 단어)
src/components/FriendContact.vue
<template>
<li>
<h2>{{ frind.name }}</h2>
<button @click="toggleDetails">Show Details</button>
<ul>
<li><strong>Phone:</strong>{{ friend.phone }}</li>
<li><strong>Email:</strong>{{ friend.email }}</li>
</ul>
</li>
</template>
<script>
export default {
data() {
return { //이 컴포넌트에만 고유하게 해당되는 데이터
detailsAreVisible: false,
friend: {
id: 'manuel',
name: 'YoungJin Lee',
phone: '123456789',
email: 'YoungJin@localhost.com'
}
}
},
methods: {
toggleDetails() {
this.detailsAreVisible = !this.detailsAreVisible
}
}
}
</script>이렇게 컴포넌트 코드 하나를 작성해보았다.
이제 이 컴포넌트를 main.js에 등록해보자!
main.js
import { createApp } from 'vue';
import App from './App.vue';
import FriendContact from "@/components/FriendContact.vue";
const app = createApp(App);
app.component('friend-contact', FriendContact);
app.mount('#app');이제 App.vue에서 frined-contact 컴포넌트를 사용할 수 있게 되었다.
즉, 커스텀 HTML 요소를 사용할 수 있게 된 것이다.
App.vue
<template>
<section>
<h2>My Friends</h2>
<ul>
<friend-contact></friend-contact>
<friend-contact></friend-contact>
</ul>
</section>
</template>Reference
Udemy:【한글자막】 Vue - 완벽 가이드 (Router 및 Composition API 포함)
Good Luck!