SVG (3) 썸네일형 리스트형 [트러블 슈팅] SVG 속성 오류 해결하기 - <svg> Height 속성에서 Expected length, "auto" 오류를 수정하는 방법 발생한 오류 🔥 SVG의 `height` 속성을 `auto`로 설정했을 때 발생한 오류였습니다. 해결 과정 🔎HTML, CSS에선 `height`에 `auto`를 사용해 콘텐츠의 높이를 유동적으로 설정할 수 있지만, SVG의 `height` 속성은 `length`값 (예시: `px`,`%`)으로 지정해야 합니다. 따라서 `auto`는 SVG 표준에서 요구하는 유효한 `length`값이 아니어서 오류가 발생했습니다. 해결 방법 ✨수정 후 이 문제를 해결하기 위해 `height`속성을 `auto`에서 `100%`로 변경했습니다. 회고 🧐SVG 속성값을 지정할 때 표준을 준수하고 HTML과 CSS의 차이를 고려해 적절한 속성값을 사용하는 것이 좋을 것 같습니다!출처 🏷️https://github... [리팩토링] Icon 컴포넌트 리팩토링 이번엔 프로젝트에서 많이 사용하는 Icon 컴포넌트를 리팩토링한 경험을 공유해 보려고 합니다.SVG 아이콘을 쉽게 사용할 수 있도록 배경색과 반경 조정, 동적 사이즈 스케일링을 추가했습니다! 기존 코드 문제 📖기존 Icon 컴포넌트는 각각 아이콘을 렌더링 하는 기능만 가지고 있었습니다. ❗문제점 1. 중복되는 코드가 너무 많았고 유지보수가 어려운 점2. 사용자가 `배경색`와 `반경 설정`을 하려면 새로운 컴포넌트를 생성해서 사용해야 한다는 점에서 일관적인 스타일링의 어려움3. SVG 사이즈 조정 시 배경만 커지는 문제 다양한 사이즈를 사용하는 UI에서 큰 문제였습니다. 리팩토링 📖기존 Icon 컴포넌트// AlbumIcon.tsxexport const AlbumIcon = () => { retu.. [트러블 슈팅] SVG 컴포넌트 재사용 시 발생한 이미지 중복 문제 해결하기 발생한 오류 🔥날씨 API를 요청한 후 아이콘 URL을 가져와 `WeatherIcon`컴포넌트를 사용해 여러 개의 날씨 아이콘을 표시하려고 했습니다. 그러나 배열로 `WeatherIcon`을 렌더링 했을 때, 모든 아이콘이 동일한 이미지만 표시되는 현상이 발생했습니다. 해결 과정 🔎처음에는 각 아이콘의 URL을 제대로 전달하고 있다고 생각했지만, 여러 개의 `WeatherIcon`컴포넌트를 렌더링할 때 브라우저가 첫 번째 요소의 이미지만을 참조하는 것을 깨닫지 못했습니다. 기존 코드const WeatherIcon = ({ url, className }) => { const URL = url ? `https://openweathermap.org/img/wn/${url}@2x.png` : "data.. 이전 1 다음
