Question 1

Server Actions란 무엇이며 어떻게 사용하나요?

Accepted Answer

Server Actions는 **클라이언트에서 직접 호출할 수 있는 서버 함수**입니다. `'use server'` 지시어로 선언하며, API Route를 따로 만들지 않고도 폼 제출이나 데이터 변경 같은 서버 로직을 실행할 수 있습니다.

### **어떻게 쓰는가**

- **폼과 연결** — form의 action에 Server Action을 넘기면, 제출 시 FormData가 서버 함수로 전달됩니다. 함수 안에서 DB에 쓰고 `revalidatePath`로 관련 화면을 갱신하는 흐름이 전형적입니다.
- **Client Component에서 호출** — 버튼 클릭 등 이벤트 핸들러에서 일반 함수처럼 호출할 수 있습니다. `useTransition`으로 감싸면 처리 중 상태를 표시할 수 있고, `useOptimistic`과 조합하면 서버 응답 전에 UI를 먼저 바꾸는 낙관적 업데이트도 가능합니다.

### **장점**

- **별도 API 엔드포인트가 필요 없습니다.** 엔드포인트

Question 2

Parallel Routes와 Intercepting Routes를 설명해주세요.

Accepted Answer

둘 다 App Router의 고급 라우팅 패턴으로, **폴더 이름 규칙**으로 동작합니다.

### **Parallel Routes — @슬롯**

하나의 레이아웃 안에서 **여러 페이지를 동시에 렌더링**합니다.

`@analytics`, `@team`처럼 `@`로 시작하는 폴더를 만들면, 레이아웃이 children 외에 각 슬롯을 **별도의 props로** 받아 원하는 위치에 배치합니다. 각 슬롯은 **독립적인 loading·error 상태**를 가질 수 있어서, 한 패널이 느리거나 실패해도 다른 패널에 영향을 주지 않습니다.

대시보드처럼 성격이 다른 영역 여러 개를 한 화면에 두는 UI에 적합하고, 매칭되지 않는 슬롯의 폴백은 `default.tsx`로 정의합니다.

### **Intercepting Routes — (..) 표기**

**다른 경로의 콘텐츠를 현재 레이아웃 안에서 가로채어** 표시합니다. 폴더명의 괄호 표기가 가로챌 대상의 상대 위치를 나타냅니다 — `(.)

Next.js

01Server Actions란 무엇이며 어떻게 사용하나요?어려움Server Actions

02Parallel Routes와 Intercepting Routes를 설명해주세요.어려움App Router