반응형 Next3 [Next] ReferenceError: window is not defined 목차 1. 원인 Next는 SSR로 서버에서 렌더링 된다. window 객체는 브라우저 환경에서만 정의되고 서버 환경에서는 window 객체가 존재하지 않기 때문에 이러한 오류가 발생함. 2. 해결 2-1. AS-IS const currentURL = window.location.href; const handleCopyClipBoard = async () => { try { alert("복사되었습니다."); } catch (error) { alert("다시 시도해주세요."); } }; return ( ); 2-2. TO-BE window 객체가 존재하는지 판단하는 코드를 추가해준다. const currentURL = typeof window !== 'undefined' ? window.location.h.. 2024. 2. 14. [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 다음 반응형
