(1) 프레임워크와 라이브러리 차이에 근거하여 React.js와 Next.js를 설명해주세요.
Next.js
는 React.js
를 기반으로 하는 프레임워크이며, React.js
자체는 UI 구성
을 위한 라이브러리
입니다.
Next.js
는 React.js
의 기능을 확장하여 웹 애플리케이션 개발에 필요한 다양한 기능과 구조를 제공하는 반면, React.js는 기본적인 UI 구성 기능만을 제공합니다.
(2) Next.js에서 라우팅을 구현하는 방식은 React.js와 어떻게 다른가요?
Next.js
에서는 파일(폴더) 기반 라우팅을 사용하여 개발자가 별도로 라우팅 로직을 설정할 필요 없이, 페이지 파일을 app디렉토리(pages router의 경우 pages 폴더에)에 구성하는 것만으로 라우팅이 자동으로 설정됩니다.
- 반면, React.js에서는
react-router-dom
과 같은 라이브러리를 사용하여 라우팅 로직을 직접 구현해야 합니다.
(3) Next.js에서 제공하는 렌더링 기법에는 어떤 것들이 있나요? 각각의 특징과 구현방법을 간단히 설명해주세요.
- CSR(Client-Side Rendering)
- SSR(Server-Side Rendering) : 사용자의 요청 시마다 서버에서 HTML을 동적으로 생성하여 전송하는 방식. 동적 콘텐츠에 적합
- SSG(Static Site Generation) : 빌드 타임에 미리 HTML 파일을 생성하여 요청 시 정적 파일을 제공하는 방식. 정적 컨텐츠에 적합
- ISR(Incremental Static Regeneration) : 빌드 시점에 페이지를 생성한 후, 설정된 주기에 따라 주기적으로 페이지를 재생성하여 갱신된 데이터를 반영
(4) Next.js를 사용하여 Full Stack 웹 개발을 수행할 때의 한계점은 무엇인가요?
- Next.js는 API Route를 통해 Full Stack 웹 개발을 지원하지만, 복잡한 백엔드 로직의 구현이 어렵고, WebSocket이나 WebRTC와 같은 실시간 통신 기술 구현에 제한이 있습니다.
- 또한, 백엔드 로직 변경 시 프론트엔드도 함께 배포해야 하는 종속성 문제가 있습니다.
(5) TTV, TTI, hydration의 관계를 설명해주세요.
- TTV : Time To View, 유저가 최초로 페이지를 보게 되는 데에까지 걸리는 시간
- TTI : Time To Interaction, 유저가 최초로 페이지와 상호작용 할 때 까지 걸리는 시간
- pre-rendering과 hydration의 관계
- pre-rendering : 사용자와 상호작용하는 부분을 제외한 껍데기만을 먼저 브라우저에게 제공합니다. TTV가 엄청나게 빠르겠네요.
- hydration : 이 과정이 일어나기 전까지는 껍데기만 있는 html 파일이기 때문에 사용자가 아무리 버튼을 click 해도 아무 동작이 일어나지 않아요. 인터렉션에 필요한 모든 파일을 다운로드 받는 과정 즉, hydration 과정이 끝나야 그제서야 인터렉션이 가능합니다. 이 간극! TTI를 줄이는 것이 관건이라 할 수 있겠습니다.
(6) 코드스플리팅이란 무엇인가요?
- SPA 프로젝트에서는 프로젝트 빌드 시, 하나의 JS 파일로 번들링을 합니다. 이런 경우 번들링 사이즈가 너무 커지게 되면서 초기 로딩 속도가 상당히 느리게 됩니다(TTV가 너무 오래걸림)
- 코드스플리팅을 통해 큰 번들의 js 파일을 작은 단위로 잘라 필요한 곳에만 로드하여 빠른 TTV를 얻게 할 수 있습니다.
- 특히 Next.js에서는 사용자가 방문하는 페이지에 필요한 자바스크립트 코드만을 로드합니다. 이를 통해 필요한 부분만 우선 로딩하여 Time To View(TTV)를 향상시키고 전체적인 애플리케이션 성능을 개선합니다.
(7) Next.js edge runtime은 무엇이고 어떤 장점이 있을까요?
- Edge runtime은 웹 애플리케이션의 일부분을 사용자에게 가장 가까운 서버에서 실행하는 기술입니다. 이를 통해 애플리케이션의 응답 시간을 단축하고, 사용자 경험을 향상시킬 수 있습니다.
- Next.js는 edge runtime을 통해 글로벌 사용자에게 더 빠른 웹 페이지 로딩 속도를 제공합니다.
(8) Next.js 13버전에서 app directory의 역할은 무엇인가요?
- 가장 중요한 것!! 파일(폴더) 기반 라우팅이 가능케 하는 영역입니다.
- app 디렉토리에 들어가는 파일과 아닌 파일을 구분해야만 해요. 만일 routing과 관련없는 컴포넌트라면 app directory가 아닌 곳에 별도 분리하는게 깔끔하겠죠.
- src > app 디렉토리는 Next.js 프로젝트의 핵심 구조를 담고 있는 디렉토리입니다. 여기에는 프로젝트의 레이아웃(layout), 페이지(page), 그리고 프로젝트에 필요한 추가 설정 파일들이 포함됩니다.
- 이 디렉토리를 통해 프로젝트의 주요 구성 요소를 관리하고, 페이지 및 레이아웃을 구성하여 애플리케이션의 전반적인 구조를 정의합니다.
(9) Next.js에서 페이지 간 이동을 수행할 때 useRouter
훅의 push
와 replace
메서드의 차이점은 무엇인가요?
useRouter
훅의 push
메서드는 새로운 경로를 히스토리 스택에 추가하여 페이지 간 이동을 수행하며, 사용자가 브라우저의 뒤로 가기 버튼을 사용할 수 있게 합니다.
- 반면,
replace
메서드는 현재 경로를 새로운 경로로 대체하여 히스토리 스택에 추가하지 않기 때문에, 사용자가 뒤로 가기 버튼을 사용해도 이전 페이지로 돌아갈 수 없습니다. replace
는 페이지 이동 시 현재 페이지를 히스토리에서 완전히 대체할 때 사용됩니다.
(10) Next.js에서 <Link>
컴포넌트의 prefetching 기능의 장점은 무엇인가요?
<Link>
컴포넌트의 prefetching 기능은 사용자가 링크를 클릭하기 전에 해당 페이지의 데이터와 코드를 미리 로드합니다.
- 미리 데이터와 코드를 가져오기 때문에, Link를 클릭했을 때 아주 빠르게 페이지를 보여줄 수 있어요.
(11) Next.js 버전 13의 렌더링 방식이 컴포넌트 단위로 변경된 이유는 무엇인가요?
- React 18에서 제시한 서버 컴포넌트와 클라이언트 컴포넌트의 개념을 적용하기 위해서입니다.
- 한 페이지 내에서 여러 렌더링 방식이 공존할 수 있게 되면서, 효율적이고 세분화된 렌더링 관리가 가능해졌습니다.
(12) Next.js에서 다음 코드는 오류가 발생합니다. 왜일까요? 오류를 해결하기 위해서는 어떻게 해야할까요?
import React, { useState } from "react";
export default function ExampleComponent() {
const [count, setCount] = useState(0);
return (
<div>
<p>현재 카운트: {count}</p>
<button onClick={() => setCount(count + 1)}>증가</button>
</div>
);
}
(13) 서버 컴포넌트와 클라이언트 컴포넌트의 주된 차이점은 무엇인가요?
- 서버 컴포넌트는 서버상에서 실행되며, 브라우저에서 실행되는 클라이언트 컴포넌트와 달리 사용자와의 상호작용이 필요한 메서드나 클라이언트 사이드 렌더링을 위한 React의 기능(예: useEffect, useState)을 사용할 수 없습니다.
- 클라이언트 컴포넌트는 "use client" 선언을 통해 브라우저에서 실행되며, UI 상호작용 및 동적 데이터 관리가 필요할 때 사용됩니다.
(14) SSR은 무조건 좋을까요? 장점과 단점에 대해 말씀해주세요.
- 장점
- 사용자에게 항상 최신의 데이터를 제공할 수 있습니다.
- 검색 엔진 최적화(SEO)에 유리합니다.
- 단점
- 서버 부하가 증가할 수 있습니다.
- 페이지 로딩 속도가 느려질 수 있습니다.