Next.js 주니어 기술면접
새 면접Q. Next.js App Router에서 layout.js와 page.js 파일의 역할과 차이점을 설명하고, layout.js가 중첩(nested)될 때 어떻게 동작하는지 설명해주세요.
layout.js는 여러 페이지에서 공유되는 UI 구조를 정의하며, 하위 페이지나 레이아웃을 감싸는 역할을 합니다. page.js는 특정 라우트의 실제 콘텐츠를 정의하는 파일로, 해당 경로에 접근했을 때 렌더링되는 고유한 UI입니다. layout.js는 중첩될 수 있으며, 상위 레이아웃이 하위 레이아웃과 페이지를 감싸는 형태로 동작합니다. 레이아웃은 페이지 전환 시에도 상태가 유지되고 리렌더링되지 않아 성능상 이점이 있습니다.
- • layout.js는 공유 UI, page.js는 라우트별 고유 UI
- • 레이아웃은 중첩 가능하며 상위가 하위를 감쌈
- • 레이아웃은 페이지 전환 시 상태 유지
Root Layout에서 반드시 포함해야 하는 HTML 요소는 무엇이며, 이를 생략하면 어떤 문제가 발생하나요?
Q. Next.js에서 Incremental Static Regeneration(ISR)의 개념과 동작 원리를 설명하고, revalidate 옵션을 사용할 때의 장점과 실무 활용 시나리오를 설명해주세요.
ISR은 정적 사이트 생성의 장점을 유지하면서 주기적으로 페이지를 재생성할 수 있는 하이브리드 렌더링 방식입니다. revalidate 옵션으로 초 단위의 재검증 시간을 설정하면, 해당 시간이 지난 후 첫 요청 시 백그라운드에서 페이지를 재생성합니다. 사용자는 캐시된 페이지를 즉시 받고, 다음 요청부터는 업데이트된 페이지를 받게 됩니다. 블로그 게시물, 상품 목록처럼 자주 변경되지 않지만 실시간성이 필요한 콘텐츠에 적합합니다.
- • 정적 생성과 동적 업데이트의 하이브리드 방식
- • revalidate로 재검증 주기 설정
- • 백그라운드 재생성으로 사용자는 빠른 응답 유지
ISR과 On-Demand Revalidation의 차이점은 무엇이며, 각각 어떤 상황에서 사용하는 것이 적절한가요?
Q. Next.js App Router에서 Server Component와 Client Component 간에 데이터를 전달하는 방법과, props로 전달할 때 직렬화 가능한 데이터 타입의 제약사항을 설명해주세요.
Server Component에서 데이터를 페칭한 후 props로 Client Component에 전달할 수 있으며, 이는 서버에서 데이터를 미리 가져오므로 초기 로딩 성능에 유리합니다. 전달 가능한 데이터는 JSON으로 직렬화 가능한 타입(문자열, 숫자, 배열, 객체 등)이어야 합니다. 함수, Date 객체, Map, Set 등은 직렬화할 수 없어 직접 전달할 수 없으며, Date는 ISO 문자열로 변환하거나 Client Component에서 다시 생성해야 합니다.
- • Server Component에서 페칭 후 props로 전달
- • JSON 직렬화 가능한 타입만 전달 가능
- • 함수, Date, Map 등은 직접 전달 불가
Server Component에서 Client Component로 함수를 전달해야 하는 경우 어떻게 해결할 수 있나요?
Q. Next.js에서 Font Optimization 기능의 동작 원리를 설명하고, next/font를 사용할 때의 이점과 기존 웹폰트 로딩 방식 대비 개선점을 설명해주세요.
next/font는 빌드 타임에 폰트 파일을 다운로드하고 정적 자산으로 호스팅하여 외부 네트워크 요청을 제거합니다. CSS의 size-adjust 속성을 자동으로 적용하여 레이아웃 시프트(CLS)를 방지하고, 폰트가 로드되는 동안 fallback 폰트와 크기를 맞춥니다. Google Fonts 등 외부 폰트를 사용해도 브라우저가 Google 서버에 요청하지 않아 프라이버시와 성능이 개선됩니다. variable 옵션으로 가변 폰트를 효율적으로 사용할 수 있습니다.
- • 빌드 타임에 폰트 다운로드 및 셀프 호스팅
- • size-adjust로 CLS 방지
- • 외부 요청 제거로 성능과 프라이버시 개선
FOUT(Flash of Unstyled Text)와 FOIT(Flash of Invisible Text)의 차이점은 무엇이며, next/font는 어떻게 이를 해결하나요?
Q. Next.js에서 useContext를 사용하여 전역 상태를 관리할 때 주의해야 할 점과, Context Provider를 어디에 배치해야 하는지 App Router 기준으로 설명해주세요.
useContext는 React Hook이므로 반드시 'use client' 지시어가 있는 Client Component에서만 사용할 수 있습니다. Context Provider도 Client Component여야 하며, App Router에서는 주로 layout.js에서 children을 감싸는 형태로 배치합니다. 이때 layout.js 자체를 Client Component로 만들기보다는 별도의 Provider 컴포넌트를 만들어 import하는 것이 좋습니다. Context 값이 변경되면 해당 Context를 구독하는 모든 하위 컴포넌트가 리렌더링되므로, 상태를 적절히 분리하여 불필요한 렌더링을 방지해야 합니다.
- • useContext는 Client Component에서만 사용
- • Provider는 layout.js에서 children 감싸기
- • Context 변경 시 구독 컴포넌트 모두 리렌더링
Context를 여러 개로 분리하는 것과 하나의 큰 Context를 사용하는 것의 장단점은 무엇인가요?
아직 댓글이 없습니다. 첫 번째 댓글을 남겨보세요!