면접대비 질문 정리: Next.js

면접질문 참고

• Next.js - 면접 단골 질문
• 프론트엔드 개발자 면접 질문

 

1. Next.js의 SSR과 CSR의 차이점은 무엇인가요?

✅ 답변

• SSR (Server-Side Rendering): 서버에서 HTML을 렌더링하여 클라이언트에 전달하는 방식입니다. 클라이언트는 서버로부터 완전히 렌더링된 HTML을 받아 바로 표시할 수 있습니다. 초기 로딩 속도가 빠르며, SEO에 유리한 방식이라는 특징이 있습니다.
• CSR (Client-Side Rendering): 클라이언트에서 JavaScript를 사용해 렌더링을 처리하는 방식입니다. 초기 페이지 로드 시, 클라이언트는 최소한의 HTML과 함께 JavaScript 번들을 받아 브라우저에서 직접 렌더링을 수행합니다. 이는 사용자와의 상호작용이 중요한 SPA(Single Page Application)에 적합하지만 초기 로딩 시간이 SSR보다 느릴 수 있고 SEO에서 불리하다는 단점이 있습니다.

 

2. Next.js 14에서 새롭게 추가된 기능이나 개선사항은 무엇인가요?

✅ 답변

• Server Actions: next 서버에서 실행될 함수를 클라이언트 측에서 정의하고, 이를 React 컴포넌트에서 직접 호출할 수 있는 기능입니다. 기존과 같이 API 라우터를 사용하지 않더라도, `"use server"`라는 정의만으로 함수를 자동으로 서버 API로 만들어줄 수 있습니다. 
• Route Groups: URL 구조에 영향을 주지 않고, 페이지를 논리적으로 그룹화할 수 있게 하는 기능입니다.
• Improved App Router: App Router가 더 확장되었고, 사용성을 높이기 위한 여러 기능이 추가되었습니다.

 

참고: 

• Next.js 14 업데이트 살펴보기
• Next14 업데이트 (feat. 나는 Next14가 필요한가?)

 

3. Next.js 13에서 도입된 App Router와 기존 Pages Router의 차이점에 대해 설명해주세요.

