전체 글
-
Next.js App Router(5) - 성능 최적화, 실전 팁Next.js 2025. 7. 2. 10:09
Next.js App Router 드디어 마지막 편인 성능 최적화와 실전 팁입니다.이번 편에서는 이전 편들의 총집 편이며, 실전적으로 바로 활용할 수 있는 방법들을 모아 봤습니다.1. 서버 우선 아키텍처 설계 설계: 번들 최소화를 위한 근본 접근 모든 UI는 기본적으로 Server Component로 구현하여 JS 번들에서 제외, 클라이언트 렌더링 부하 제거클라이언트 코드가 꼭 필요할 때만, 그리고 작은 단위로 분리해 use client 선언Next.js의 자동 코드 분할 덕분에 페이지 단위 JS 추출이 기본 제공2. 코드 분할 & lazy loading: 다음 단계 지연 로딩 next/dynamic과 React.lazy + Suspense 조합으로 대형 UI(모달, 차트 등)는 사용 시점에 로딩SSR ..
-
Next.js App Router(4) - 데이터 패칭 전략Next.js 2025. 6. 30. 10:05
이번 글에서는 Next.js App Router에서는 데이터 패칭에 대하여 알아보겠습니다.1. 왜 기본 fetch인가?Next.js는 fetch 최적화를 전제로 설계되어 있습니다.그래서 기본 fetch에 다음과 같은 기능이 붙어 있습니다. 서버 캐싱 (Data Cache)Revalidate 옵션 (ISR)Streaming & Suspense와 자연스러운 통합중복 요청 자동 방지 (Request Memoization) 반면 axios나 ky 등의 외부 라이브러리는 이러한 기능과 연결되지 않아, "Next.js가 제공하는 캐싱/스트리밍을 제대로 안 쓰는 것"과 같습니다.결국 기본 fetch를 사용하면 의존성도 줄고, 성능 최적화도 그대로 가져갈 수 있습니다.2. fetch의 기본 동작 방식: auto no-..
-
Next.js App Router(3) - 폴더 구조와 파일 역할Next.js 2025. 6. 27. 10:59
이번 편에서는 Next.js App Router의 page 파일 이외에 새롭게 추가된 파일들의 역할을 알아보고 효율적인 폴더 구조를 구성하는 방법에 대하여 알아보겠습니다. 1편에서 App Router에서 추가된 주요 파일들에 소개했는데요.다시 간단하게 작성해 보자면 다음과 같습니다.page.tsx: 각 경로의 메인 컴포넌트입니다. 서버 컴포넌트가 기본이며, 클라이언트 컴포넌트로 사용하려면 상단에 'use client'를 추가합니다.layout.tsx: 특정 경로 그룹에서 공통으로 사용되는 레이아웃을 정의합니다. 페이지 전환 시에도 상태가 유지됩니다.template.tsx: 페이지 전환마다 새 인스턴스로 생성됩니다. 상태를 초기화하고 싶을 때 사용됩니다.loading.tsx / error.tsx: 로딩 상..
-
Next.js App Router(2) - 서버 vs 클라이언트 컴포넌트Next.js 2025. 6. 25. 10:25
Next.js App Router에서 가장 큰 변화점은 기본적으로 모든 컴포넌트는 Server Component(서버 컴포넌트)라는 것입니다.이번 글에서는 Server Component와 Client Component에 대해 알아보겠습니다.1. Server Component의 장점과 역할서버 환경(Node.js)에서 렌더링DB 쿼리, 외부 API 호출, 비밀 키·토큰 활용 등 브라우저에서 노출되면 안 되는 모든 작업을 안전하게 처리할 수 있습니다.예시: 서버 컴포넌트 내에서 직접 DB에 접근하여 데이터를 가져오고, 이를 UI에 반영HTML 렌더링 및 전송서버에서 렌더링 된 HTML이 브라우저로 전달되어, JS 번들 없이도 빠르게 콘텐츠가 보임React의 클라이언트 훅, 브라우저 API 미사용useStat..
-
Next.js App Router(1) - Next.js의 새로운 패러다임 이해하기Next.js 2025. 6. 23. 14:13
Next.js가 App Router를 도입 한 13 버전 이후 벌써 15 버전이 되었습니다.기존에 Page Router를 사용하던 곳들도 이제는 App Router 도입을 고민하고 또 도입하고 있습니다.이번 글에서는 Next.js App Router가 등장한 배경, 철학, 그리고 Pages Router와의 차이점에 대해 알아보겠습니다.1. Next.js App Router의 등장 배경Next.js는 React를 기반으로 한 프레임워크로서 항상 React의 변화를 빠르게 도입하는 프레임워크입니다.React 18에서 도입된 Concurrent Rendering과 React Server Components(RSC) 지원은 기존 SPA 한계를 극복하기 위한 도전이었습니다.Next.js도 SPA의 한계를 깨고 더..
-
Portal만 쓰시나요? HTML 표준 Dialog, Popover API 알아보기Tip 2025. 6. 7. 19:51
React를 개발하다 보면 대부분 Portal을 사용해서 모달이나 팝업을 구현합니다.오늘은 Portal이 아닌 HTML의 표준 요소인 Dialog, Popover API를 알아보고 Portal이 아니라 Dialog나 Popover를 사용하는 경우에 대해서도 알아보도록 하겠습니다.1. PortalPortal은 컴포넌트 트리 바깥으로 DOM 요소를 렌더링 할 수 있게 하는 기술입니다.React에서는 ReactDOM.createPortal로 구현합니다.주로 모달이나 팝업처럼 현재 DOM 계층과 독립적인 UI 레이어를 만들고 싶을 때 많이 사용합니다.z-index 이슈가 복잡한 경우모달이 부모 컴포넌트의 overflow나 transform 등에 영향을 받지 않게 하고 싶을 때레이아웃과 별도로 레이어 UI를 관리..
-
AI 크롤러 차단해서 요금 폭탄 방지하기Tip 2025. 5. 25. 19:48
최근 사내에서 Vercel의 요금이 평소보다 많이 나오는 문제가 발생해 알아보니 meta-externalagent이 범인이었습니다.meta-externalagent는 Meta의 AI 크롤러로 무분별한 크롤링으로 대용량의 트래픽을 발생시켜 요금 폭탄을 유발한 것이었습니다. 이 글에서는 Meta의 meta-externalagent 뿐만 아니라 OpenAI의 GPTBot, Anthropic의 ClaudeBot, Google의 Google-Extended 등 다양한 Bot들을 차단할 전략을 다루겠습니다. 우리의 경우 다행히 아웃바운딩 요금 폭탄만 발생했지만, Vercel 이미지 최적화를 사용하거나 할 경우 더 끔찍할 수도 있습니다!만약 차단을 안 해두셨다면 얼른 차단을 통해 서버 비용 폭증을 막기를 권장드립니..
-
PandaCSS vs Tailwind CSS vs Vanilla Extract 비교 분석Tip 2025. 5. 11. 19:45
RSC(React Server Component)의 출시와 Next.js의 App Router 전환 뒤 전통적인 CSS-in-JS 방식의 한계로 더욱 각광받고 있는 Tailwind CSS, Vanilla Extract, PandaCSS를 비교해 보겠습니다.1. CSS-in-JS의 한계와 새로운 접근법의 필요성과거에는 styled-components나 Emotion과 같은 CSS-in-JS 런타임 스타일 생성 방식은 런타임에 JS로 스타일을 생성·주입하는 과정은 성능 오버헤드로 이어지고, SSR(서버사이드 렌더링) 환경에서는 추가 설정이 필요하거나 FOUC 문제가 발생하는 등의 단점이 명확했지만, 편리함이라는 장점이 너무 컸기에 폭넓게 사용되었습니다. 하지만 Next.js 13의 App Router 도입 ..