Vue3✔️ Vue2와 Vue3의 차이점- 라이브러리 내부 로직이 타입스크립트 기반으로 재작성되었다.- 주요 개발 도구의 변경 ( Vetur → Volar)- 컴포지션 API, Teleport 등 새로운 문법 지원- 리액티비티 시스템 기반 API 변경- 공식 문서 변경 : https://vuejs.org/ ✔️ 인스턴스 생성 방식의 차이Vue2에서 인스턴스 생성 방식// 1new Vue({ el: '#app'})// 2new Vue({ // 어쩌구}).$mount('#app') Vue3에서 인스턴스 생성 방식Vue.createApp({ //어쩌구}).mount('#app') 이 외에도 vue3를 사용하는 많은 이유가 있지만,결정적인 이유는vue2가 2023년 12월 31일부로 지원이 종료됐기 때문 ^..
Lottie.js- Lottie는 에어비엔비에서 만든 JSON 기반의 애니메이션 라이브러리이다. - Lottie 라이브러리를 통해 Adobe After Effects의 motion(움직임)을 json 기반의 데이터로 추출하여 웹에서 motion을 표현(렌더링)할 수 있다. - 이러한 lottie로 표현한 모션은 gif 파일보다 훨씩 작은 용량으로 리소스를 대폭 줄일 수 있다. https://airbnb.design/lottie/ LottieEasily add high-quality animation to any native app. Lottie is an iOS, Android, and React Native library that renders After Effects animations in real..
유틸리티 타입- 타입을 정의할 때 간결한 문법을 사용할 수 있게 해준다.- 이미 정의해 놓은 타입을 변환할 때에 사용하기 좋은 타입 문법이다.- 유틸리티 타입을 꼭 쓰지 않아도 기존의 인터페이스, 제네릭 등으로 충분히 가능하긴 하다. 종류는 겁나 많지만 자주 쓸 것 같은 파셜, 픽, 오밋을 정리해보자. 🔵 파셜 (Partial)interface Address { email: string; address: string;}// Partial를 활용한 타입type Email = Partial;const email1: Email = {}; // OKconst email2: Email = { email: 'abc' }; // OKconst email3: Email = { email: 'abc', a..
타입추론, 타입단언, 타입가드, 타입호환🔵 타입 추론- 타입을 따로 지정하지 않아도 알아서 추론하는 것 기본적인 타입추론// 기본적인 타입추론var a; // 이미 any로 추론함var b = 10; // number로 추론var c = 'abc' // string으로 추론 함수에 타입추론// 함수에 타입추론function getA(a) { return a; }// ==> any를 받고 any를 리턴하도록 추론function getB(b = 10) { var c = 'abc'; return b + c;}// ==> number를 받고 string를 리턴하도록 추론 제네릭으로 정의한 인터페이스에 타입추론// 제네릭으로 정의한 인터페이스에 타입추론interface Dropdown { ..
제네릭 (Generics)- C#, Java 등 언어에서 재사용성이 높은 컴포넌트를 만들때 활용되는 특징- 단일 타입이 아닌 다양한 타입에서 작동하는 컴포넌트를 생성하는데 사용- 타입을 마치 함수의 파라미터처럼 사용 🔵 함수에 제네릭 선언제네릭이 아닌 유니온 타입으로 했을 때 문제점function logMessage(text: string | number) { console.log(text); return text;}const res = logMessage('hi');// string 메서드 사용res.split(''); // ==> 에러! (string인지 number인지 몰라)- 유니온 타입을 활용하면 최종값의 타입이 정확하지 않음- return한 값이 여전히 string | number..