하수도키의 성장일기

개발일기/Nuxt.js

[Nuxt] Nuxt란? (Nuxt 메인 페이지 분석)

열심히 글 쓴 게 날아가서 후다닥 씁니다... 후아... Nuxt3 정식 배포된 기념으로 튜토리얼 형식으로 공식문서 격파 포스팅! 여기부터 Nuxt 메인 페이지에 있는 내용들 정리(구글 번역, 심각한 수준의 의역) 틀린 거 있으면 알려주세요! https://nuxt.com/ Nuxt: The Intuitive Web Framework Global Maintainers Summit Event 2021 globalmaintainersummit.github.com nuxt.com Nuxt란? 직관적인 웹 프레임워크라고 공식 홈페이지에 대문짝 하게 걸려있다. Build your next Vue.js application with confidence using Nuxt. An open source framewor..

개발일기/Vue.js

[Vue.js] 이벤트 전파(버블링, 캡쳐링) 살펴보기

오랜만에 쓰는 포스팅이다. 이번에는 Vue에서 이벤트 전파에 관련된 포스팅을 쓰고자 한다. 자바스크립트 이벤트 버블링, 캡쳐링, 위임, 전파 등 여러 가지 아마 살펴봤을 걸로 기억한다. 면접이나 기술 질문에도 대부분 포함되는걸로 알고 있다. 그럴 때마다 공부하고 이해하고 다시 까먹고 반복 중이다. 이해가 안 되거나 잘 모르겠으면 우선 외우는 게 중요한 것 같다. 여기까지 온 사람이라면 아마 우선 외워야 할 것 같다. 개요 Vue를 통해 이벤트 Phase를 알아보기 버블링, 캡쳐링 살펴보기 Vue event modifier (prevent, self, stop) 살펴보기 예제 코드 Outer first Inner Inner 예제는 어떤 포스팅에서 보고 테스트한 거 같은데 출처를 잃어버렸다. 우선 이벤트에 ..

개발일기/Vue.js

[Vue.js] Vue 애니메이션(Animate) #3 - GSAP 3

[Vue.js] Vue 애니메이션(Animate) #3 - GSAP 3 이번 포스팅은 Vue 애니메이션에 대해 알아보자. 애니메이션을 이용해 사용자 경험을 향상할 수 있다. 버튼 같은 곳에 마우스 호버 상태 일 때 클릭률을 높이거나 강조해야 되는 문구, 영역 등에 애니메이션을 적용해 집중력을 높일 수 있다. 목차 Transition Page Transition Transition Group Javascript Hooks + Velocity GSAP(이번 포스팅) 개요 이전 포스팅에서는 Velocity.js 라이브러리를 사용했다. 이번 포스팅에선 GSAP(Green Sock Animation Platform) 강력하고 인기 있는 애니메이션 라이브러리를 Vue 에 적용하고 사용하는 법을 알아보자. GSAP이..

개발일기/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 #3 - 컴포넌트 만들기(Creating Components with TypeScript)

지난 포스팅에서 Vue3 + TypeScript를 세팅 완료했으니 이제 컴포넌트를 만들어보자. 타입 스크립트에서는 어떻게 Single File Components가 변경되었는지 살펴보자. TypeScript 컴포넌트 변화(TypeScript Changes in Single File Components) 개발 언어 속성(The Language Attribute) 싱글 파일 컴포넌트에서 script 태그에 보면 lang 속성이 추가되었다. 자바스크립트 사용할때는 없었는데 타입 스크립트 사용 시에는 명시를 해줘야 한다. 타입스크립트로 전환하기 위해서 해야 될 일 1. script 태그에 lang 속성 정의 2. 헬퍼 메서드(defineComponent) import 하기 3. 헬퍼 메서드(defineCompo..

개발일기/Vue.js

[Vue.js] Vue 3 + TypeScript #2 - 세팅하기(Setting Up Vue 3 & TypeScript)

이번 포스팅에서는 Vue 3 + TypeScript 세팅하는 법과 기존 Vue 3 프로젝트에 TypeScript를 추가하는 법을 알아보자. 2021/03/05 - [개발일기/Vue.js] - [Vue.js] Vue3+Typescript #1 - Vue, TypeScript 사용하는 이유(Why Vue & TypeScript) [Vue.js] Vue3+Typescript #1 - Vue, TypeScript 사용하는 이유(Why Vue & TypeScript) 이번 포스팅 주제는 Vue3와 TypeScript 사용하기이다. 이 포스팅 전체는 아래 강의를 바탕으로 의역하면서 정리한 내용이다. Why Vue & TypeScript - Vue 3 + Typescript | Vue Mastery Learn abo..

개발일기/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를 바인딩하는 방법을 살펴봤다. 이번 포스팅에..