본문 바로가기
반응형

Dev. Yelee ˗ˋˏϟˎˊ˗100

Rollup을 활용한 번들링 최적화 (Import cost 줄이기) - 2편 Rollup을 활용한 번들링 최적화 (Import cost 줄이기) - 1편 이슈를 발견하고 해결하는 삽질,, 아 아니 과정을 포스팅 하겠습니다 👿 이슈 MUI(Material-UI) 기반으로 개발된 부서 공통 컴포넌트 라이브러리에서 하나의 컴포넌트를 가져올 때 해당 모듈의 사이 yelee.tistory.com 앞서 작성한 1편에 이어 2편에서 해결 과정을 포스팅해보겠습니다 🥳 해결 과정 이슈가 있는 코드로 돌아와 rollup.config.js 파일을 살펴보았습니다. import resolve from '@rollup/plugin-node-resolve'; import commonjs from '@rollup/plugin-commonjs'; import typescript from '@rollup/plu.. 2023. 10. 11.
Rollup을 활용한 번들링 최적화 (Import cost 줄이기) - 1편 이슈를 발견하고 해결하는 삽질,, 아 아니 과정을 포스팅 하겠습니다 👿 이슈 MUI(Material-UI) 기반으로 개발된 부서 공통 컴포넌트 라이브러리에서 하나의 컴포넌트를 가져올 때 해당 모듈의 사이즈가 MUI의 컴포넌트 사이즈에 비해 크게 측정되는 것을 발견했습니다. 또한 Button과 ButtonGroup 등 다른 컴포넌트임에도 동일한 사이즈로 측정되는 현상을 확인했습니다. 🙄 원인 파악 과정 1. 부서 공통 컴포넌트 라이브러리 코드 분석하기 부서 공통 UI 컴포넌트는 rollup을 통해 번들링 되고 있으며 cjs(Common JS)와 esm(ES Modules)포맷 모두 지원하고 있었습니다. 리액트 프로젝트에서 import/export 문으로 모듈을 불러오고 내보내고 있으므로, esm 포맷으로 .. 2023. 10. 6.
자바스크립트 slice()와 splice()의 차이 1. Slice slice() 메서드는 배열의 일부를 추출하여 새로운 배열을 반환 기존 배열은 변경되지 않는다 const originalArray = [1, 2, 3, 4, 5]; const newArray = originalArray.slice(1, 4); // [2, 3, 4] console.log(originalArray); // [1, 2, 3, 4, 5] (원본 배열 변화 없음) 2. splice splice는 배열을 수정하는 것! 원본 배열에서 요소를 제거하거가 추가, 교체 가능 const originalArray = [1, 2, 3, 4, 5]; const removedElements = originalArray.splice(1, 2); // removedElements: [2, 3] con.. 2023. 8. 30.
자바스크립트(Javasciript) 나누기 몫 구하기 1. Math.floor() 소수점 이하를 버리는 method var q = Math.floor(13 / 5) console.log(q) // 2 2. Math.trunc() 소수점 이하를 전부 삭제하고 정수를 return하는 method var q = Math.trunc(13 / 5) console.log(q) // 2 3. parseInt 정수로 return 하는 method var q = parseInt(13 / 5) console.log(q) // 2 4.~~(num1/num2) 더블 틸트 연산자 var q = ~~(13 / 5) console.log(q) // 2 속도는 4 > 1 > 3 (빠름->낮음) 이라고 합니다 참고 : https://dev.to/asadm/the-mysterious-do.. 2023. 8. 23.
반응형