Question 1

loading.tsx와 error.tsx의 동작 원리를 설명해주세요.

Accepted Answer

둘 다 App Router의 **파일 컨벤션으로 React의 경계 컴포넌트를 자동 생성**하는 장치입니다.

### **loading.tsx**

그 세그먼트를 **자동으로 Suspense로 감싸고**, 서버 컴포넌트가 데이터를 기다리는 동안 이 파일의 UI(스켈레톤 등)를 보여줍니다.

- Streaming SSR과 결합되어, 로딩 UI가 먼저 전송되고 콘텐츠가 준비되면 교체됩니다.
- **중첩 라우트에서 세그먼트마다 독립적인 로딩 UI**를 가질 수 있습니다 — 대시보드 전체가 아니라 느린 패널만 스켈레톤이 뜨게 만들 수 있습니다.

### **error.tsx**

그 세그먼트를 **자동으로 Error Boundary로 감쌉니다.** 렌더링 중 에러가 나면 페이지 전체가 죽는 대신 이 파일의 폴백 UI가 표시됩니다.

- **반드시 Client Component**여야 합니다(`'use client'`). 에러 상태를 담고 재시도 버튼 같은 상호작용이 필요하기 때문입니다.
-

Question 2

Next.js Image 컴포넌트의 최적화 전략을 상세히 설명해주세요.

Accepted Answer

`next/image`는 이미지를 **요청 시점에 자동으로 최적화**해서 성능 문제의 큰 축인 이미지 비용을 줄입니다.

### **자동으로 해주는 것**

- **포맷 변환** — 브라우저가 지원하면 WebP/AVIF로 변환해 전송량을 줄입니다.
- **리사이징** — 요청된 표시 크기에 맞게 서버에서 줄여 보냅니다. 원본 대형 이미지가 그대로 내려가는 일을 막습니다.
- **Lazy Loading** — 기본값으로 뷰포트에 들어올 때만 로드합니다.
- **CLS 방지** — width/height(또는 fill)로 자리를 미리 확보해 이미지 로드 시 레이아웃이 밀리지 않게 합니다.
- **반응형** — sizes 힌트에 따라 디바이스별로 적절한 해상도를 고르는 srcset을 생성합니다.

### **핵심 속성**

- **priority** — LCP에 해당하는 히어로 이미지에 붙입니다. lazy 대신 preload되어 최대 콘텐츠풀 페인트가 앞당겨집니다.
- **placehol

Question 3

넥스트.js를 사용하는 이유와 장점은 무엇인가요?

Accepted Answer

Next.js는 React 기반 **풀스택 프레임워크**입니다. React는 UI 라이브러리일 뿐이라 라우팅·번들링·SSR·데이터 패칭을 직접 조립해야 하는데, Next.js는 이것들을 **의견을 가진 기본값**으로 통합 제공합니다.

### **핵심 장점**

**1. 렌더링 전략을 페이지·컴포넌트 단위로 선택**

정적 콘텐츠는 SSG, 주기적으로 갱신되는 목록은 ISR, 개인화 화면은 SSR, 인증 뒤 상호작용 화면은 CSR — **한 앱 안에서 섞어 쓸 수 있다는 것**이 핵심입니다.

**2. React Server Components**

서버에서만 실행되는 컴포넌트로 DB에 직접 접근하고, 그 코드는 **클라이언트 번들에 포함되지 않습니다.** 무거운 파서나 유틸 라이브러리를 서버에 두면 번들이 그만큼 줄어듭니다.

**3. 파일 기반 라우팅** — 폴더 구조가 곧 URL이고, layout.tsx로 중첩 레이아웃이 상태를 유지한 채 공유됩니다.

**4. 내장 최적화**

Question 4

앱 라우터와 페이지 라우터의 차이점은 무엇인가요?

Accepted Answer

Next.js 13에서 도입된 App Router(`app/`)는 **React Server Components 기반의 새 라우팅 모델**이고, Pages Router(`pages/`)는 기존 방식입니다. 한 프로젝트에 **공존이 가능**해서 라우트 단위로 점진 이전할 수 있습니다.

