하수도키의 성장일기

개발일기/Vue.js

[Vue.js] 새로운 v-model 살펴보기#5(Multi root components)

이번 포스팅에서는 Multi-Root Components(멀티 루트 컴포넌트)를 살펴 보겠다. Vue2에서는 멀티 루트 컴포넌트랑 fragments를 사용할 수 없었고 사용하려면 라이브러리 같은 것을 불러와야 가능했다. Vue3에서는 라이브러리 사용 없이 멀티 루트 컴포넌트랑 fragments를 사용할 수 있다. 싱글 루트랑 멀티 루트 컴포넌트의 차이점과, 싱글 루트에서 멀티 루트로 변경하는 작업을 살펴보자. 멀티 루트 컴포넌트(Multi-Root Components in Vue) 지난 포스팅에서 사용했떤 BaseInput 컴포넌트를 이어서 사용한다.(여기 코드 참고 https://codesandbox.io/s/purple-sky-umvws?file=/src/components/BaseInput.vue)..

책일기

[북리뷰] 맛있는 디자인 프리미어 프로&애프터 이펙트 CC 2021

한빛미디어에서 를 통해 책을 지원받아 작성한 리뷰입니다.  책 소개 우선 책 재질이 너무 반가웠다. 대부분 개발 책 재질들은 흐물흐물하고 빽빽한 텍스트로 구성되어 있다. 따라서 집중을 하지 못한 상태에서 보게 될 경우 잠을 스르륵 찾아왔다. 하지만, 프리미어 프로 & 애프터 이펙트 CC 2021 책은 코팅이 된 재질로 흑백이 아닌 컬러로 되어 있다. 개발 책에 비해 보는 맛이 쏠쏠하다. 또한, 직접 화면을 보여줘야 되서 이미지가 삽입되어 직관적이면서 이해하기가 매우 쉬웠다. 그리고 한권에 2개의 프로그램 설명이 있어서 가성비로 아주 좋은 것 같다. 지은이도 5명으로 구성되어 있는 점이 특이했다. 각각 자신 있는 분야를 나눠 작업한 덕분인지 퀄리티가 좋은 것 같다. 책 내용 책은 총 2개의 파트로 나눠져..

개발일기/Vue.js

[Vue.js] 새로운 v-model 살펴보기#4 ($attrs, $listeners)

2021/01/22 - [개발일기/Vue.js] - [Vue.js] 새로운 v-model 살펴보기#1 (vue3에서 바뀐 점) 2021/01/28 - [개발일기/Vue.js] - [Vue.js] 새로운 v-model 살펴보기#2 (다수의 v-model 사용하기) 2021/01/31 - [개발일기/Vue.js] - [Vue.js] 새로운 v-model 살펴보기#3 (v-model custom modifiers) 이번 포스팅에서는 $attrs 가 vue3에서 어떻게 변했는지 살펴보자. vue2에서는 HTML attributes들만 포함했지만 vue3에서는 HTML attributes뿐 아니라 listeners, classes, styles까지 다 포함한다. 이러한 개념을 배우면서 부모에서 자식 컴포넌트로 e..

개발일기/Vue.js

[Vue.js] 새로운 v-model 살펴보기#3 (v-model custom modifiers)

v-model 수식어(v-model modifiers) 지난 포스팅에서 2개의 v-model을 사용하는 법을 살펴봤다. 이번 포스팅에서는 vue3에서 v-model 커스텀 수식어(modifiers)를 사용하는 것을 살펴보겠다. v-model 수식어 살펴보기 vue2에서 사용했던 v-model 수식어들도 vue3에서 사용이 가능하다. .lazy : input 이벤트 대신 change 이벤트를 받는다. .number: 문자를 유효한 숫자로 변경한다. trim : 공백을 없애준다. v-model 커스텀 수식어 살펴보기 이전 포스팅에 만들었던 SalutationName 컴포넌트를 이어서 사용한다. capitalize라는 수식어를 만들어 보겠다. v-model:model 선언 후에 . 추가한 다음 수식어를 적어주..

개발일기/Vue.js

[Vue.js] 새로운 v-model 살펴보기#2 (다수의 v-model 사용하기)

2021/01/22 - [개발일기/Vue.js] - [Vue.js] 새로운 v-model 살펴보기#1 (vue3에서 바뀐 점) [Vue.js] 새로운 v-model 살펴보기#1 (vue3에서 바뀐 점) Vue3가 나오면서 변한 것들이 있는데 그중에서 v-model을 한번 살펴보자. 이번 포스팅에서는 간단하가 vue2에서 v-model과 vue3에서 v-model 에 차이점과 기본 형식에 대해 살펴보겠다. 다음 포스티은 v-mod hasudoki.tistory.com 다수의 v-model 연결하기(Multi v-model bindings) 지난 포스팅에서 vue3에서 v-model 사용하는 일반적인 방법을 살펴봤고, 기본 input과 event listeners를 바인딩하는 방법을 살펴봤다. 이번 포스팅에..