[React] Next.js 관련 면접 질문 및 답변 가이드

질문 리스트

  - Next.js 정의
  - Next.js의 주요 기능
  - SSR과 CSR의 차이
  - getInitialProps 기능
  - Next.js의 라우팅 방식
  - API 경로 생성 방법

면접 질문

1. Next.js는 무엇입니까? 

Next.js는 React.js, Node.js 및 JavaScript 위에 구축된 오픈 소스 개발 프레임워크입니다. Vercel에서 개발했으며 create-react-app에서 사용할 수 없는 서버 측 렌더링 및 정적 사이트 생성과 같은 기능을 활성화합니다.

2. Next.js의 주요 기능은 무엇입니까?

SSR(Server Side Rendering) - 더 나은 SEO와 더 빠른 페이지 로드 시간을 보장합니다.
SSG(Static Site Generation) - 빌드 시 React 앱을 렌더링할 수 있으며 HTML/CSS 파일로 제공됩니다.
ISR(Incremental Static Regeneration) - 이 기능을 사용하면 전체 정적 사이트를 다시 빌드할 필요 없이 배포 후 정적 콘텐츠를 업데이트할 수 있습니다.
API Routes - Next.js를 사용하면 API 라우트를 구축할 수 있습니다.
내장 CSS 및 Sass 지원, 모든 CSS-in-JS 라이브러리 지원.
Hot Code Reloading - 애플리케이션 코드의 변경 사항은 전체 페이지를 새로 고치지 않고도 즉시 볼 수 있습니다.
자동 코드 분할, 파일 시스템 기반 라우팅 및 경로 미리 가져오기

3. Next.js의 SSR(Server-Side Rendering)에 대해 설명해 주시겠습니까? CSR(Client-Side Rendering)과 어떻게 다릅니까? 

SSR에서 브라우저에 대한 서버의 응답은 렌더링할 준비가 된 페이지의 HTML이므로 브라우저는 모든 JavaScript가 다운로드되고 실행될 때까지 기다릴 필요 없이 렌더링을 시작할 수 있습니다. 이는 더 빠른 FCP(First Contentful Paint)를 제공하며 콘텐츠가 초기 로드 시 이미 사용 가능하므로 검색 엔진 크롤러가 액세스할 수 있으므로 SEO에 탁월합니다. 반면 클라이언트 측 렌더링에서는 페이지를 렌더링하는 데 필요한 JavaScript가 브라우저로 전송된 다음 DOM을 생성하고 페이지를 렌더링합니다. 이것은 보다 상호 작용적인 경험을 제공할 수 있지만 단점이 있습니다. 주요 단점은 특히 느린 네트워크나 장치에서 페이지가 표시되는 데 시간이 더 오래 걸릴 수 있다는 것입니다. Next.js는 개발자가 응용 프로그램의 각 페이지를 렌더링하는 방법을 선택할 수 있는 SSR과 CSR의 하이브리드를 제공하여 많은 유연성을 제공합니다.

4. Next.js의 'getInitialProps' 기능은 무엇인가요?

getInitialProps는 페이지에서 서버 측 렌더링을 활성화하고 페이지가 렌더링 전에 일부 데이터를 기다릴 수 있도록 하는 Next.js의 기능입니다. Next.js 애플리케이션의 모든 페이지에 추가할 수 있는 비동기 정적 메서드입니다. getInitialProps로부터 반환되는 데이터는 페이지 컴포넌트의 props를 채우는 데 사용됩니다. 이 함수는 필요한 데이터를 가져오는 데 유용할 수 있는 여러 속성을 포함한 컨텍스트 객체를 받습니다. 그러나 Next.js 9.3부터는 getInitialProps 대신 getStaticProps 또는 getServerSideProps를 사용하는 것이 좋습니다.  두 방법으로 더 나은 성능과 유연성을 얻을 수 있기 때문입니다.

5. Next.js에서 라우팅이 작동하는 방식을 설명해 주시겠습니까?

Next.js에는 파일 시스템 기반 라우팅 메커니즘이 있습니다. 이는 라우팅이 프로젝트의 'pages' 디렉토리에 있는 파일 구조를 기반으로 한다는 것을 의미합니다. 'pages' 디렉토리 내의 모든 파일은 자동으로 경로가 됩니다. 예를 들어 'pages' 디렉토리에 about.js 파일을 생성하면 your-site.com/about처럼 제공됩니다. 대괄호 []로 시작하는 파일 및 디렉터리 이름을 사용하여 동적 라우팅을 수행할 수도 있습니다. 예를 들어, pages/post/[id].js는 /post/1, /post/abc 등과 일치합니다.

6. Next.js에서 API 경로를 어떻게 생성하나요?

Next.js는 서버 사이드 API 경로를 생성하는 솔루션을 제공합니다. API 경로를 생성하려면 프로젝트의 'pages/api' 디렉토리 내에 파일을 생성합니다. 이 디렉터리의 각 파일은 호출할 수 있는 API 경로가 됩니다. 파일 이름은 경로 경로로 사용됩니다. 예를 들어 'pages/api' 디렉토리에 'hello.js'라는 파일을 생성하면 'yourwebsite.com/api/hello'에서 이 API 경로에 액세스할 수 있습니다. API 경로는 서버 측 전용이며 클라이언트 측 JavaScript 번들의 일부가 아니므로 브라우저로 전송되는 JavaScript 코드의 크기가 증가하지 않습니다.


이상 Next.js 관련하여 면접에서 물어볼 것 같은 사항들을 정리해보았다. 다들 면접 잘 뿌수고 오자 화이팅 !