A Full Stack Develpor

https://codingcoding.tistory.com/483

위의 블로그 포스트를 보고 필요한 내용을 정리해봤다.

1) v-for 안에서는 반드시 :key 사용한다.

2) 이벤트 이름은 kebab-case

컴포넌트에서 템플릿으로 $emit할 때에 이름은 케밥 케이스를 사용해야한다.

<!-- Component -->

this.$emit('full-stack');

<!-- Template -->

<Component @fullStack="doSomething()" />

3) Props 선언에는 Camel case, 템플릿에는 케밥 케이스를 사용한다.

<!-- Nuxt 예시 --> 

<Component full-stack='hello world!' />

props: {
	fullStack: {
    	type: String,
        required: true
    }
}

4) v-if와 v-for를 같이 사용하지 않는다. 

기능이 필요하다면 computed를 사용하자.

5) 컴포넌트 이름에는 Pascal case나 Kebab case를 사용한다.

MyComponent.vue

my-component.vue

6) 기본 컴포넌트 이름에는 접두사 붙이기

BaseButton.vue
BaseTable.vue
BaseIcon.vue


AppButton.vue
AppTable.vue
AppIcon.vue


VButton.vue
VTable.vue
VIcon.vue

7) 한 번만 선언하고 사용되는 컴포넌트 이름에는 접두사를 붙인다.

-> 모든 페이지에서 한 번만 사용되고 props를 사용하지 않는 컴포넌트 ex) Header, Sidebar, Footer

하나의 활성 인스턴스만 존재할 수 있다는 의미로 단일 컴포넌트 이름에는 접두사 The가 붙는다.

8) created와 watch 함수를 호출하지 않는다.

wath에 immediate: true 옵션을 주면 된다.

watch: {
	myProperty: {
    immediate: true,
    handler(newVal, oldVal) {
    	console.log('hello world');
    }
}