2024.10.01

 

Next.js 소개

Next.js는 High-Quality 웹 어플리케이션을 만들 수 있다.

 

High-Quality?

1. 성능(Performance):
   • 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG) 기능을 제공하여 초기 로드 시간 단축
   • 코드 스플리팅 및 이미지 최적화와 같은 기능으로 런타임 성능 향상
   코드 분할 코드를 번들 된 코드 혹은 컴포넌트로 분리하는 것. 이렇게 하면 필요에 따라 특정한 컴포넌트만 로딩하거나, 병렬로 로딩할 수 있다.
2. SEO(Search Engine Optimization):
   • 서버 사이드 렌더링을 통해 웹페이지의 콘텐츠가 초기 로드 시 완전히 렌더링 되므로, 검색 엔진이 콘텐츠를 쉽게 인덱싱(인덱싱 메타 데이터 같은 정보를 분류하는 과정)
   • 정적 사이트 생성으로 미리 생성된 HTML 파일을 제공하여 SEO 성능을 극대화
3. 개발자 경험(Deceloper Experience):
   • 자동 코드 분할(Automatic Code Splitting), 핫 리로딩(Hot Reloading), 타입스크립트 지원 등 개발자가 생산성을 높일 수 있는 다양한 기능 지원
   • API 라우트 기능으로 백엔드와의 통합을 쉽게하고, 환경 설정이 적은(configuration-less) 개발 환경 제공
4. 확장성(Scalability):
   • 서버리스 함수 와 데이터 페칭 기능을 활용해 유연한 확장성 제공
5. 유연성(Flexibility):
   • React와 완전히 호환되며, 원하는 다양한 툴 및 라이브러리와 함께 사용 가능

라이브러리와 프레임워크

프레임워크

• 개발자가 기능 구현에만 집중할 수 있도록 모든 프로그래밍적 재원을 지원하는 기술의 조합
  • Vue.js, Angluar.js: JS기반 웹 프론트엔드 SPA프레임워크

라이브러리

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

모듈화: 기능 단위로 분해하고 추상화 되어 재사용 가능한 수준으로 만들어진 단위

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

중요한 차이점은 어플리케이션의 제어 흐름의 권한을 누가 가지고 있는지가 핵심이다.
라이브러리는 개발자 코드에 의해 사용된다. (필요할 때 능동적으로 호출해서 사용하기 때문)
반면, 프레임워크는 코드가 프레임워크에 의해 사용된다.

ex)
누가 라우팅을 위한 제어를 하고 있는가?
React: 개발자
Next.js: 프레임워크

라우팅으로만 프레임워크와 라이브러리를 나눌 순 없지만, 라우팅, 이미지 최적화, 서버 사이드 로직 추가 등등 미리 정해진 기능을 사용 방법에 맞추어 사용할 수 있다는 점에서 프레임워크와 라이브러리의 차이가 나뉘게 된다.

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

React.js

• 공식 홈페이지: UI 만들기 위한 라이브러리
• 제공되는 기능이 UI에 한정적임
  (상태관리 (Redux), 라우팅(React-router-dom), 스타일링 등의 기능이 합쳐져 있었다면 프레임워크로 불릴 수 있었을지도 모른다)
  Next.js
• 공식 홈페이지: 웹 개발을 위한 React 프레임워크
• React.js가 가지고 있는 기능을 확장
• 웹 애플리케이션 개발에 필요한 다양한 기능과 구조를 제공

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