NextJS

NextJS - shadcn/ui Dialog 전체 화면 작성일자 : 2025년 05월 30일 방법 1: h-[100dvh] Open Are you absolutely sure? This action cannot be undone. This will permanently delete your account and remove your data from our servers. 방법 2: max-h-[100dvh] Open Are you absolutely sure? This action cannot be undone. This will permanently delete yo..

React - 모바일 Pull-to-Refresh 방지하기 작성일자 : 2025년 05월 25일 Pull-to-Refresh란? Pull-to-Refresh는 모바일 애플리케이션에서 사용자가 화면을 아래로 끌어당겨 새로 고침을 수행하는 기능입니다. 일반적으로 리스트나 피드를 새로 고침할 때 사용됩니다. Pull-to-Refresh 방지하기 PreventPullToRefresh 컴포넌트 생성하기 PreventPullToRefresh 컴포넌트는 모바일 환경에서 Pull-to-Refresh 기능을 비활성화하는 역할을 합니다. 이 컴포넌트를 사용하면 터치 이벤트를 감지하여 기본 동작을 방지할 수 있습니다.// PreventPullToRefresh.jsimport React, { useEffect } f..

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. 이미지를 불러오고 블러 효과 적용하기 먼저 원격 이미지를 가져와 처리할 유틸리티 함수..