Three.js로 웹에서 3D 구현하기 전부터 배우고 싶었는데 미루다 미루다 드디어 입문했습니다 😎 지금 하는 일에 도움은 안되지만 순전히 재미만을 위한 학습 너무 좋아요 푸하항 사실 저는 6년 전 쯤, 3D 모델링을 잠깐 배워본 적이 있었고, 한 때는 관련 일을 꿈꾸기도 해서 그런지 이번 강의가 너무 재밌었어요. 그리고 PerspectiveCamera 라든가 ... AmbientLight, texture 등 한 때는 자주 봤던(?) 단어들을 다시 보니 반갑기도 했어요. 아무튼 도전하기 어려운 Three.js를 이 강의를 통해 쉽게 훑어볼 수 있었네요.강의에 대한 내용은 맨 아래에 적어놨습니다! Three.js 의 특징 - 자바스크립트 기반의 3D 라이브러리 - WebGL기반으로 동작 - 3D모델링, 렌..
SVG와 Canvas의 차이 SVG (Scalable Vector Graphics) SVG는 확장 가능한 벡터 그래픽라는 의미를 갖고있다. 이름 그대로 해석하면 커졌다 작아졌다해도 멀쩡한 벡터 (Vector) 이미지이다. 즉, 모든 사이즈에서 깔끔하게 렌더링 되는 이미지를 말한다. 일반적인 이미지 파일인 JPG, PNG는 비트맵 이미지 파일 형식이라 크기에 따라 품질 저하가 발생한다. 반면에 Vector는 기하학적 정보와 계산에 의한 이미지이다.... (아무튼 수학적이다.) 이러한 벡터 이미지는 크기나 해상도를 변경해도 그냥 다시 계산을 하면 되기 때문에 품질 저하가 없다. 또한 크기를 키워도 데이터 양은 바뀌지 않는다. 이런 큰 장점이 있지만... 사실 복잡한 이미지는 오히려 더 무거워질 수 있어서 만..
Lottie.js - Lottie는 에어비엔비에서 만든 JSON 기반의 애니메이션 라이브러리이다. - Lottie 라이브러리를 통해 Adobe After Effects의 motion(움직임)을 json 기반의 데이터로 추출하여 웹에서 motion을 표현(렌더링)할 수 있다. - 이러한 lottie로 표현한 모션은 gif 파일보다 훨씩 작은 용량으로 리소스를 대폭 줄일 수 있다. https://airbnb.design/lottie/ Lottie Easily add high-quality animation to any native app. Lottie is an iOS, Android, and React Native library that renders After Effects animations in re..
웹팩 - 프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler) *** 빌드=번들링=변환 다 같은 말임 모듈 - 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위 모듈 번들링 - 웹 애플리케이션 몇백개 자원들을 하나의 파일로 압축해주는 동작 - 파일들간의 관계를 모두 파악함 - 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합하는 도구 웹팩의 역할 - 웹팩은 파일 단위의 자바스크립트 모듈을 변수로 관리가 가능!! ( 예전엔 AMD, Common.js와 같은 라이브러리 사용했다고 한다...) - 웹개발 작업 자동화 도구 + 모듈 관리 ( 예를 들면 ... HTML, CSS, JS 압축 /..
맨날 쓰는건데 아무 지식 없이 쓰는거라 한번 공부해봤다. NPM(Node Package Manager) - 노드패키지매니저 - 자바스크립트 패키지 관리자 - 자바스크립트 라이브러리가 있는 공개 저장소 - NPM(Node Package Manager)는 명령어로 자바스크립트 라이브러리를 설치하고 관리할 수 있는 패키지 매니저 → 자바스크립트 라이브러리를 npm 명령어로 편하게 다운 가능 npm 사용이유 1. 라이브러리 버전관리에 굿 → 걍 pacakage.json 에서 슥슥 세팅하면 끝 2. cdn 일일이 검색하고 찾지 않아도 된다 → 걍 install 명령어로 빠르게 세팅 버전확인 npm -v npm 초기화 npm init // ← 이름, 버전 등등 겁나 물어봄.. 어짜피 따로 세팅하는게 더 편함 npm..