📚 진행한 공부 📚

• NextJs 개요

01. NextJs 소개

(1) 공식문서에서의 소개

React 프레임워크인 NextJs

(2)프레임워크와 라이브러리 차이

• 프레임워크

  개발자가 기능 구현에만 집중할 수 있도록 필요한 모든 프로그래밍적 재원을 지원하는 기술의 조합

• Spring Framework : Java 기반의 웹(백엔드) 프레임워크
  • FE까지 가능한 full stack coverage framwork
  • JSP, Themeleaf

• Vue.js, Angular.js : JavaScript 기반 웹 프론트엔드 SPA 프레임워크
• Django, Flask : Python 기반 웹 프레임워크
• Ruby on Rails
• .NET Framework
• Express.js, NestJS : JavaScript 기반 백엔드 프레임워크

• 라이브러리

  공통 기능의 모듈화가 이루어진 프로그램의 집합

• React.js, react-router-dom, redux

  제어의 역전(IoC : Inversio of Control)으로도 설명할 수 있음

  
  본래 개발 시 제어를 하는 것은 개발자의 역할

프레임워크를 사용하는 경우 시키는 대로 코드를 짜게 되면 프레임워크가 알아서 제어의 흐름을 가져가는 것

즉, React에서는 Routing을 구현하기 위해 명령어를 통해 라이브러리를 설치하고, 세팅을 해야했지만
NextJs에서는 미리 정해뒀기 때문에 그 방법에 맞게 코드만 적재적소에 넣어주면 됨

(3) 라이브러리로서의 React.js / 프레임워크로서의 Next.js

• React.js
  • 공식홈페이지: UI를 만들기 위한 라이브러리
  • 그 자체만으로 프레임워크라 불리기엔 기능 부족

• Next.js

  • 공식홈페이지: 웹 개발을 위한 React 프레임워크
  • React.js가 갖고 있는 기능을 확장
  • 웹 애플리케이션 개발에 필요한 다양한 기능과 구조를 제공

  다양한 기능

  1. 다양한 렌더링 기법: CSR, SSR, SSG, ISR
  2. 라우팅: 파일(폴더) 기반 라우팅
  3. route handler: 백엔드 가능
  4. 스타일링: CSS, Sass, CSS-in-JS
  5. 최적화, 번들링
     a. 코드 스플리팅, 이미지 최적화, 웹팩 설정 등

02. Next.js 사용 이유

(1) 쉬운 설정

• 개발자가 개발에만 집중할 수 있도록 framework 역할 충실히 수행
• 위에서 살펴본 Next.js는 우리가 필요로 하는 거의 모든 기능을 Default로 갖고 있음

(2) Full Stack

• API Route를 지원하여 full stack 개발이 가능하도록 함
• 작은 기업, 작은 프로젝트에서는 좋음
• 뚜렷한 한계점이 있음
  • 복잡한 백엔드 로직은 구현이 어렵거나 불가: WebSocket, WebRTC 등

    WebSocket, WebRTC 모두 실시간 통신을 위해 설계된 기술
    채팅이나 화상 회의, 파일 공유 등에서 사용된다고 생각하면 됨
    HTTP와 비교했을 때 엄청나게 효율적인 실시간 통신 제공

  • FE 로직과의 중속성 : 백엔드 로직만 변경해서 배포해야 하면 프론트엔드도 함께 배포해야 함
  • 그래서 아직까진 완벽하게 대체할 수는 없음

(3) 유용한 기법 제공

• (1) 렌더링
  • 기존 SPA 라이브러리에서 사용하던 CSR에서 벗어나
    SSR, ISR, SSG 등을 가능하게 함

• (2) 코드 스플리팅
  • 웹 페이지 로딩 시간을 줄이기 위한 방법
  • 전통적으로 우리는
    • 일반적인 웹사이트를 방문할 땐 해당 웹사이트 전체 코드를 한 번에 다운로드 받아서 처리
    • 방문하지 않는 페이지까지 다운로드 받아야만 하므로 오래걸릴 수 밖에 없음
    • 사용자가 최초 View를 보기 위한 시간이 오래 걸림

      TTV의 개념
      Time To View의 약자로써, 사용자가 최초 View를 볼 수 있을 때 까지의 시간을 뜻함

      TTV가 짧으면 짧을수록 사용자가 더 빠르게 콘텐츠를 볼 수 있고, 사용자 만족도나 서비스의 전반적인 품질에 직접적인 영향을 주기 때문에 TTV를 줄이는 것은 성능 최적화의 주요한 지표 중 하나로 채택

  • 코드 스플리팅을 사용하면
    • 사용자가 필요로 하는 부분만 우선 로딩
    • 나머지는 필요에 의해서만 로딩
    • TTV 향상
  React에서의 코드 스플리팅 구현

// LazyComponent는 비동기적으로 로드함
// Suspense 컴포넌트는 LazyComponent가 로딩중일 때는 fallback에 설정된 부분을 보여줌
// 로딩이 완료되면 그제서야 LazyComponent를 보여줌
import React, { Suspense, lazy } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

• Next.js는 이렇게 코드 스플리팅을 구현
  • 각 컴포넌트를 별도 JavaScript 번들로 분리
  • 사용자가 어떤 페이지에 방문할 때 필요한 부분만 로드하도록 보장
  • 프레임워크인 Next.js는 이런 부분을 개발자가 신경쓰지 않아도 알아서 다 해줌
    그래서 더더욱 애플리케이션 자체의 구조설계와 비즈니스 로직 구현에 집중할 수 있음

(4) Data Fetching

• 우리가 알고 있는 fetch 함수가 next.js에서는 좀 더 기능이 확장됐음
• 여러 옵션을 통해 한 번만 값을 가져올지, 일정 주기별로 가져올지, 지속적으로 계속 가져올지 결정할 수 있음
• 이 개념은 나중에 내울 SSR, SSG, ISR과 밀접한 연관이 있음

(5) 쉬운 배포

• Vercel에서 제공하는 Next.js인 만큼 배포가 굉장히 쉬움
• Full Stack 애플리케이션의 배포 프로세스
  • 전통적인 방법
    • 프론트엔드: vercel
    • 백엔드: aws ec2