반응형 StyledComponents2 [Next] Next+styled components에서 SVG 커스텀하기 목차 1. SVG 로더 설치 npm i @svgr/webpack 2. next.config.js 설정 module.exports = { webpack(config) { const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.('.svg'), ) config.module.rules.push( { ...fileLoaderRule, test: /\.svg$/i, resourceQuery: /url/, // *.svg?url }, { test: /\.svg$/i, issuer: fileLoaderRule.issuer, resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/.. 2024. 1. 8. [Next] Next.js + Styled Components 사용하기 목차 1. Next.js에서 styled components 사용 시 깜빡이는 현상 환경 Next 14.0.4 styled-components 6.1.6 프로젝트를 진행하면서 Next.js와 styled components를 사용할 때 아래와 같이 깜빡임이 발생했다. 🧐 깜빡임이 발생하는 이유 styled-components는 CSS in JS로, JS안에 CSS를 작성하는 것을 의미한다. Next.js는 SSR(Server Side Rendering)로 Hydrate 과정에서 다운로드 받은 JS를 통해 지정된 스타일 정보가 생기기 때문에 페이지 로드 시 스타일이 잠깐 누락되어 깜빡이는 현상이 발생한다. Hydrate ? Server Side 단에서 렌더링 된 정적 페이지와 번들링된 JS파일을 클라이언트.. 2024. 1. 8. 이전 1 다음 반응형
