Next.js 주니어 기술면접
새 면접Q. Next.js App Router에서 loading.js 파일의 역할과 동작 원리를 설명하고, Suspense와의 관계를 설명해주세요.
loading.js는 페이지나 레이아웃이 로딩되는 동안 자동으로 표시되는 폴백 UI를 정의하는 파일입니다. Next.js는 내부적으로 loading.js를 React Suspense로 감싸서 비동기 컴포넌트가 로드되는 동안 로딩 UI를 보여줍니다. 이를 통해 사용자에게 즉각적인 피드백을 제공하고, 별도로 Suspense를 작성하지 않아도 자동으로 스트리밍과 부분 렌더링을 지원합니다. 각 라우트 세그먼트마다 독립적인 loading.js를 배치할 수 있어 세밀한 로딩 상태 관리가 가능합니다.
- • loading.js는 비동기 컴포넌트 로딩 중 표시되는 폴백 UI 정의
- • 내부적으로 React Suspense로 자동 래핑되어 동작
- • 라우트 세그먼트별로 독립적인 로딩 상태 관리 가능
- • 스트리밍 렌더링과 부분 렌더링 자동 지원
loading.js가 없을 때와 있을 때 사용자 경험에 어떤 차이가 있으며, Skeleton UI를 구현할 때 어떻게 활용할 수 있을까요?
Q. Next.js에서 Script 컴포넌트의 strategy 옵션(beforeInteractive, afterInteractive, lazyOnload)의 차이점과 각각 어떤 상황에서 사용해야 하는지 설명해주세요.
beforeInteractive는 페이지가 인터랙티브하기 전에 스크립트를 로드하며, 중요한 폴리필이나 봇 감지 스크립트에 사용합니다. afterInteractive는 페이지가 인터랙티브한 후에 로드되며, 구글 애널리틱스나 태그 매니저 같은 분석 스크립트에 적합합니다. lazyOnload는 브라우저 idle 시간에 로드되며, 채팅 위젯이나 소셜 미디어 임베드 같이 즉시 필요하지 않은 스크립트에 사용합니다. 적절한 strategy 선택으로 초기 로딩 성능을 크게 개선할 수 있습니다.
- • beforeInteractive: 페이지 인터랙티브 전 로드, 중요한 폴리필용
- • afterInteractive: 페이지 인터랙티브 후 로드, 분석 도구용
- • lazyOnload: 브라우저 idle 시 로드, 우선순위 낮은 스크립트용
- • 적절한 strategy로 초기 로딩 성능 최적화 가능
외부 라이브러리를 CDN으로 로드할 때와 npm으로 설치할 때의 장단점을 비교하고, 어떤 기준으로 선택해야 할까요?
Q. Next.js App Router에서 Server Component에서 데이터를 fetch할 때 발생할 수 있는 에러를 처리하는 방법과, 에러 발생 시 사용자에게 적절한 UI를 보여주는 전략을 설명해주세요.
Server Component에서는 try-catch 블록으로 fetch 에러를 처리하거나, error.js 파일을 통해 에러 바운더리를 구성할 수 있습니다. try-catch를 사용하면 컴포넌트 내에서 직접 에러를 처리하고 폴백 UI를 반환할 수 있으며, error.js를 사용하면 해당 라우트 세그먼트의 모든 에러를 일괄 처리할 수 있습니다. 실무에서는 네트워크 에러, 타임아웃, 인증 실패 등 에러 타입별로 다른 메시지와 UI를 제공하는 것이 좋습니다. 또한 에러 로깅 서비스와 연동하여 프로덕션 환경에서 발생하는 에러를 모니터링해야 합니다.
- • try-catch로 컴포넌트 내 직접 에러 처리 가능
- • error.js로 라우트 세그먼트 단위 에러 바운더리 구성
- • 에러 타입별로 다른 사용자 메시지와 UI 제공
- • 에러 로깅 서비스 연동으로 프로덕션 에러 모니터링
fetch 요청이 실패했을 때 자동으로 재시도(retry)하는 로직을 구현한다면 어떤 방식으로 접근하시겠습니까?
Q. XSS(Cross-Site Scripting) 공격의 개념을 설명하고, Next.js 애플리케이션에서 사용자 입력을 렌더링할 때 XSS를 방지하는 방법을 설명해주세요.
XSS는 공격자가 악의적인 스크립트를 웹 페이지에 삽입하여 다른 사용자의 브라우저에서 실행되도록 하는 공격입니다. React와 Next.js는 기본적으로 JSX에서 렌더링되는 모든 값을 자동으로 이스케이프하여 XSS를 방지합니다. 하지만 dangerouslySetInnerHTML을 사용하면 이 보호가 우회되므로, 반드시 DOMPurify 같은 라이브러리로 HTML을 sanitize해야 합니다. 또한 사용자 입력을 URL이나 스타일에 사용할 때도 주의가 필요하며, Content Security Policy 헤더를 설정하여 추가 보안 계층을 구축할 수 있습니다.
- • XSS는 악의적인 스크립트를 삽입하여 실행시키는 공격
- • React/Next.js는 JSX에서 자동으로 값을 이스케이프
- • dangerouslySetInnerHTML 사용 시 반드시 sanitize 필요
- • CSP 헤더로 추가 보안 계층 구축 가능
CSRF(Cross-Site Request Forgery) 공격은 무엇이며, Next.js API Routes에서 어떻게 방어할 수 있을까요?
Q. Next.js의 next.config.js 파일에서 설정할 수 있는 주요 옵션들을 설명하고, 실무에서 자주 사용하는 설정 예시를 들어주세요.
next.config.js는 Next.js 애플리케이션의 핵심 설정 파일로, reactStrictMode로 엄격 모드를 활성화하거나, images.domains로 외부 이미지 최적화 도메인을 지정할 수 있습니다. redirects와 rewrites로 URL 리다이렉션과 프록시를 설정할 수 있으며, env로 환경변수를 정의할 수 있습니다. webpack 설정을 커스터마이징하거나, basePath로 서브 경로 배포를 설정하고, i18n으로 다국어를 구성할 수 있습니다. 실무에서는 주로 이미지 도메인 설정, API 프록시, 번들 분석기 플러그인 추가 등에 사용됩니다.
- • reactStrictMode, images 설정 등 다양한 옵션 제공
- • redirects/rewrites로 URL 라우팅 제어
- • webpack 커스터마이징과 환경변수 설정 가능
- • 실무에서는 이미지 도메인, API 프록시 설정 등에 활용
Next.js 애플리케이션을 Vercel이 아닌 다른 플랫폼(AWS, Docker 등)에 배포할 때 고려해야 할 사항은 무엇인가요?
아직 댓글이 없습니다. 첫 번째 댓글을 남겨보세요!