NextJS

NextJS - Prettier, ESLint 및 prettier-plugin-tailwindcss 설정하기 작성 일자 : 2024년 10월 06일   Prettier, ESLint NextJS 프로젝트에서 Prettier와 ESLint를 설정하는 방법에 대해 알아보겠습니다.  NPM 패키지 설치npm i -D prettiernpm i -D eslint eslint-config-prettier eslint-plugin-prettiernpm i -D @typescript-eslint/parser @typescript-eslint/eslint-plugin  Prettier 설정 .prettierrc 파일 생성touch .prettierrc  .prettierrc 작성{ "printWidth": 80, ..

NextJS - 블러 효과로 이미지 로드하기 작성 일자 : 2024년 09월 01일   1. 개요 프론트엔드에서 사용자 경험을 개선하는 방법 중 하나는 이미지가 로드되는 동안 블러 플레이스홀더를 사용하는 것입니다. 이번 블로그 포스트에서는 Next.js 애플리케이션에서 블러 효과를 사용하여 원격 이미지 로딩을 구현하는 방법을 살펴봅니다.   예시    2. 준비 작업 구현을 시작하기 전에 다음 사항이 필요합니다.npx create-next-app을 통해서 NextJS 프로젝트를 생성합니다.이미지 프로세싱을 위해서 sharp 패키지를 설치합니다. npm install sharp 명령어를 통해 설치할 수 있습니다.   3. 이미지를 불러오고 블러 효과 적용하기 먼저 원격 이미지를 가져와 처리할 유틸리티 함수..