분류 전체보기33 CSS Specificity (CSS 명시성) CSS Specificity (명시성)클래스네임 선언 순서가 명시성을 보장하지 않는 경우가 있습니다. 이는 CSS의 기본적인 규칙과 React에서의 클래스네임 병합 방식 때문입니다. CSS의 우선순위는 주로 명시성(specificity), 선언 순서(order of appearance), 그리고 !important 규칙에 의해 결정됩니다. 그러나, 클래스네임 선언 순서만으로는 명시성을 보장할 수 없는 상황들이 있습니다. 그 이유는 다음과 같습니다:1. 명시성(Specificity)의 기본 규칙CSS 명시성은 선택자의 유형에 따라 점수가 매겨집니다:인라인 스타일: 1000점ID 선택자: 100점클래스, 속성, 의사 클래스 선택자: 10점태그, 의사 요소 선택자: 1점명시성이 높은 선택자가 우선순위를 갖습니.. 2024. 11. 8. 번들러 & NextJS turbopack에서 SVGR 세팅 번들러여러 개의 파일을 하나의 파일이나 몇 개의 파일로 묶어주는 도구. 이 과정을 번들링이라고 하고 웹 애플리케이션의 성능을 최적화하기 위해 사용합니다. (Webpack, Turbopack, Rollup)파일 결합: 여러 개의 모듈이나 파일을 하나로 결합하여 브라우저가 불러올 파일 수를 줄입니다.의존성 처리: 파일 간의 의존성을 파악하고, 적절한 순서로 번들에 포함합니다.코드 최적화: 코드 압축, 중복 제거, 코드 분할, 트리 쉐이킹 등을 통해 성능을 향상합니다.다양한 파일 형식 처리: CSS, 이미지, 폰트 파일 등 다양한 리소스를 처리한다.개발 편의성: 핫 리로딩, 트랜스파일링(Babel 사용)등을 통해 개발 환경 편의성을 제공합니다.Webpack loaderWebpack은 기본적으로 js와 json.. 2024. 11. 7. [React] VAC Pattern을 적용해 관심사 분리하기 VAC(View Asset Component) Pattern View Logic과 렌더링을 분리하여 개발하는 설계 방식 const SpinBox = () => { const [value, setValue] = useState(0); return ( setValue(value - 1)}>- {value} setValue(value + 1)}>+ ); }; VAC props를 통해서만 제어 되고 스스로 상태를 관리 하지 않는 Stateless component // VAC const SpinBoxView = ({ value, onIncrease, onDecrease }) => ( - {value} + ); // View Component const SpinBox = () => { const [value, s.. 2023. 12. 5. npm에서 yarn berry로 Migration to yarn berry 최근에 팀원이 yarn berry를 도입하자고 해서 마이그레이션을 시작했습니다. 빌드 시간을 단축할 수 있고 다른 회사들도 사용한다하여 좋나보다 하고 지나갔습니다. 그러한 무지 상태에서 작업을 하니 도중에 문제가 발생했습니다. 프로젝트 코드에서 의존성 명시 없이 라이브러리를 사용하고 있었는데 yarn berry로 마이그레이션을 하고 빌드를 하니 의존하지 않는 패키지에 접근하고 있다는 오류가 뜬 것 입니다. 아래에서 정리하겠지만 기존 npm 프로젝트에서는 유령 의존성에 의해 특정 패키지가 접근이 가능합니다. yarn berry로 넘어오니 접근이 안되는 게 불편하게 느껴졌습니다. 또한 마이그레이션 작업을 할 때 명시 하지 않은 패키지를 자동으로 추가해주는 방법이 없.. 2022. 11. 9. [정규식/RegExp] 실수 입력 시 정수부, 소수부 자리 제한(소수점 이하 자리 제한)/ input element에서 사용하기/ 음수를 포함 하는 경우 실수 정규식 /^([1-9]{1}\d{0,1}|0{1})(\.{1}\d{0,2})?$/g 정수는 2자리, 소수점 이하 2자리 까지 가능 정수부가 0으로 시작하면 1보다 커야한다 -> 023 불가능 0.34 가능 소수부 없어도 가능. input 엘리먼트에서 입력이 발생할 때 마다 반영하기 위해 작성한 정규식이므로 0. or 0.0 or 0.40 이와 같은 케이스는 통과시킨다 필요에 따라 수정할 수 있게 하나 하나 분석해보자 식 해석 [1-9] 1에서 9까지에 해당하는 숫자가 [1-9]{1} 1번 대응되고 [1-9]{1}\d 숫자(0-9)가 [1-9]{1}\d{0,1} 0~1번 대응된다 [1-9]{1}\d{0,1}| 또는 [1-9]{1}\d{0,1}|0 0이 [1-9]{1}\d{0,1}|0{1} 1번 대응된.. 2022. 3. 3. [Vue] vue-fragment 사용 시 발생하는 DOM Exception 해결 vue component는 하나의 root element를 가져야 한다. 따라서 다중 element가 있는 경우 하나로 감싸주기 위해서 태그를 사용하거나 vue-fragment 패키지를 사용할 수 있다. 태그로 감싸서 신나게 작업을 하다보면 다음과 같은 오류를 만날 수 있다. [Vue warn]: Error in nextTick: "NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.” DOMException: Failed to execute 'insertBefore' on 'Node': The node be.. 2022. 2. 28. 이전 1 2 3 4 5 6 다음
