SVG와 Canvas의 차이 SVG (Scalable Vector Graphics) SVG는 확장 가능한 벡터 그래픽라는 의미를 갖고있다. 이름 그대로 해석하면 커졌다 작아졌다해도 멀쩡한 벡터 (Vector) 이미지이다. 즉, 모든 사이즈에서 깔끔하게 렌더링 되는 이미지를 말한다. 일반적인 이미지 파일인 JPG, PNG는 비트맵 이미지 파일 형식이라 크기에 따라 품질 저하가 발생한다. 반면에 Vector는 기하학적 정보와 계산에 의한 이미지이다.... (아무튼 수학적이다.) 이러한 벡터 이미지는 크기나 해상도를 변경해도 그냥 다시 계산을 하면 되기 때문에 품질 저하가 없다. 또한 크기를 키워도 데이터 양은 바뀌지 않는다. 이런 큰 장점이 있지만... 사실 복잡한 이미지는 오히려 더 무거워질 수 있어서 만..
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 { ..