Next.js 주니어 프레임워크 기술면접
새 면접Q. Next.js에서 SSR(Server-Side Rendering), SSG(Static Site Generation), CSR(Client-Side Rendering)의 차이점을 설명하고, 각각 어떤 페이지에 적합한지 실무 예시를 들어 설명해주세요.
SSR은 요청마다 서버에서 HTML을 생성하여 최신 데이터를 보여주는 방식으로 뉴스 사이트나 대시보드에 적합합니다. SSG는 빌드 타임에 HTML을 미리 생성하여 CDN에서 제공하므로 성능이 뛰어나며 블로그나 마케팅 페이지에 적합합니다. CSR은 브라우저에서 JavaScript로 콘텐츠를 렌더링하며 SEO가 중요하지 않은 관리자 페이지나 인터랙티브한 대시보드에 적합합니다. Next.js는 페이지별로 이들을 조합하여 사용할 수 있는 하이브리드 방식을 지원합니다.
- • SSR은 요청마다 서버에서 렌더링하여 최신 데이터 제공
- • SSG는 빌드 타임에 생성하여 성능 최적화
- • CSR은 클라이언트에서 렌더링하며 SEO 불리
- • 페이지 특성에 따라 적절한 렌더링 방식 선택 필요
ISR(Incremental Static Regeneration)은 무엇이며, SSG와 어떤 차이가 있나요?
Q. Next.js의 파일 기반 라우팅(File-based Routing) 시스템을 설명하고, pages 폴더 구조가 실제 URL 경로로 어떻게 매핑되는지 예시를 들어 설명해주세요.
Next.js는 pages 폴더 내의 파일 구조가 자동으로 라우팅 경로가 되는 파일 기반 라우팅을 사용합니다. 예를 들어 pages/about.js는 /about 경로가 되고, pages/blog/[id].js는 /blog/123과 같은 동적 경로가 됩니다. pages/index.js는 루트 경로(/)가 되며, pages/api 폴더는 API 엔드포인트로 동작합니다. 이 방식은 별도의 라우팅 설정 없이 직관적으로 라우팅을 구성할 수 있는 장점이 있습니다.
- • 파일 구조가 자동으로 URL 경로로 매핑
- • 대괄호를 사용한 동적 라우팅 지원
- • index.js는 해당 폴더의 기본 경로
- • 별도의 라우팅 설정 파일 불필요
App Router에서는 파일 기반 라우팅이 어떻게 달라지나요?
Q. Next.js에서 클라이언트 컴포넌트와 서버 컴포넌트의 차이점을 설명하고, 각각에서 데이터를 가져오는 방법의 차이를 설명해주세요.
서버 컴포넌트는 서버에서만 실행되며 async/await를 사용해 직접 데이터를 fetch할 수 있고, 번들 크기가 작아 성능에 유리합니다. 클라이언트 컴포넌트는 'use client' 지시어를 사용하며 useState, useEffect 같은 React 훅을 사용할 수 있고, 브라우저에서 실행되어 인터랙션 처리가 가능합니다. 서버 컴포넌트에서는 데이터베이스에 직접 접근하거나 서버 API를 호출할 수 있지만, 클라이언트 컴포넌트에서는 useEffect나 SWR, React Query 같은 라이브러리로 데이터를 가져와야 합니다. 성능과 SEO를 위해 가능한 서버 컴포넌트를 사용하고, 인터랙션이 필요한 부분만 클라이언트 컴포넌트로 분리하는 것이 좋습니다.
- • 서버 컴포넌트는 서버에서만 실행되며 직접 데이터 페칭 가능
- • 클라이언트 컴포넌트는 React 훅과 인터랙션 처리 가능
- • 서버 컴포넌트는 번들 크기가 작고 SEO에 유리
- • 적절한 컴포넌트 분리가 성능 최적화의 핵심
서버 컴포넌트에서 클라이언트 컴포넌트로 props를 전달할 때 주의할 점은 무엇인가요?
Q. Next.js에서 SEO 최적화를 위해 Head 컴포넌트 또는 metadata를 사용하는 방법을 설명하고, 왜 SEO가 중요한지 설명해주세요.
Pages Router에서는 next/head의 Head 컴포넌트를 사용하여 title, description, og 태그 등을 설정하고, App Router에서는 metadata 객체를 export하여 메타데이터를 관리합니다. SEO는 검색 엔진이 페이지 콘텐츠를 이해하고 검색 결과에 노출시키는 데 중요하며, 적절한 메타데이터는 검색 순위와 클릭률을 높입니다. title과 description은 검색 결과에 직접 표시되고, Open Graph 태그는 소셜 미디어 공유 시 미리보기를 제공합니다. Next.js의 SSR과 SSG는 검색 엔진 크롤러가 완전한 HTML을 받을 수 있어 CSR보다 SEO에 유리합니다.
- • Head 컴포넌트 또는 metadata로 메타태그 설정
- • title, description, og 태그가 검색 결과와 공유에 영향
- • SSR/SSG는 크롤러가 완전한 HTML을 받아 SEO 유리
- • 적절한 메타데이터는 검색 순위와 트래픽 증가에 기여
동적 라우팅 페이지에서 각 페이지마다 다른 메타데이터를 설정하려면 어떻게 해야 하나요?
Q. Next.js에서 환경변수를 사용하는 방법을 설명하고, NEXT_PUBLIC_ 접두사가 있는 환경변수와 없는 환경변수의 차이점 및 보안상 주의할 점을 설명해주세요.
.env.local 파일에 환경변수를 정의하면 process.env를 통해 접근할 수 있으며, NEXT_PUBLIC_ 접두사가 없는 변수는 서버 사이드에서만 접근 가능합니다. NEXT_PUBLIC_ 접두사가 있는 변수는 브라우저 번들에 포함되어 클라이언트에서도 접근할 수 있지만, 소스코드에 노출되므로 민감한 정보를 담아서는 안 됩니다. API 키나 데이터베이스 비밀번호 같은 민감한 정보는 반드시 접두사 없이 서버 환경변수로 관리해야 합니다. 배포 환경에서는 .env 파일 대신 호스팅 플랫폼의 환경변수 설정을 사용하는 것이 보안상 안전합니다.
- • NEXT_PUBLIC_ 없는 변수는 서버에서만 접근 가능
- • NEXT_PUBLIC_ 있는 변수는 클라이언트 번들에 포함되어 노출
- • 민감한 정보는 반드시 서버 환경변수로만 관리
- • 배포 시 플랫폼의 환경변수 설정 활용
개발, 스테이징, 프로덕션 환경별로 다른 환경변수를 관리하려면 어떻게 해야 하나요?
아직 댓글이 없습니다. 첫 번째 댓글을 남겨보세요!