대가는 결과를 만든다

목차 1. 번들러 2. Webpack 3. Rollup 4. Esbuild 5. Vite 간단 정리: 기존 브라우저에 모듈 기능이 없었던 시절을 위해 존재하는 번들링 과정 때문에, 개발과정에서 개발서버 실행 및 수정 코드 반영이 비효율적으로 느리다. 현재 네이티브 모듈 기능을 지원 하게된 모던 브라우저에 맞춰 개발서버 실행 시 번들링없이 빠르게 작업할 수 있도록 개발자 경험을 향상 시키고자 Vite가 등장했다. 1. 번들러 - 배경: ES Module(ES6 import) 미지원 -> 웹서비스 규모 커짐에 따라 코드 방대해짐 -> 분리(전역객체를 사용) -> 모듈 시스템 필요! - 기본 역할: 필요한 모든 종류의 파일들을 모듈단위로 나누어 최소한의 파일 묶음(번들)로 만들어주는 역할 - 추가적인 역할: ..

1. Intro 어댑터란? 가장 가까이 볼 수 있는 어댑터의 예 - 충전기 타입이 micro usb-b인데 스마트폰의 usb-c라면, 충전기에 usb-c타입으로 전환하기 위한 어댑터를 끼워주어야 한다. 2. 어댑터 패턴 - 클래스의 인터페이스를 사용자가 기대하는 다른 인터페이스로 변환하는 패턴으로, 호환성이 없는 인터페이스 때문에 함께 동작할 수 없는 클래스들이 함께 작동하도록 해준다. - 인터페이스 호환성 문제 때문에 같이 쓸 수 없는 클래스들을 연결해서 사용하기 위해 사용하는 패턴 - 이미 존재하는 타입/인터페이스/구조에 다른 인터페이스에 적응 시켜주는 역할을 하는 adapter를 사용한다. - 다른 추상/인터페이스 유형의 인스턴스를 생성자에서 받는다. 어댑터가 그의 메서드들에 대한 호출을 수신하면,..

개발자 경험 개선이라는 목표를 가지고 출시된 웹프론트엔드 빌드 툴 esbuild, Vite에 대해 정리해본다. 개발자가 로컬에서 개발서버를 실행할 때, 기존에 사용하는 Webpack, Rollup, Parcel 같은 툴들은 개발자가 작성한 소스코드와 node_modules 폴더의 전체 코드 베이스를 번들로 묶고, 빌드 프로세스(Babel, Typescript 트랜스파일링 또는 PostCSS)를 통해 번들된 코드를 브라우저에 제공한다. 수정할 때마다 매번 새롭게 빌드 되야했다. 이 모든 작업은 캐싱과 최적화를 하더라도 개발서버를 느리게 만들 수 있다. 번들러? 어플리케이션에서 필요한 모든 종류의 파일들을 모듈단위로 나누어 최소한의 파일 묶음(번들)로 만들어주는 역할을 한다. 자바스크립트에도 모듈 개념이 등..

1. 유니온, 교차 타입 - 실제 사용할 때는 안 햇갈리는데 개념이 가끔 햇갈릴 때가 있음 - Card | Account - 유니온 : 교집합을 생각하면 됨! 두개 이상의 타입이 공통으로 가지고 있는 속성을 타입으로 정함 interface Card { name: string id: string pay(): void } interface Account { name: string id: string transfer(): void } // Card와 Account가 모두 가지고 있는 교집합 속성 name, id 속성이 있으면 파라미터 타입 허용한다. // (두 타입을 모두 허용한다는 의미가 되어 합집합이 아닌가? 라는 생각이 들어 햇갈릴 수 있음) const doSomething = (payment: Card..

태그 삭제하기 1. -d 옵션을 사용하여 local에서 태그 삭제 # git tag -d v1.0.0 2. 원격 저장소에 올라간 태그를 삭제하기 위해 :를 사용 # git push origin :v1.0.0

QR코드 이미지를 전체화면으로 출력하는 예시 const html = document.querySelector('html'); //qr code가 담겨 있는 img dom element 객체로 resource 가져오기 const printContents = document.querySelector(`.qr-code-container`).childNodes[0]; const imgResource = printContents.toDataURL(); //출력할 img dom을 담을 container div 생성 const printDivContainer = document.createElement('div'); printDivContainer.style = ` width:100%; height: 100%; di..

vue에서 this.$router.push를 이용해 페이지를 이용할 때 현재 페이지 URL과 동일한 경로로 push하는 경우에는 이와 같은 에러가 발생한다. 현재 페이지와 같은 페이지인지 체크하는 로직을 추가해서 개선이 가능하다.

1. WebGLReneder에서 shadow 사용을 활성화 해줘야 한다. RENDERER.shadowMap.enabled = true; 2. light object와 shadow를 유발시키는 object에 castShadow를 활성화 해줘야 한다. OBJECT.castShadow = true 3. shadow가 표현될 물체에 receiveShadow를 활성화 해줘야 한다. OBJECT.receiveShadow = true; ** 참고 ** - 여러 Children Mesh를 보유한 Mesh의 경우 Parent Mesh에 castShadow나 receiveShadow를 활성화한다고 해서 표현되지 않는다. 하위 Mesh에서 활성화 해줘야 표현이 정상적으로 된다. Object3D의 method인 travers..