[중요도 낮음] ESLint의 promise/param-names 규칙
해당 경고는 eslint-plugin-promise 의 param-names 규칙에 의해 발생한 것. 새로운 Promise 객체를 생성할 때 매개변수의 이름과 순서를 일관되게 사용하도록 강제합니다. 따라서 매개변수 이름을 resolve 와 reject 로 지정하고, 이...
shadcn UI 'Cannot read properties of undefined (reading 'resolvedPaths')' 오류 해결 방법
2025년 02월 06일 기준 발생하고 있는 Error입니다. shadcn UI를 프로젝트에 추가하려다 'Cannot read properties of undefined (reading 'resolvedPaths')'라는 에러를 마주쳤다면 components.json ...
Sharp를 이용해 이미지 Jpeg to WebP 변환 후 S3에 업로드하기
이미지 용량을 줄이면 페이지 로딩 속도가 개선되고, 사용자 경험도 좋아집니다. Sharp 라이브러리를 사용하면 JPEG, PNG 등 다양한 포맷의 이미지를 WebP 로 간단하게 변환하고, 변환된 이미지를 AWS S3 에 업로드 할 수 있습니다. 필요 @aws-sdk/c...
Next.js Server Action 큰 용량 이미지 업로드하기 (413 Payload Too Large)
Next.js로 웹 애플리케이션을 개발하다 보면, 대용량 이미지를 업로드해야 하는 상황이 종종 생깁니다. 그러나 기본 설정 그대로라면 용량 제한(body size limit)에 걸려 업로드가 실패할 수 있습니다. 문제를 어떻게 해결하는지, Next.js 13+ 버전에서...
Next.js 15 App Directory 폴더 구조 알아보기
├── src/ │ ├── app/ │ │ ├── (auth)/ # 인증이 필요한 라우트 그룹 │ │ │ ├── dashboard/ │ │ │ ├── profile/ │ │ │ └── layout.tsx │ │ ├── (marketing)/ # 마케팅/공개 페이지 라우...
Tailwind CSS에서 line-clamp로 텍스트 줄 수 제한하기
line-clamp 유틸리티는 Tailwind CSS에서 텍스트의 표시 줄 수를 제한할 때 유용합니다. 이를 통해 긴 텍스트가 일정 줄 수 이상 넘지 않도록 하고, 나머지는 줄임표(...)로 표시할 수 있습니다. 1. line-clamp 유틸리티 활성화 Tailwind...
Next.js와 Tailwind CSS에서 일본어(외국어) 폰트 적용하기
Next.js와 Tailwind CSS에서 일본어 폰트를 적용하는 방법에 대한 가이드입니다. 일본어 폰트를 사용하려면 웹 폰트를 로드하거나 로컬 폰트를 사용할 수 있습니다. Next.js 14버전↑사용 시 4번!! 1. Google Fonts로 일본어 폰트 적...
Next.js 14 배포 시 캐시 문제 해결하기
Next.js 14의 App Router는 기본적으로 여러 레이어에서 캐싱을 수행합니다. ※ Next.js 15버전을 사용합시다!! 캐싱이란? 프론트엔드 : 브라우저에서 CSS, JS 파일을 캐시하여 페이지 로딩 속도를 향상. 백엔드 : 서버에서 자주 조회되는 데이터를...
Next.js에서 next/script를 사용하여 Google Analytics 통합하기
왜 Next.js에서 Google Analytics를 사용해야 하나요? Google Analytics를 사용하면 페이지 조회수, 사용자 상호작용, 전환 등 중요한 메트릭을 측정할 수 있어 데이터 기반의 결정을 내리는 데 도움이 됩니다. Next.js와 통합함으로써 서버...
Tailwind CSS Overflow 속성 가이드
overflow 속성은 웹 페이지 요소의 콘텐츠가 요소의 크기를 벗어날 때 어떻게 처리될지를 결정하는 중요한 CSS 속성 중 하나입니다. Tailwind CSS는 overflow 유틸리티 클래스를 통해 간편하게 요소의 콘텐츠 처리 방식을 제어할 수 있습니다. Tailw...
Tailwind CSS Position 속성 가이드
Tailwind CSS Position 유틸리티 클래스 종류 Tailwind CSS에서는 HTML 요소에 위치 지정 속성을 쉽게 적용할 수 있도록 다음과 같은 position 유틸리티 클래스를 제공합니다. static: 요소를 문서의 일반적인 흐름에 따라 배치합니다. ...
Next.js에서 IP 주소를 이용한 사용자 분류 방법
사용자의 IP 주소를 기반으로 위치 정보를 추출하여 Next.js 애플리케이션에서 사용자 맞춤형 경험을 제공하는 방법을 소개합니다. 이 글에서는 Next.js의 middleware 를 사용하여 사용자를 위치에 따라 분류하는 간단한 방법을 다룹니다. Geolocation...