컴포넌트 기초
컴포넌트 등록
- 전역 등록
const app = Vue.createApp({...});
app.component('component-name', { ... });전역 등록은 모듈 번들러 같은 빌드 시스템을 이용할 때, 컴포넌트를 사용하지 않더라도 최종 빌드에 계속 포함되기 때문에 비효율적이다.
- 지역 등록
const componentA = {...};
const componentB = {...};
const componentC = {...};
const app = Vue.createApp({
components: {
'component-name': componentA,
'component-name': componentB,
'component-name': componentC,
}
});component-name에 속하는 key가 컴포넌트의 이름이 되며, value가 참조하는 컴포넌트가 된다.
등록된 컴포넌트는 해당 스코프 안에서 <component-name><component-name/> 형태로 사용이 가능하다.
<div id="components">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>props
-
컴포넌트에는
props라는Array형태의 특수한property가 있으며,props에 배열에 정의된property를 이용해서 값을 전달받아 컴포넌트의 재사용성을 늘릴 수 있다. -
v-bind디렉티브를 이용해서 동적props전달이 가능하다.
<div id="blog-posts-demo">
<blog-post
v-for="post in posts"
:key="post.id"
:title="post.title"
></blog-post>
</div>커스텀 이벤트
-
HTML안에서 이벤트 이름은 항상kebab-case를 사용하는 것이 권장된다. -
v-on디렉티브를 이용해서 커스텀 이벤트 등록이 가능하며, 하위 컴포넌트의 이벤트를 수신한다. -
하위 컴포넌트에서는
$emit('event-name'[, argument])메서드를 이용해서 이벤트를 트리거 한다. -
$emit메서드에서argument로 이벤트에 값을 전달할 수 있으며, 이벤트 핸들러를 등록한 곳에서$event를 이용해 값에 접근이 가능하다. -
이벤트 핸들러가 메서드 형태라면 첫 번째
parameter로 값이 전달된다.
NVM
-
Node Version Manager의 약어로,
Node.js의 버전을 관리하는 도구이다. -
버전 충돌 문제 때문에 기존에 사용하던
Node.js를 삭제하지 않고 버전 관리를 하고 싶다면,n패키지를 이용한다. -
nvm install <version>명령으로 간단하게 버전별로 설치가 가능하며,nvm use <version>명령으로 설치된 버전을 사용하도록 할 수 있다.
SFC
-
Single File Component의 약어로, 전역 컴포넌트의 여러 단점을 해결하기 위해서 컴포넌트를 하나의 파일 단위로 분리한 것을 말한다.
-
SFC의 구조는 아래와 같다.
<template>
<h1 class="title">{{ msg }}</h1>
</template>
<script>
export default {
data() {
return {
msg: 'Hello Vue~'
}
}
}
</script>
<style>
.title {
color: orange;
}
</style>- 생성한
SFC는import키워드를 이용해서 불러오며,Javascript와CSS밖에 해석하지 못하는 웹 브라우저의 특성상SFC를 컴파일하는 과정을 거쳐야 한다.
import * as Vue from 'vue';
import App from './App.vue';
Vue.createApp(App).mount('#app');style태그에scoped속성을 추가하면 스타일이 해당 컴포넌트 내에서만 유효하게 된다.
Webpack
-
webpack-dev-server패키지를 이용하면 간단하게 브라우저 테스트를 해볼 수 있다. -
resolve옵션을 통해서 확장자를 생략하거나,path에 대한 별칭을 정의할 수 있다.
module.exports = {
resolve: {
extensions: ['.vue', '.js'],
alias: {
'~': path.resolve(__dirname, 'src')
}
},
...copy-webpack-plugin플러그인을 이용해서build시 특정 폴더에 있는 파일들을 복사해서output path에 포함시킬 수 있다.