### **주요 차이**

- **기본 컴포넌트** — Pages는 전부 클라이언트 컴포넌트, App은 **기본이 서버 컴포넌트**입니다.
- **레이아웃** — Pages는 전역 `_app` 하나였지만, App은 **layout.tsx를 중첩**할 수 있고 페이지 이동 시 리렌더 없이 유지됩니다.
- **데이터 패칭** — Pages는 `getServerSideProps`·`getStaticProps`를 페이지 최상단에서만 쓰고 props로 내려보냈지만, App은 **필요한 컴포넌트가 직접 async/await로** 가져옵니다. prop drilling이 사라지고, 같은 요청 안의 중복 fetch는

Question 5

넥스트.js의 하이드레이션 오류란 무엇인가요?

Accepted Answer

하이드레이션은 **서버가 만든 정적 HTML에 클라이언트 React가 이벤트와 상태를 붙여 상호작용 가능하게 만드는 과정**입니다. 이때 서버 HTML과 클라이언트의 첫 렌더 결과가 **다르면** 하이드레이션 오류가 발생합니다.

### **왜 문제인가**

React는 성능을 위해 "서버 HTML과 클라이언트 첫 렌더가 같다"고 **가정**합니다. 다르면 그 트리를 버리고 클라이언트에서 다시 그리므로 SSR의 이점이 사라지고, 깜빡임·잘못된 UI·이벤트 미연결이 생깁니다.

### **주요 원인**

- **서버와 클라이언트에서 값이 달라지는 코드** — 현재 시각, 랜덤 값. 서버 렌더 시점과 클라이언트 렌더 시점의 값이 다릅니다.
- **브라우저 전용 API를 렌더 중 사용** — window 크기, localStorage 값. 서버에는 존재하지 않습니다.
- **`typeof window` 분기로 렌더 결과를 바꾸는 것** — 서버에서는 안 그리고 클라이언트에서 그리면 그 자

Question 6

넥스트.js 앱을 배포할 때 고려해야 할 사항은 무엇이고, 어떤 플랫폼을 주로 사용하나요?

Accepted Answer

### **먼저 출력 모드부터 정합니다**

- **Node 서버(기본)** — SSR·ISR·Route Handlers·Middleware 등 모든 기능을 지원합니다. Vercel이나 자체 Node 서버에 올립니다.
- **Standalone** — 같은 기능을 지원하면서 의존성을 최소로 묶은 번들을 만듭니다. **Docker로 배포할 때** 씁니다.
- **Static Export** — 순수 정적 파일만 내보냅니다. SSR·ISR·Middleware·이미지 최적화를 **못 쓰므로**, 나중에 SSR이 필요해지는 흔한 실수를 피하려면 기능 요구사항을 먼저 확정해야 합니다.

### **배포 체크리스트**

- **환경변수(보안 직결)** — `NEXT_PUBLIC_` 접두사가 붙은 값은 **빌드 시 클라이언트 번들에 인라인되어 브라우저에 노출**됩니다. 공개 전제인 값만 붙이고, 시크릿에는 절대 붙이면 안 됩니다. 또 빌드 타임에 고정되므로 환경별로 재빌드가 필요합니다.
- **

Next.js

11loading.tsx와 error.tsx의 동작 원리를 설명해주세요.보통App Router

12Next.js Image 컴포넌트의 최적화 전략을 상세히 설명해주세요.보통최적화

13넥스트.js를 사용하는 이유와 장점은 무엇인가요?보통핵심 개념

14앱 라우터와 페이지 라우터의 차이점은 무엇인가요?보통App Router

15넥스트.js의 하이드레이션 오류란 무엇인가요?보통렌더링

16넥스트.js 앱을 배포할 때 고려해야 할 사항은 무엇이고, 어떤 플랫폼을 주로 사용하나요?보통배포