A Full Stack Develpor

https://nuxtjs.org/tutorials/improve-your-developer-experience-with-nuxt-components

Component?

컴포넌트(Component)란 조합하여 화면을 구성할 수 있는 블록을 의미.

Vue에 강력한 기능이다. Component를 적절히 사용하면 화면을 구조화하여 일괄적인 패턴으로 개발 할 수 있으며, 코드를 쉽게 이해하고 재사용이 용이해진다.

컴포넌트 분류 방법

이름 규칙

kebab-case와 pascal-case로 정의한다.

Props

페이지에서 컴포넌트로 데이터를 전달할 때, props를 사용한다.

정적 전달

<blog-post title="Vue와 떠나는 여행"></blog-post>

동적 전달

<!-- 변수의 값을 동적으로 할당 -->
<blog-post :title="post.title"></blog-post>

<!-- 복잡한 표현을 포함한 동적 값 할당 -->
<blog-post :title="post.title + ' by ' + post.author.name"></blog-post>

https://v3.ko.vuejs.org/guide/component-props.html#%E1%84%8C%E1%85%A5%E1%86%BC%E1%84%8C%E1%85%A5%E1%86%A8-%E1%84%83%E1%85%A9%E1%86%BC%E1%84%8C%E1%85%A5%E1%86%A8-prop-%E1%84%8C%E1%85%A5%E1%86%AB%E1%84%83%E1%85%A1%E1%86%AF

페이지에서 컴포넌트로 전달하는 데이터 값이 바뀌었을 때, Component에서 watch를 사용하여 데이터 변경을 감지하고 동작을 정의하면 된다.

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

<!-- Nuxt 예시 --> 

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

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

Emit

컴포넌트에서 페이지로 데이터를 전달하고 싶을 때에는 emit을 사용하면 된다.

component.vue

this.$emit('updated', this.usercode.id, this.usercode.password)

page에 updated라는 명칭으로 페이지에 값을 전달하는 코드이다.

page에서는 다음과 같이 받는다.

page.vue

<Component @updated='getFunction' />

...
methods: {
	getFunction(id, password) {
    	console.log(id, password);
        }
    }
}

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

<!-- Component -->

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

<!-- Template -->

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

Vue에서 사용되는 문법을 정리한 문서이다. 개인적으로 몰랐거나 헷갈렸거나 정리할만한 내용이 있는 문법만 정리한다.

1. v-if와 v-show

v-if는 조건식이다. 변수를 적어주고 false이면 거짓이 되므로 태그가 출력되지 않는다. 일반적인 프로그래밍 언어의 if문과 비슷하게 생각하면 된다. vue의 기능은 'v-'로 표시한다. 태그를 단순히 감추는 것이면 v-show를 사용하면 된다.

2. v-cloak

v-cloak은 VueJS에서 렌더딩 되기 이 전에 브라우저에서 감추는 역할을 한다. 

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');
    }
}

https://studiomeal.com/archives/197

Bootstrap 공부를 제대로 해보려고 한다. 혼자서 처음부터 끝까지 화면을 구성해보는 작업을 진행한다.

Bootstrap은 row가 12grid로 이루어져 있다. 

col-md-4에서 m은 medium을 의미 medium보다 작아지면 원래 div인 여러줄로 나타내라는 뜻.

기본적으로 Bootstrap에서 제공하는 색상은 

primary, secondary, success, danger, warning, info, light, dark가 있다. 클래스에 넣어서 사용하면 된다. 

Breadcrumb -> 경로를 표시할 때 

Carousel -> 사이트 대표 이미지 슬라이드 같은 느낌 

Collapse -> 누르면 설명 나오는 것