web24 [CSS] 자식 요소보다 height가 1~2px 늘어나는 경우 SVG를 로 감쌌을 때 height가 1~2px 정도 늘어나는 이유는 SVG가 기본적으로 인라인 요소로 취급되기 때문입니다. 이로 인해 인라인 요소의 특성인 베이스라인(baseline)과 관련된 여백이 추가될 수 있습니다. 이를 해결하려면 SVG를 블록 요소로 변환하거나, 부모 의 스타일을 조정하여 이러한 여백을 제거할 수 있습니다.다음은 이를 해결하는 몇 가지 방법입니다:방법 1: SVG를 블록 요소로 설정SVG를 블록 요소로 설정하여 베이스라인 여백을 제거할 수 있습니다. 방법 2: 부모 의 라인 높이 설정부모 의 line-height를 0으로 설정하여 추가 여백을 제거할 수 있습니다. 방법 3: vertical-align 속성 설정SV.. 2024. 11. 10. npm EACCES permissions errors 해결 방식sudo로 설치하거나 chown명령어로 권한 변경npm 기본 디렉토리를 수동으로 변경⇒ 위 방법 대신 nvm을 이용해서 npm 재설치 하기nvm 설치https://github.com/nvm-sh/nvm#introcurl -o- | bash환경변수 설정vim ~/.zshrcexport NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"[ -s "$NVM_DIR/nvm.sh" ] && \\. "$NVM_DIR/nvm.sh" # This loads nvmnvm으로 node 설치nvm install 18.20.4// 기본 버전 설정nvm alias default.. 2024. 11. 9. 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. 이전 1 2 3 4 다음
