[Next.js] Quiz

Q.

 

> 객관식

 

문제 1: Next.js에서 getStaticProps 함수의 주요 목적은 무엇인가요?

• A) 클라이언트 측에서 데이터를 가져오기 위해
• B) 빌드 시에 정적인 페이지를 생성하기 위해
• C) 서버 측에서 실시간으로 데이터를 가져오기 위해
• D) 라우팅을 처리하기 위해

문제 2: Next.js에서 동적 라우팅을 구현하려면 파일 이름에 어떤 문법을 사용해야 하나요?

• A) filename.js
• B) [parameter].js
• C) {parameter}.js
• D) :parameter.js

문제 3: Next.js에서 getServerSideProps는 언제 사용해야 하나요?

• A) 정적 생성이 불가능하고, 페이지가 요청될 때마다 데이터를 받아와야 할 때
• B) 페이지가 빌드 시에 정적으로 생성될 때
• C) 클라이언트 측에서 데이터를 가져와야 할 때
• D) 페이지가 404 에러를 처리할 때

문제 4: Next.js에서 페이지 컴포넌트를 생성하기 위해 어떤 폴더에 파일을 생성해야 하나요?

• A) components
• B) pages
• C) public
• D) styles

문제 5: Next.js에서 CSS 파일을 글로벌하게 적용하려면 어디에 import해야 하나요?

• A) 각 컴포넌트의 상단
• B) pages/_app.js
• C) pages/index.js
• D) next.config.js

 

 

 

> 주관식

 

문제:

Next.js에서 getStaticPaths 함수는 어떤 상황에서 사용되며, 이 함수와 getStaticProps 함수가 함께 사용될 때의 동작 방식을 설명하세요.

 

 

 

 

 

A.

 

 

문제 1: Next.js에서 getStaticProps 함수의 주요 목적은 무엇인가요?

• 정답: B) 빌드 시에 정적인 페이지를 생성하기 위해
• 설명: getStaticProps는 빌드 시에 데이터를 가져와 정적 페이지를 생성하는 데 사용됩니다. 이 함수는 페이지를 미리 렌더링하여 빠른 로딩 속도를 제공합니다.

문제 2: Next.js에서 동적 라우팅을 구현하려면 파일 이름에 어떤 문법을 사용해야 하나요?

• 정답: B) [parameter].js
• 설명: Next.js에서 동적 라우팅을 구현하려면, 파일 이름에 대괄호([])를 사용하여 변수명을 지정합니다. 예를 들어, [id].js는 /posts/1와 같은 경로를 처리할 수 있습니다.

문제 3: Next.js에서 getServerSideProps는 언제 사용해야 하나요?

• 정답: A) 정적 생성이 불가능하고, 페이지가 요청될 때마다 데이터를 받아와야 할 때
• 설명: getServerSideProps는 요청 시마다 데이터를 받아와야 하는 페이지에 사용되며, 서버 측에서 렌더링됩니다. 이는 매 요청마다 최신 데이터를 제공하는데 유용합니다.

문제 4: Next.js에서 페이지 컴포넌트를 생성하기 위해 어떤 폴더에 파일을 생성해야 하나요?

• 정답: B) pages
• 설명: Next.js에서는 pages 폴더에 파일을 생성하면, 해당 파일이 자동으로 라우팅되며 페이지로 사용할 수 있습니다.

문제 5: Next.js에서 CSS 파일을 글로벌하게 적용하려면 어디에 import해야 하나요?

• 정답: B) pages/_app.js
• 설명: pages/_app.js 파일은 Next.js의 커스텀 앱 컴포넌트로, 여기에 CSS 파일을 import하면 앱 전체에 걸쳐 글로벌하게 스타일이 적용됩니다.

 

 

-  Next.js에서 getStaticPaths 함수는 어떤 상황에서 사용되며, 이 함수와 getStaticProps 함수가 함께 사용될 때의 동작 방식을 설명하세요. 

• getStaticPaths: 이 함수는 동적 경로를 가진 페이지에서 사용됩니다. 예를 들어, [id].js와 같은 동적 경로 파일에서 사용되며, 정적으로 생성할 경로 목록을 반환합니다. Next.js는 이 함수가 반환하는 경로들에 대해 getStaticProps를 호출하고, 각 경로에 대해 정적 페이지를 미리 생성합니다.
• getStaticProps와의 연계: getStaticPaths가 반환한 경로마다 Next.js는 해당 경로에 필요한 데이터를 미리 가져오기 위해 getStaticProps를 호출합니다. 이를 통해 각 경로에 맞는 데이터를 포함한 정적 페이지를 빌드 시에 생성하게 됩니다.

예를 들어, 블로그 게시글의 상세 페이지를 미리 생성하고자 할 때 getStaticPaths를 사용해 특정 게시글 ID에 해당하는 경로들을 지정하고, getStaticProps를 통해 각 경로에 맞는 데이터를 받아오는 구조입니다.