본문 바로가기
반응형

Dev. Yelee ˗ˋˏϟˎˊ˗99

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.
MUI Error :: The `MuiMenuItem` component increases the CSS specificity of the `selected` internal state 📍 문제사항 회사에서 MUI기반의 UI를 사용하고 있는데 Custom이 필요한 부분은 styleOverrides로 수정하고 있다. 여기서 MenuItem의 높이는 38px, selected된 MenuItem의 backgroundColor는 red로 지정하고 싶어 아래와 같이 코드를 작성했다. root 아래 클래스 선택자를 이용하여 style을 입히는 방법도 있지만 selected, disabled등의 키가 자동 import 되기 때문에 아래와 같이 작성했다 MuiMenuItem: { styleOverrides: { root: { height: `38px`, }, selected: { backgroundColor: `red` }, }, }, 그 런 데 .. 콘솔에 아래와 같은 로그가 에러 로그가 찍혔다 클.. 2023. 8. 7.
반응형

티스토리툴바