회사에서 기존 vue2 프로젝트들을 vue3로 마이그레이션하기 위해 캡틴판교의 vue3 강의들을 학습하게 되었다. [ Vue 3 시작하기 ] 시작편에서는 vue2와의 차이점과 vue의 기본적인 개념 위주로 알려준다. SFC라던가 vue의 문법 등 vue2와 vue3의 공통적인 내용을 배운다. vue2 학습 없이 바로 vue3를 학습하는 사람들을 위한 강의같다고 생각했다. [ Vue 3 중급 - Composition API ] 중급편에서는 본격적으로 vue3의 코어 api레벨인 컴포지션 api에 대해 옵션api와의 비교를 통해 특징과 장단점을 알려준다. 그리고 직접 vue3로 todo list를 만들어볼 수 있다. [ 캡틴판교 Vue3 강의 후기 ] 강의만으론 깊이 있게 배우긴 어렵다고 느꼈다. 또한 몇 ..
우연히 phase가 출시되었다는 광고를 보게되었다. 무료 모션그래픽 툴이라길래 궁금해서 찍먹해보기로 했다. 마침 한국 phase에서 상금이 달린 모션그래픽 챌린지를 진행하고 있었다. 상금에 눈이 먼 나, 도전! 🤑 1. 스케치 (프로크리에이터) 스케치는 아이패드로 그렸다. 처음부터 자동차 애니메이션을 할 생각은 없었는데 만들다보니까 루프 모션그래픽으로 만들게 되었다. 2. 라인워크 (phase)라인워크(선따기)를 하다보면 스케치보다 좀 더 정갈한 형태가 되도록 노력한다. 불필요한 선과 요소들을 줄이려고했다. 그리고 처음 써보는 phase 였지만 너무 편하고 쉽게 작업했다. 아직 기능이 많이 부족한데, 마스크 기능이 없으면 어떡하나 싶었는데 있어서 다행이었다. 3. 추출하기mp4, gif, json 형식으..
Dynamic components (동적 컴포넌트)🚗 Dynamic component란렌더링되는 컴포넌트를 동적으로 변경되는 것특정 조건에 따라 다른 컴포넌트를 mount하는 것 🚗 Dynamic component 사용법컴포넌트를 동적으로 변경하고 싶을 때 v-bind: is 속성을 활용한다. (1) 동적 컴포넌트 생성 (2) 동적으로 컴포넌트 변경하기 (shallowRef가 ref 보다 퍼포먼스가 더 좋다)// const currentComp = ref(자식컴포넌트);const currentComp = shallowRef(자식컴포넌트); ※ shallowRef와 ref의 차이둘다 반응형이다.shallowRef는 ref의 얕은 버전이다.shallowRef는 속성에 대해서는 반응하지 않고 값(.va..
vue3 defineProps는 props 옵션과 동일한 값을 허용한다.defineEmits는 emits 옵션과 동일한 값을 허용한다. 특징1. 전달된 옵션을 기반으로 타입 추론을 제공한다.특징2. 전달된 옵션은 setup() 에서 모듈 영역으로 호이스팅된다. 따라서 옵션은 setup() 영역에 선언된 지역 변수를 참조할 수 없다. (컴파일 오류)특징3. 하지만 import 된 옵션은 사용할 수 있다. (import도 모듈 영역이라 호이스팅 되기 때문에) .. 아 졸라 복잡하네특징4. script setup 을 사용하는 컴포넌트는 기본적으로 Template refs나 $parent와 같은 컴포넌트간 통신이 닫힌다. 🍬 script setup 에서의 $slots와 $attrsscript setup ..
Phase 후기🔥 Phase란 무엇인가Phase는 5월 2일날 한국에 런칭한 따끈 따끈한 애니메이션 툴입니다. 직접 사용해보니 어도비의 에펙, 일러스트레이터, 피그마를 합친 느낌이었습니다 😳 🔥 Phase 인상 깊었던 기능페이즈는 계속해서 새로운 기능들이 추가되고 있는 중! 현재는 기능이 부족하지만 웬만한 건 거의 다 있긴 하다. 아무튼 개인적으로 인상 깊었던 건 animate 기능 1. Animate 이게 진짜 편하다고 느꼈는데 Animate 버튼을 누르면 화면이 스윽 위로 올라가면서 타임라인 ui가 구성된다. 이게 디자인 작업과 영상 작업을 딱 분리해주는 느낌이라 After Effects만 해본 입장에서 정말 좋다고 느꼈다. 작업자마다 다르겠지만 나 같은 경우는 After Effects 안에서 디자인..