하수도키의 성장일기

개발일기/Vue.js

[Vue.js] Vue 애니메이션(Animate) #2 - Javascript Hooks, Velocity

이번 포스팅은 Vue 애니메이션에 대해 알아보자. 애니메이션을 이용해 사용자 경험을 향상할 수 있다. 버튼 같은 곳에 마우스 호버 상태 일 때 클릭률을 높이거나 강조해야 되는 문구, 영역 등에 애니메이션을 적용해 집중력을 높일 수 있다. 목차 Transition Page Transition Transition Group Javascript Hooks + Velocity(이번 포스팅) GSAP 2021.04.11 - [개발일기/Vue.js] - [Vue.js] Vue 애니메이션(Animate) #1 - Transition [Vue.js] Vue 애니메이션(Animate) #1 - Transition 이번 포스팅은 Vue 애니메이션에 대해 알아보자. 애니메이션을 이용해 사용자 경험을 향상할 수 있다. 버튼 ..

개발일기/Vue.js

[Vue.js] Vue 애니메이션(Animate) #1 - Transition

이번 포스팅은 Vue 애니메이션에 대해 알아보자. 애니메이션을 이용해 사용자 경험을 향상할 수 있다. 버튼 같은 곳에 마우스 호버상태 일 때 클릭률을 높이거나 강조해야 되는 문구, 영역 등에 애니메이션을 적용해 집중력을 높일 수 있다. 목차 Transition(이번 포스팅) Page Transition Transition Group Javascript Hooks + Velocity GSAP Transition(트랜지션) Vue에서 Transition 래퍼(Wrapper) 컴포넌트를 기본으로 제공하고 있다. 이 Transition 컴포넌트를 이용해 다양한 애니메이션 효과를 낼 수 있다. Transition은 번역하자면 전환이다. 말 그대로 from → to로 되는 것이 전환이다. 전활 될 때 애니메이션을 ..

개발일기/Vue.js

[Vue.js] Portal-Vue 라이브러리 사용하기

Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 하는 최고의 방법을 제공합니다. 위에 문구는 리액트 홈페이지에서 나온 Portals에 대한 설명이다. Vue2에서는 현재 제공하지 않아 Portal-Vue 라는 라이브러리를 사용한다. https://portal-vue.linusb.org/guide/getting-started.html#what-is-portalvue Vue3에서는 Portal(Teleport) 을 지원한다!! hasudoki.tistory.com/entry/VueJs-3-Composition-API-%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B0-5Teleport?category=1064875 Vue.Js 3 Composition ..

개발일기/Vue.js

[Vue.js] Vue3 + TypeScript #6 마지막 커스텀 타입 정의하기(Type Assertion, data, props, computed, methods)

2021.03.05 - [개발일기/Vue.js] - [Vue.js] Vue3+Typescript #1 - Vue, TypeScript 사용하는 이유(Why Vue & TypeScript) 2021.03.11 - [개발일기/Vue.js] - [Vue.js] Vue 3 + TypeScript #5 - 커스텀 타입 정의(Defining Custom Types) 지난 포스팅에서 커스텀 타입을 정의하는 방법을 알아봤다. 이제는 커스텀 타입을 적용해 보자. 우선 데이터(data) 옵션을 살펴보자. event 객체를 참조하는데 만약 event.title 대신 event.description로 수정하면 코드를 실행하기 전까지 description의 값이 있는지 없는지 확인할 방법이 없다. VS Code를 사용하면 확장..

개발일기/Vue.js

[Vue.js] Vue 3 + TypeScript #5 - 커스텀 타입 정의(Defining Custom Types)

2021.03.11 - [개발일기/Vue.js] - [Vue.js] Vue 3 + TypeScript #4 - 타입 기초(Type Fundamentals) [Vue.js] Vue 3 + TypeScript #4 - 타입 기초(Type Fundamentals) 타입스크립트의 기본 개념 중 하나인 개발을 향상하는 데 사용하는 정적 타입 정의하는 방법을 살펴보자. 이번 포스팅에서는 타입스크립트에서 유용하고 자주 사용하는 일부 타입들을 살펴본 hasudoki.tistory.com 이전 포스팅 마지막에 보면 미리 정의 타입에 대한 아쉬운 점을 설명하면서 커스텀 타입에 대해 살펴봤다. 프로젝트가 커지고 요구사항이 많아질수록 커스텀 타입은 필수이다. 타입스크립트에서 커스텀 타입을 만드는 방법은 2가지이다. type,..