번들사이즈줄이기1 Next.js 페이지 성능 개선 - svg sprites 적용하기 기존에 내가 svg를 프로젝트 내에서 관리하던 방식은 다음과 같다. 우선 프로젝트 내에서 나는 styled-components를 이용하여 스타일링을 적용하고 있었다. 각각 페이지나 큰 규모의 컴포넌트에 해당하는 스타일링 파일을 생성하고 모두 프로젝트 루트 밑에 styles/components 폴더 내에 페이지 이름.js 라는 파일을 생성하여 관리했다. styles/componets |_ home.js |_ search.js |_ user.js 각각 스타일링 파일의 하단에 svg를 다음과 같이 정의해두었다. svg별로 이름을 지어주고 export하여 필요한 컴포넌트에서 import하는 방식을 사용 중이었다. 그중 path 길이가 엄청 긴 svg들도 있었다. 스타일링 파일을 불러올 때마다 그 파일 내에 정의.. 2024. 3. 22. 이전 1 다음
