박시은

(❁´◡`❁)

2 분 소요


1. 프레임워크와 라이브러리

Next.js는 React.js를 기반으로 만들어진 “프레임워크”이다.⭐

  프레임워크 라이브러리
정의 개발자가 기능 구현에만 집중할 수 있도록 필요한 모든 프로그래밍적 재원을 지원하는 “기술의 조합” 공통 기능의 모듈화가 이루어진 프로그램의 집합
종류 Spring Framework: Java 기반의 웹(백엔드) 프레임워크
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 : Inversion Of Control)이란 어떠한 일을 하도록 만들어진 “프레임워크”에 제어의 권한을 넘김으로써 클라이언트 코드가 신경 써야 할 것을 줄이는 전략을 말한다.(🐶🐝)



UI 만들기 위한 라이브러리인 React.js와 달리 웹 개발을 위한 React 프레임워크인 Next.js는 웹 애플리케이션 개발에 필요한 다양한 기능과 구조를 제공한다.

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



2. Next.js 사용 이유

① 설정이 쉽다.

  • 개발자가 개발에만 집중할 수 있도록 framework로서의 역할을 충실히 수행한다.


② Full Stack

  • API Route를 지원하여 full stack 웹 개발이 가능하도록 한다.
  • 하지만, WebSocket, WebRTC 등 복잡한 백엔드 로직은 구현이 어렵거나 불가하다.
  • 또한 FE 로직과의 종속성으로 백엔드 로직만 변경해서 배포해야 하면 프론트엔드도 함께 배포해야 한다는 단점이 존재한다.


③ 유용한 기법을 제공한다.

  • 렌더링
    • 기존 SPA 라이브러리에서 사용하던 CSR에서 벗어나 SSR, ISR, SSG등을 가능케 한다.
  • 코드스플리팅
    • Next.js는 코드스플리팅을 default로 지원한다.
    • 웹 페이지 로딩 시간을 줄이기 위해 원래는 해당 웹사이트 전체 코드를 한 번에 다운로드 받아 처리해 방문하지 않은 페이지까지 다운받아야 하므로 사용자가 최초 View를 보기 위한 시간이 오래 걸렸다.
    • 하지만 코드 스플리팅의 사용으로 사용자가 필요로 하는 부분만 우선 로딩하고 나머지는 필요에 의해서만 로딩함으로써 “TTV”를 향상 시켰다.
    • TTV(Time To View)⭐? 사용자가 최초 View를 볼 수 있을 때 까지의 시간
  • Next.js의 코드 스플리팅 구현 방법
    • 각 컴포넌트를 별도 Javascript 번들로 분리한다.
    • 사용자가 어떤 페이지에 방문할 때(어떤 컴포넌트를 볼 때) 필요한 부분만 로드하도록 보장한다.

④ Data Fetching

  • next.js에서는 좀 더 기능이 확장된 fetch 함수를 사용할 수 있다.
  • 여러 옵션을 통해 한 번만 값을 가져올지, 일정 주기별로 가져올지, 지속적으로 계속 가져올지 결정할 수 있다.


⑤ 배포가 쉽다.

  • vercel에서 제공하는 Next.js인 만큼 배포가 쉽다.



3. Next.js 역사

년도 버전 주요 변경사항
2016 1.0 - GitHub 오픈소스 프로젝트로 첫 출시
- 6가지 원칙 도입:
1. Out-of-the-box functionality requiring no setup
2. JavaScript everywhere + all functions are written in JavaScript
3. Automatic code-splitting and server-rendering
4. Configurable data-fetching
5. Anticipating requests (요구사항 예측)
6. Simplifying deployment
2017 2.0 - Next.js 2.0 출시
- 소규모 웹에서의 작업을 쉽게 할 수 있도록 개선:
1. 빌드 효율성 향상
2. HMR (Hot Module Replacement) 기능 도입
2018 7.0 - 에러 핸들링 기능 강화
- React Context API 지원으로 향상된 Dynamic Route handling
2020 9.3 - SSG, SSR, ISR (Incremental Static Regeneration) 도입
- Rewrite, Redirect 등 새로운 기능 추가
2022 13.0 (Breaking Changes) - App Route 도입
- React 18 버전의 Server Components 적용
- (Nested) Layouts 지원
- Turbopack 추가
2023 (5월) 13.4 - App Router의 stable version으로 안정화
- Production 환경에서 사용 가능한 수준으로 안정화
2023 (10월) 14.0 - 메모리 관리 향상 (Edge runtime)
- 마크다운으로 복사/붙여넣기 가능한 정리 기능 도입


edge runtime이란?

  • 웹 애플리케이션의 일부분을 전 세계에 퍼져 있는 여러 서버 중 사용자에게 가장 가까운 서버에서 실행하는 기술을 말한다.
  • 애플리케이션이 사용자의 요청에 더 빨리 응답할 수 있다.



참조

댓글남기기

참고