반응형 분류 전체보기188 emotion/css 와 emotion/react의 css사용 차이는 뭘까? 리액트의 공통 라이브러리 만드는 중에 CSS In JS중 emotion을 사용하고 있었습니다. 기존 프로젝트에서 emotion/css와 emotion/react 2개의 라이브러리를 import하여 사용하고 있었는데 이 두개의 차이점이 궁금해져서 제가 찾은 내용을 공유해보려고 합니다. 먼저 라이브러리 비교를 하자면 아래와 같습니다 1. emotion/react emotion/react는 Emotion 라이브러리의 React용 기능을 포함합니다. 이 패키지를 사용하면 React 애플리케이션에서 Emotion의 강력한 CSS-in-JS 기능을 사용할 수 있습니다. Emotion의 styled API를 활용하여 React 컴포넌트를 스타일링하는 데 주로 사용됩니다. styled API를 사용하면 컴포넌트를 정의.. 2023. 7. 23. 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. 이전 1 2 3 4 5 6 ··· 47 다음 반응형