반응형 프로그래밍109 storybook 7.0.26 부터 next.js의 NextImage 지원 기존에는 Next.js에서 storybook사용시 NextImage적용된 컴포넌트를 스토리북에서 띄울려면 아래와 같은 작업을 해야만했습니다 import * as NextImage from 'next/image'; const OriginalNextImage = NextImage.default; Object.defineProperty(NextImage, 'default', { configurable: true, value: (props) => ( ), }); 이제 storybook 7.0.26 부터 위 Object.defineProperty 코드를 넣을 시 중복 default가 있다고 하면서 오류를 낼 것입니다. 기본적으로 storybook에 포함되어 있기 때문에 이제 위 코드는 지워주셔야 합니다. 앞으로 .. 2023. 7. 7. nextjs 13.4 버전에서 storybook 7버전 실행시 오류 발생 nextjs 13.4버전에서 storybook 7 버전 이상 실행시 (webpack5) 오류가 발생합니다. 해당오류의 목록은 아래와 같습니다 1. fs모듈 없음 ModuleNotFoundError: Module not found: Error: Can't resolve 'fs' in '*node_modules/next/dist/compiled/gzip-size' 2. stream-browserify polyfill 오류 If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }' - install 'stream-browseri.. 2023. 7. 7. 이미지 지연 로딩 라이브러리 어떤걸 써야할까? 웹 사이트 개발 시 사용자가 보여지는 부분만 로딩시키기 위해 지연로딩이란 기술을 사용합니다. react프로젝트에서 이 지연로딩을 해주는 라이브러리들이 있는데 오늘 어떤것을 사용해야할지 고민이 들어서 정리해봅니다. react-lazy-load-image-component와 next/image은 모두 웹에서 이미지 로딩을 최적화하려는 목적으로 사용되는 라이브러리이지만, 기능과 사용법에서 차이가 있습니다. react-lazy-load-image-component 이 라이브러리는 이미지 로딩을 지연시키고 (lazy-loading), 뷰포트 내에 들어갈 때 이미지를 로드하는 데 초점을 맞추고 있습니다. 이를 통해 초기 페이지 로드 시간을 줄일 수 있습니다. 또한 placeholder 이미지나 spinner를 사용.. 2023. 7. 4. [next.js] 다이나믹 라우팅이 안될 때 파일 기반 라우팅 시스템에 익숙하지 않거나 잘못 이해하게 되면 라우팅 사용시 오류가 발생할 수 있습니다. 아래의 경우에 따라서 문제가 발생할 수 있으며 하고있는 프로젝트에 동일한 문제가 발생하고 있는지 체크하여 위 라우팅 문제를 방지할 수 있습니다. 1. 파일 및 폴더명 규칙 무시: Next.js의 파일 기반 라우팅은 페이지를 생성할 때 파일 및 폴더 이름을 사용합니다. 파일 이름에 불필요한 문자를 포함하거나, 필요한 문자를 누락하는 경우, 이로 인해 예상치 못한 라우팅 오류가 발생할 수 있습니다. 예를 들어, **pages/post/[id].js**라는 파일을 만들었을 때, 이 파일은 post/1, post/2와 같이 동적 라우트를 생성합니다. 만약 대괄호([, ])를 누락하여 **pages/post/.. 2023. 7. 2. 이전 1 2 3 4 5 6 ··· 28 다음 반응형