선언형 vs 명령형

• 선언형 : 내가 무엇을 하기 위해 필요한 일들을 직접 하나하나 설명해주는 것
• 명령형 : 내가 무엇을 하고싶은지만 알려주는 것

피자를 먹고싶을 때 내가 보는 레시피와 피자 가게에 주문하는 것의 차이라고 볼 수 있다.

• 레시피 : 피자 재료를 준비하고 밀가루를 이용해 도우를 만들고...
• 주문 : 피자를 만들어 주세요

코드를 예시로 들면 화면에 어떤 숫자를 띄우고 그 숫자를 바꾸기 위해선 바닐라 js에서는 id나 class로 직접 DOM에 접근하여 화면에 표시된 숫자의 element를 가져온 다음에 숫자를 바꾸고 화면에 다시 바뀐 숫자를 넣어줘야 하지만 react에서는 setState만 사용하면 나머지 작업은 react가 알아서 해준다.

NextJS를 사용해야 하는 이유

개발, 배포 시에 더 많은 기능 제공

• 개발 시에는 Typescript, ESLint, Fast Refresh 등의 기능 제공
• 배포 시에는 코드의 성능과 접근성을 높이는 것을 목표로 코드 변환 기능 제공

Next.js는 Rust로 만든 SWC라는 자바스크립트 컴파일러를 통해 이런 기능을 제공한다.

컴파일링, 미니파잉, 번들링, 코드 스플리팅 등의 기능 제공

• 컴파일링 : 작성한 코드를 컴퓨터가 알아볼 수 있도록 컴파일
  • JSX등의 문법은 컴퓨터가 읽을 수 없으므로 자바스크립트로 변환
  • 자바스크립트 버전에 맞게 변환
  • 개발 환경에서는 코드 편집 시에 실행되고 배포하기 위한 빌드 단계에서도 실행된다.
• 미니파잉 : 작성한 코드를 압축
  • 코드를 작성할 때 사람은 사람이 알아보기 쉽게 코드를 작성하는데, 이 때 주석, 공백, 들여쓰기, 엔터 등 코드 실행에 불필요한 것들이 들어간다.
  • 기능에는 영향을 주지 않으면서 파일 크기를 줄이기 위해 코드를 압축한다.
  • Next.js에서는 자바스크립트와 CSS파일을 자동으로 압축해준다.
• 번들링 : 종속성 파일 압축
  • 개발할 때 여러 모듈, 컴포넌트 등을 사용하는데, 종속성이 발생한다.
  • 번들러를 통해 이런 종속성 파일을 하나로 합치고, 이는 웹에 접속하는 사용자의 파일 요청 횟수를 줄일 수 있다.
• 코드 스플리팅 : 진입점에 필요한 코드들만 로드하도록 분할하는 과정
  • 보통 웹을 구성할 때, 여러 진입점을 나누게 된다.
    ex) “/blog”, “/portfolio” 등
  • 각 진입점에는 사용해야 하는 js파일이 있다.
  • 처음에 웹에 접속할 때 모든 진입점들에 사용되는 js파일을 불러오면 로딩 시간이 오래 걸리기 때문에 파일들을 해당 진입점에서 사용하는 코드들만 담은 파일로 분할한다.
  • 이로 인해 초기 로드 시간을 개선할 수 있다.
  • Next.js에서는 추가로 아래의 기능들을 제공한다.
    • 페이지 간에 공유되는 코드는 다시 불러오지 않도록 따로 다른 번들로 분할
    • 초기 페이지 로드 후에 사용자가 탐색할 가능성이 있는 다른 페이지의 코드를 미리 로드
      ex) 사용자가 다른 진입점의 링크를 담은 요소에 마우스를 올렸다면 그 진입점으로 접근할 가능성이 높으므로 그 진입점의 코드를 미리 다운로드해준다.

Next.js에서는 빌드 시에 다음 파일들을 생성

• 정적 HTML 파일들
• 서버에서 렌더링하는 자바스크립트 코드
• 클라이언트에서 페이지를 인터렉티브하게 해주는 자바스크립트 코드
• CSS 파일들