Next.js 13 (App Router) 예상 면접 질문 (3)

 

 

20. Q: use client 지시어는 왜 필요하고 어디에 위치해야 하나요?
A: 클라이언트 전용 컴포넌트임을 명시하기 위해 필요하며, 파일 최상단에 선언해야 합니다. 이 선언이 있어야 상태, 이벤트, 훅 등이 작동합니다.

💡 설명:

• 하위 컴포넌트도 클라이언트로 인식
• 지시어 누락 시 서버 컴포넌트로 처리되어 오류 발생
• build 시 자동 구분되지 않으므로 명시 필요

21. Q: middleware.ts는 App Router에서도 사용할 수 있나요?
A: 네, App Router에서도 사용할 수 있으며, 요청 전단에서 리다이렉트, 인증 검사 등을 처리합니다. Next.js Edge Runtime에서 실행됩니다.

💡 설명:

• /middleware.ts 파일로 루트에 생성
• 쿠키 기반 인증 처리 가능
• 빠르고 가벼운 실행 환경 (Edge)

 

22. Q: app/api 디렉토리는 어떤 역할을 하나요?
A: API 라우트를 정의하는 디렉토리로, 클라이언트나 외부에서 호출할 수 있는 백엔드 핸들러를 구성할 수 있습니다. 기존 pages/api의 App Router 버전입니다.

💡 설명:

• Route Handler는 GET, POST 등 메서드 기반으로 정의
• TypeScript 사용 가능
• 클라이언트 요청 시 /api/... 경로로 접근

 

23. Q: 환경변수 사용 시 주의할 점은 무엇인가요?
A: 클라이언트에서 사용하는 변수는 반드시 NEXT_PUBLIC_ 접두사를 붙여야 하며, 그렇지 않으면 서버에서만 접근할 수 있습니다.
💡 설명:

• 서버 변수는 .env에 정의 후 process.env.KEY로 사용
• 클라이언트에 노출되면 안 되는 값은 절대 노출 금지
• 변수 변경 시 서버 재시작 필요

 

24. Q: 서버에서 에러가 발생했을 때 어떻게 로깅하나요?
A: 서버 컴포넌트 또는 API Route에서 try-catch와 console.error, Sentry 같은 도구를 활용해 로깅할 수 있습니다.
💡 설명:

• 에러 추적 도구와 연동 가능
• 사용자에게는 error.tsx 등으로 graceful degradation 처리
• 서버 로그와 브라우저 콘솔 로그를 분리해 관리

 

25. Q: App Router는 코드 스플리팅을 어떻게 처리하나요?
A: 라우트 단위로 자동 코드 분할이 적용되며, 페이지별로 필요한 컴포넌트만 로딩합니다. 초기 로딩 시간을 줄이고 퍼포먼스를 개선합니다.
💡 설명:

• React의 lazy loading과 유사한 개념
• 중첩 레이아웃도 분할 가능
• 공통 컴포넌트는 shared chunk로 묶여 효율적 관리

 

26. Q: 중첩 레이아웃의 장점은 무엇인가요?
A: 레이아웃을 계층적으로 구성하여 경로별로 다른 레이아웃을 재사용할 수 있습니다. UI 일관성과 유지보수성이 크게 향상됩니다.
💡 설명:

• /dashboard 전용 레이아웃 구성 가능
• 공통 header/footer와는 분리된 구조
• 디렉토리마다 개별 layout.tsx 선언 가능

 

27. Q: App Router에서 클라이언트 사이드 라우팅(CSR)은 어떻게 처리하나요?
A: use client를 선언한 컴포넌트에서 useRouter, Link 등을 통해 CSR을 구현합니다. React 상태와 이벤트 처리도 가능합니다.
💡 설명:

• 상태 관리, 이벤트 핸들링은 클라이언트에서 처리
• CSR 화면 전환은 빠르지만 초기 로딩은 느릴 수 있음
• 필요한 경우 클라이언트 전용 페이지도 작성 가능

 

28. Q: App Router에서 페이지 접근 권한 제어는 어떻게 하나요?
A: middleware 또는 서버 컴포넌트 내부 로직으로 인증 정보를 검사하고, 조건에 따라 redirect 처리합니다.
💡 설명:

• 토큰 유무 확인 후 로그인 페이지로 이동
• 세션 체크는 서버 fetch에서 수행
• 클라이언트에서 인증 토큰은 반드시 안전하게 관리

 

29. Q: App Router 도입 시 팀 프로젝트에서 고려해야 할 점은 무엇인가요?
A: 기존 Pages Router와 구조가 완전히 달라 팀원 모두의 학습이 필요합니다. 서버/클라이언트 컴포넌트의 구분도 명확히 해야 합니다.
💡 설명:

• 초기 마이그레이션 전략이 필요
• 코드 컨벤션, 디렉토리 구조 통일 필요
• SSR, CSR, RSC 개념 모두 숙지 필요

 

30. Q: Next.js 13의 App Router를 실제 실무에서 도입하는 장점은 무엇인가요?
A: 성능 향상, 유연한 라우팅, 최신 React 기능 통합 등 여러 장점이 있습니다. 특히 서버 중심의 렌더링 전략이 SEO와 초기 로딩 속도에 유리합니다.
💡 설명:

• React Server Components 지원
• 중첩 레이아웃과 자동 코드 분할
• 실무에서 확장성과 유지보수가 뛰어남