오늘부터 일기장 오늘부터 일기장

Babel, Polyfilling & Transpiling 📐 웹서비스를 개발할 때 꼭 알아야하는 Babel, Polyfilling & Transpiling에 대해 간단하게 알아봅니다. Github 문서 : https://github.com/dusunax/javascript/blob/main/docs/babel-transpiling%26polyfilling.md Babel Babel이란? 플러그인 & 프리셋 1. Pacel과 Babel 2. Webpack과 Babel Polyfilling vs Transpiling Polyfilling vs Transpiling 개요 바벨은 Polyfilling 도구 인가요? 아니면 Transpiling 도구 인가요? Polyfilling이란? core-js 라이브러리 ..

NPM, dependencies, Parcel 📁 자바스크립트 개발에 사용하는 NPM, dependencies, Parcel에 대해 간단하게 알아봅니다. Github 문서 : javascript/npm&dependency.md at main · dusunax/javascript · GitHub NPM npm (패키지 매니저) 를 사용하는 이유 global로 패키지를 설치하는 이유 dev dependency란? 예시 : leaflet, 외국 map api lodash : javaScript를 더 편하게 쓰기 Parcel parcel vs webpack parcel 실행하기 npx parcel index.html vs "start": "parcel index.html" build 🚫 parcel build ..

빌드 프로세스 & ES6 module 👩‍🏭 자바스크립트의 빌드 프로세스, ES6 module에 대해 간단하게 알아봅니다. module이 import되는 순서를 확인해봅니다. Github 문서 : https://github.com/dusunax/javascript/blob/main/docs/ES6-module_import.md Build Process & JavaScript Bundle Software development의 과정? Module이란? Module의 장점 ES6 Module vs Script ES6 module을 Import하는 과정 예시 Parsing Download linking imports import 순서 정리 Build Process & JavaScript Bundle 빌드 과정..

취미로 공부하는 three.js 입니다. 예제 위주로 정리하고 있습니다. https://github.com/dusunax/threeJS/wiki 201 공이 있는 방 initScene : room initScene : ball objects set-up VR 201 - 공이 있는 방 랜덤한 위치와 색상의 공들이 있는 방입니다. VR로 방을 둘러볼 수 있습니다. 일자: 2023년 1월 8일(일) 강의: 유데미 강의 링크 링크: [github wiki], [github page] VR을 setup하는 방법에 대해 알아봅니다. (VRButton) 각 geometry, material을 사용해 방과 공 object를 만듭니다. initScene : room new BoxLineGeometry() : 사이즈 및 ..

취미로 공부하는 three.js 입니다. 예제 위주로 정리하고 있습니다. https://github.com/dusunax/threeJS/wiki 103 별 모양으로 별 그리기 Mesh CircleBufferGeometry 반원 Shape 별 모양으로 별 그리기 (feat. 도형 그리기 기본 개념) 104 .glb .fbx 파일 Load하기 Material material 종류 Free 3d.com gltf-viewer Loader GLTFLoader FBXLoader new LoadingBar new GLTFLoader, new FBXLoader .Box3().setFromObject(~.scene) .glb, tbx 각 로딩 결과 103 별 모양으로 별 그리기 별을 그리기 위해 필요한 값 innerRa..

취미로 공부하는 three.js 입니다. 예제 위주로 정리하고 있습니다. https://github.com/dusunax/threeJS/wiki 101 - y축(up)으로 회전하는 빨간 육면체 - 220101 camera.position.set(x,y,z) scene renderer geometry + material = mesh ambient & light Control Resize 102 - 회전하는 지구와 달 - 220101 Three.js Editor project | scene add map script child 배경 설정 Publish 101 - y축(up)으로 회전하는 빨간 육면체 내용: y축으로 회전하는 빨간 육면체입니다. 브라우저 화면을 드래그하여 화면의 orbit을 변경할 수 있습니다..

레퍼런스와 함께 vanilla JS로 Single-Page Application을 구현해봅니다! React, Vue와 같은 SPA를 위한 라이브러리를 사용하는 것은 간단한 웹사이트를 구현할 때는 어쩌면 과한 방법일 수 있습니다. 전역으로 관리할 데이터가 적을 때 Redux를 사용할 필요성이 없는 것과 같은 맥락입니다. 또한 React, Vue는 결국 라이브러리이기 때문에, JS로 앱이 어떻게 작동하는지 조금이지만😅 알아둘 필요도 있습니다. 레퍼런스 a. History API + SPA 튜토리얼 https://www.youtube.com/watch?v=ZleShIpv5zQ a-1. pushState docs https://developer.mozilla.org/en-US/docs/Web/API/Histor..

CSS Grid Layout Module ✍ Grid Layout를 정리해봅니다. 0. Flex와 Grid 1. 속성 & 메소드 & 개념 요약 2. 기본 사용법 - display: grid - grid-template- - minmax() - grid-gap 3. Cell 활용하기 - grid cell & lines - grid-template-areas - auto 4. 실습 (feat. picsum.phtos) - picsum.photos - grid-template-areas 📖 references: CSS Grid Layout Module https://www.w3schools.com/css/css_grid.asp CSS Grid Layout https://developer.mozilla.org/..