Three.js 간단 정리

Three.js로 웹에서 3D 구현하기 전부터 배우고 싶었는데 미루다 미루다 드디어 입문했습니다 😎지금 하는 일에 도움은 안되지만 순전히 재미만을 위한 학습 너무 좋아요 푸하항 사실 저는 6년 전 쯤, 3D 모델링을 잠깐 배워본 적이 있었고, 한 때는 관련 일을 꿈꾸기도 해서 그런지 이번 강의가 너무 재밌었어요. 그리고 PerspectiveCamera 라든가 ...  AmbientLight, texture 등 한 때는 자주 봤던(?) 단어들을 다시 보니 반갑기도 했어요. 아무튼 도전하기 어려운 Three.js를 이 강의를 통해 쉽게 훑어볼 수 있었네요.강의에 대한 내용은 맨 아래에 적어놨습니다!Three.js 의 특징- 자바스크립트 기반의 3D 라이브러리- WebGL기반으로 동작- 3D모델링, 렌더링,..

• format_list_bulleted 🧠 저장/etc.
• · 2024. 4. 2.
• textsms

SVG와 Canvas 간단 비교

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

• format_list_bulleted 🧠 저장/etc.
• · 2024. 3. 30.
• textsms

Vue3는 Vue2와 어떤 점이 다를까 | Option API와 Composition API 비교

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일부로 지원이 종료됐기 때문 ^..

• format_list_bulleted 🧠 저장/Vue
• · 2024. 3. 27.
• textsms

Lottie.js 간단 정리

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..

• format_list_bulleted 🧠 저장/etc.
• · 2024. 3. 25.
• textsms

타입스크립트 유틸리티 타입 (파셜, 픽, 오밋) 정리

유틸리티 타입- 타입을 정의할 때 간결한 문법을 사용할 수 있게 해준다.- 이미 정의해 놓은 타입을 변환할 때에 사용하기 좋은 타입 문법이다.- 유틸리티 타입을 꼭 쓰지 않아도 기존의 인터페이스, 제네릭 등으로 충분히 가능하긴 하다. 종류는 겁나 많지만 자주 쓸 것 같은 파셜, 픽, 오밋을 정리해보자.  🔵 파셜 (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..

• format_list_bulleted 🧠 저장/Typescript
• · 2024. 3. 21.
• textsms