출처: 요즘IT - Next.js 14 업데이트 살펴보기 (https://yozm.wishket.com/magazine/detail/2324/)

✅ 답변

Pages Router는 루트 디렉토리의 pages 폴더 내부에 파일을 배치하여 라우트를 정의하는 라우팅 방식입니다. 각 파일은 페이지에 해당하며, 정해진 경로로 접근할 수 있습니다. 서버 사이드 렌더링을 위해서는 `getServerSideProps`라는 이름의 함수를 사용해야 합니다.

반면 App Router는 app 디렉토리를 사용하며, 컴포넌트 기반의 라우팅을 지원합니다. 폴더 기반의 구조로 파일을 관리하고 동적 세그먼트와 같은 고급 라우팅 기능을 더 직관적으로 제공해 줍니다. 디렉토리 단위로 layout.js 파일을 사용해 페이지 레이아웃을 쉽게 관리할 수 있는 점도 특징입니다. Pages Router와 달리, 일반적인 `fetch` 함수를 페이지에서 비동기로 사용하면 서버 사이드 렌더링을 구현할 수 있습니다.

 

참고: 

• Next.js 14 업데이트 살펴보기

 

4. Next.js 14에서 Route Groups의 기능과 활용방안

✅ 답변
Route Groups는 URL 경로에 영향을 주지 않고, 논리적인 그룹으로 페이지와 컴포넌트를 구성할 수 있는 기능입니다. 

예를 들어, `app/(group1)/about/page.tsx`와 `app/(group2)/about/page.tsx`는 group1과 group2에 따라 페이지를 논리적으로 분리할 수 있지만, URL 경로는 여전히 `/about`으로 접근할 수 있습니다. 이 기능을 통해 대규모 프로젝트에서 복잡한 디렉토리 구조를 관리하기 쉽고, 조직화된 코드베이스를 유지할 수 있습니다.

 

5. ISR(Incremental Static Regeneration)이란 무엇인가요?

✅ 답변
Incremental Static Regeneration(ISR)은 Next.js의 정적 페이지 생성 기능을 확장한 것입니다. 

ISR을 사용하면 정적 생성된 페이지를 일정 시간마다 재생성(업데이트)할 수 있습니다.

Next.js 14에서는 ISR을 구현하기 위해 서버 컴포넌트 내에서 next 옵션의 `revalidate` 키를 사용합니다.

예를 들어, `next: { revalidate: 60 }`으로 설정하면 페이지는 60초마다 백그라운드에서 새로 생성됩니다. 이를 통해 정적 사이트의 성능을 유지하면서도 데이터가 자주 변경되는 페이지에서도 최신 상태를 유지할 수 있습니다.

// app/your-page/page.js

export const dynamic = 'auto'; // 자동으로 ISR 적용

export default async function YourPage() {
    const res = await fetch('https://api.example.com/data', {
        next: { revalidate: 60 }, // 60초마다 페이지를 재생성
    });
    const data = await res.json();

    return (
        <div>
            <h1>Your Data</h1>
            <p>{data}</p>
        </div>
    );
}

 

6. Server Actions 기능이란

✅ 답변
Server Actions는 Next.js 14에서 도입된 기능으로, 클라이언트에서 서버 함수를 직접 호출할 수 있도록 합니다. 이 기능은 서버에서 데이터를 처리하거나 특정 작업을 수행할 때 유용합니다. 예를 들어, 폼 제출 시 서버에서 데이터를 검증하고 저장하는 작업을 클라이언트 코드에서 간단히 호출할 수 있습니다.

이를 사용하기 위해서는 `useAction` 훅을 사용할 수 있으며, 서버 함수는 `server.ts` 파일이나 `특정 API 경로`에서 정의됩니다. Server Actions는 서버에서만 실행되므로, 보안과 성능 측면에서 이점을 가집니다.

 

7. Middleware

✅ 답변
Middleware는 요청이 페이지에 도달하기 전에 실행되는 코드를 정의할 수 있는 기능입니다. 이 기능은 요청을 가로채어 사용자 인증, 리다이렉션, 로그 수집 등을 처리할 수 있게 합니다.
Middleware는 Next.js의 루트 또는 특정 경로에 `middleware.ts` 파일을 생성하여 사용합니다. 이 파일에서 `NextResponse`를 반환하는 함수로 요청을 제어할 수 있습니다. 예를 들어, 인증이 필요한 페이지에서 미인증 사용자를 로그인 페이지로 리다이렉트할 때 사용될 수 있습니다.

 

8. Next.js 14에서의 새 렌더링 전략들은 무엇인가요?

✅ 답변
(참고: 기존 렌더링 전략: SSR, SSG, ISR)

• Streaming SSR: 서버에서 HTML을 스트리밍하여 클라이언트로 점진적으로 전달하는 방식입니다. 페이지의 일부만 완성된 상태에서도 콘텐츠를 표시할 수 있어 사용자 경험을 개선할 수 있습니다.
• Partial Hydration: 클라이언트 측에서 필요한 부분만을 하이드레이션하여 성능을 극대화하는 방식입니다. 이는 대규모 페이지에서 불필요한 자원을 절약하는 데 효과적입니다.

 

9. Next.js에서 Dynamic Imports를 사용하는 이유는 무엇인가요?

✅ 답변
Dynamic Imports는 필요한 시점에만 모듈을 로드하여 초기 로딩 시간을 줄이는 방법입니다. 이를 통해 애플리케이션의 성능을 개선할 수 있습니다. Next.js에서 Dynamic Imports를 사용하면, 특정 컴포넌트나 라이브러리를 필요한 시점에만 불러오게 되어 초기 번들 크기를 줄일 수 있습니다. 이는 import() 구문을 사용하여 구현되며, 예를 들어, 사용자가 인터랙션을 할 때만 특정 모듈을 로드하도록 할 수 있습니다.

 

 

10. Hydration이란 무엇인가요?

✅ 답변
Hydration은 서버에서 렌더링된 정적 HTML을 클라이언트 측에서 React의 상태와 이벤트 핸들러와 같은 동적 기능을 복원하는 과정입니다. 이 과정은 서버에서 미리 렌더링된 HTML을 클라이언트 측에서 React 컴포넌트로 변환해, 사용자 상호작용에 반응할 수 있게 만듭니다.
Next.js에서는 페이지를 서버 사이드 렌더링(SSR)하거나 정적으로 생성할 때, HTML을 서버에서 먼저 렌더링한 후, 클라이언트에서 해당 HTML을 Hydration하여 완전한 React 애플리케이션으로 만듭니다. Hydration이 성공적으로 이루어지면, 페이지는 기존의 SPA(Single Page Application)처럼 동작하게 됩니다.
하지만, Hydration 과정에서 서버에서 렌더링된 HTML과 클라이언트 측 React가 생성한 DOM이 일치하지 않으면 경고 메시지가 발생할 수 있습니다. 이러한 문제를 방지하기 위해, 서버와 클라이언트에서 동일한 렌더링 출력을 유지하는 것이 중요합니다.

Hydration의 이점:

• SEO 최적화: SSR로 인해 초기 HTML이 검색 엔진에 의해 인덱싱될 수 있습니다.
• 빠른 초기 로드: 사용자에게 빠르게 콘텐츠를 제공하면서도, 이후 상호작용이 가능한 SPA로 전환됩니다.

Hydration의 단점:

• 복잡성 증가: 서버와 클라이언트 간의 일관성을 유지해야 하는 부담이 있습니다.
• 성능 이슈: 복잡한 페이지일수록 Hydration 과정이 느려질 수 있습니다. 이를 해결하기 위해 Next.js 14에서는 `Partial Hydration`과 같은 최적화 전략을 도입했습니다.

 

 

11. Next.js에서 useRouter 훅은 어떤 역할을 하나요?

✅ 답변
useRouter 훅은 Next.js에서 라우팅 관련 정보와 기능을 제공하는 훅입니다. 이 훅을 사용하면 현재 경로, 쿼리 파라미터, 라우팅 기능 등을 쉽게 사용할 수 있습니다. 예를 들어, 특정 이벤트 발생 시 프로그래밍적으로 다른 페이지로 이동하거나, 현재 경로 정보를 기반으로 조건부 렌더링을 할 때 유용합니다.

 

12. Next.js에서 이미지 최적화는 어떻게 이루어지나요?

✅ 답변
Next.js는 next/image 컴포넌트를 통해 이미지 최적화 기능을 제공합니다. 이 컴포넌트를 사용하면, 이미지를 자동으로 적절한 크기와 포맷으로 변환하여 제공함으로써 페이지 로딩 속도를 최적화할 수 있습니다. next/image는 다양한 해상도와 기기에 맞게 이미지를 동적으로 조절하며, Lazy Loading을 기본적으로 지원하여 불필요한 리소스 로드를 방지합니다.

 

13. Next.js의 Link 컴포넌트와 a 태그의 차이점은 무엇인가요?

✅ 답변
Link 컴포넌트는 Next.js에서 클라이언트 사이드 네비게이션을 지원하는 컴포넌트입니다. a 태그와 달리, 페이지 전체를 새로고침하지 않고, 브라우저의 히스토리 API를 사용해 SPA처럼 동작합니다. 이는 네비게이션 속도를 크게 향상시키며, 사용자 경험을 개선합니다. Link 컴포넌트를 사용할 때는 href 속성을 통해 경로를 지정하며, 내부에 a 태그를 포함하여 접근성을 높일 수 있습니다.

 

14. Next.js에서 다국어 지원을 어떻게 구현할 수 있나요?

✅ 답변
Next.js는 기본적으로 다국어 지원을 위해 i18n 기능을 제공합니다. 이를 설정하기 위해 next.config.js 파일에서 i18n 설정을 정의할 수 있습니다. 이 설정을 통해 지원하는 언어와 기본 언어를 지정하며, Next.js는 각 언어에 맞는 경로를 자동으로 생성합니다.
또한, 페이지 컴포넌트에서 useRouter를 통해 현재 언어를 감지하거나, 특정 언어에 맞는 콘텐츠를 렌더링할 수 있습니다. 더 복잡한 다국어 처리를 위해서는 i18next와 같은 외부 라이브러리를 사용할 수도 있습니다.

 

15. 코드 스플리팅이란 무엇인가요?

✅ 답변
코드 스플리팅은 애플리케이션의 JavaScript 번들을 작은 청크로 나누어 필요한 시점에 로드하는 기법입니다. Next.js는 기본적으로 페이지 단위로 코드 스플리팅을 지원하며, 각 페이지는 별도의 청크로 분리됩니다. 이를 통해 초기 로딩 시간을 줄이고, 사용자가 방문한 페이지에 필요한 코드만 로드할 수 있습니다. 동적 임포트(import())를 사용하여 특정 컴포넌트나 라이브러리도 필요할 때만 로드되도록 설정할 수 있습니다.

 

16. API Routes를 사용할 때 주의해야 할 점은 무엇인가요?

✅ 답변
API Routes는 Next.js에서 서버리스 함수처럼 동작하며, 클라이언트와 서버 간의 API 통신을 쉽게 구현할 수 있게 합니다. 주의해야 할 점은 다음과 같습니다:

• 보안: API Routes에서 입력 데이터는 항상 검증 및 처리해야 하며, 민감한 데이터는 노출되지 않도록 주의해야 합니다.
• 성능: 요청에 따라 데이터를 처리하거나 외부 API를 호출할 때, 가능한 캐싱이나 효율적인 데이터베이스 쿼리를 사용하여 성능을 최적화할 필요가 있습니다.
• 환경 변수 관리: API Routes에서 민감한 정보나 환경 변수를 사용할 때는 .env.local 파일을 사용하여 환경 변수를 안전하게 관리해야 합니다.

17. Head 컴포넌트의 역할

✅ 답변
Head 컴포넌트는 Next.js에서 HTML <head> 부분에 내용을 추가할 수 있도록 해줍니다. 이를 통해 페이지별로 메타 태그, 타이틀, 링크, 스크립트 등을 설정할 수 있습니다. 예를 들어, 각 페이지에서 고유한 메타 정보를 설정하여 SEO를 최적화하거나, 특정 스타일시트나 스크립트를 페이지에 로드할 수 있습니다.

import Head from 'next/head';

export default function HomePage() {
  return (
    <>
      <Head>
        <title>My Next.js Page</title>
        <meta name="description" content="This is a description of my Next.js page" />
      </Head>
      <h1>Welcome to My Page</h1>
    </>
  );
}

 

 

18. Next.js에서 환경 변수를 사용하는 방법

✅ 답변
Next.js에서는 환경 변수를 .env.local, .env.development, .env.production 파일을 통해 관리할 수 있습니다. 환경 변수는 NEXT_PUBLIC_ 접두사를 사용하여 클라이언트 측에서 접근 가능하게 하거나, 서버에서만 사용되도록 설정할 수 있습니다.

# .env.local
NEXT_PUBLIC_API_URL=https://api.example.com
DATABASE_URL=postgres://user:password@localhost:5432/mydb

클라이언트에서 NEXT_PUBLIC_API_URL 변수는 process.env.NEXT_PUBLIC_API_URL로 접근할 수 있으며, 서버에서 DATABASE_URL은 process.env.DATABASE_URL로 접근 가능합니다. 중요한 정보는 클라이언트에 노출되지 않도록 해야 합니다.