NextJS란?

조재일·2023년 3월 30일
0
post-thumbnail

해당 글은공식홈페이지를 번역해서 그대로 가져온 것과 본인이 공부한 내용이 섞여있습니다.
더 읽기 쉬운 컨텐츠는 주말에 한번에 올리고있습니다.

Next.js는 빠른 웹 애플리케이션을 만들기 위한 구성 요소를 제공하는 유연한 React 프레임워크이다.
하지만 이게 정확히 무슨 뜻인지 알아보도록하자.

웹 애플리케이션을 구축할 때 고려해야 할 몇 가지 사항이 있다.

  • 사용자 인터페이스
    • 사용자가 애플리케이션을 소비하고 상호작용하는 방식이다.
  • 라우팅
    • 사용자가 애플리케이션의 다른 부분으로 이동하는 방법이다
  • 데이터 가져오기
    • 데이터가 어디에 있으며 가져오는 방법이다.
  • 렌더링
    • 정적 또는 동적 콘텐츠를 언제 어디에 렌더링 할지 정한다.
  • 통합
    • 사용하는 제3자 서비스 CMS, 인증, 결제 등 이것들에게 연결하는 방법이다
  • 인프라
    • 애플리케이션 코드를 배포, 저장 및 실행하는 위치
  • 성능
    • 최종 사용자를 위해 애플리케이션을 최적화하는 방법이다
  • 확장성
    • 팀 데이터 및 트래픽이 증가함에 따라 애플리케이션이 적응하는 방법
  • 개발자 경험
    • 팀이 애플리케이션을 구축하고 유지 관리하는 경험

React란 무엇인가?

React는 대화형 사용자 인터페이스를 구축하기 위한 JS 라이브러리이다
여기서 말하는 사용자 인터페이스란 사용자가 스크린에서 보고 상호작용하는 요소들을 의미한다.

라이브러리란, React UI를 구축하는 데 도움이 되는 함수를 제공하지만, 어디에 사용할지는 개발자의 결정에 달려 있음을 의미한다

React의 성공의 일부는 애플리케이션 구축의 다른 측면에 대해 상대적으로 명확하지 않다는 것이다.
하지만 이것은 또한 완전한 React 애플리케이션을 처음부터 구축하는 데 어느 정도 노력이 필요함을 의미한다

개발자는 도구를 구성하고 공통적인 애플리케이션 요구 사항에 대한 솔루션을 재창조하는 데 시간을 투자해야한다

NextJS란 무엇인가

Next JS는 웹 애플리케이션을 만드는 데 필요한 구성 요소를 제공하는 React Framework이다.

프레임 워크란 React에 필요한 도구 및 구성을 처리하고, 애플리케이션에 대한 추가적인 구조, 기능 및 최적화를 제공한다.

React를 사용하여 UI를 구축한 후, 라우팅, 데이터 가져오기, 통합과 같은 일반적인 애플리케이션 요구 사항을 해결하기 위해 점진적으로 Next.js 기능을 적용할 수 있다.

이를 통해 개발자와 최종 사용자의 경험을 개선할 수 있다.

Next JS는 왜 필요한가?

React는 UI 렌더링을 위한 JS 라이브러리로, 클라이언트 측에서만 작동한다.

즉, React만으로는 정적 사이트 생성과 Server Side Rendering(SSR)을 구현하고 어렵다.

SSR을 지원하는 NEXT JS를 사용하면 초기 페이지 렌더링 속도가 빠르고 SEO 최적화가 쉽다.

NextJS는 React에서 사용하는 Single Page Application(SPA) 방식을 사용하려 SSR과 SPA 둘다 사용하는 약점을 보완할 수 있는 프레임워크이다.

Next JS의 동작방식

개발환경과 프로덕션 환경

코드가 실행되는 환경으로 생각할 수 있다
-> 개발자가 자신의 컴퓨터에서 코드를 작성하고 실행하는 것 (개발환경)

개발 중에는 애플리케이션을 로컬 머신에서 빌드하고 실행한다.
-> 개발자가 개발용 컴퓨터에서 애플리케이션의 소스 코드를 작성하고, 변경 사항을 바로 확인하려고 로컬 서버에 애플리케이션을 빌드하고 실행한다.

변경 사항을 바로 확인하려고 로컬 서버에 애플리케이션을 빌드하고 실행한다는 것이 정확이 어떤 것인가?
쉽게 말해서 next dev 로 실행하면 로컬 서버에서 애플리케이션을 빌드하고 실행하는 것이다.

프로덕션으로 가는 것은 애플리케이션을 배포하고 사용자가 사용할 준비가 된 상태로 만드는 프로세스이다.

Nextj.js가 적용되는 방식

.
Next.js는 애플리케이션의 개발과 프로덕션 두 단계에 대한 기능을 제공한다

개발단계

개발단계에서는 Next.js가 개발자와 개발 경험을 최적화 하도록 최적화 한다

TypeScript 및 ESLint 통합, Fast Refresh 등의 기능을 포함하여 개발자 경험을 향상시키는 기능을 제공한다.

프로덕션 단계

Next.js가 최종 사용자와 사용자 경험을 최적화하도록 최적화된다.

애플리케이션 코드를 성능 및 접근성을 향상시키도록 변환한다.

각 환경에는 다른 고려사항과 목표가 있으므로, 개발에서 프로덕션으로 애플리케이션을 이동하는 데는 많은 작업이 필요하다.

Compiling이란?

개발자들은 JSX, TypeScript 및 최신 JS 버전과 같이 보다 개발 친화적인 언어로 코드를 작성한다

이러한 언어들은 개발자의 효율성과 편의성을 향상시키지만, 결국에는 브라우저가 이해할 수 있는 JS로 컴파일 되어야 한다

컴파일이란?
한 언어로 작성된 코드를 다른 언어나 해당 언어의 다른 버전으로 출력하는 과정을 말한다.

Next.js에서는 개발 중에 코드 편집 중에 컴파일이 발생한다.

애플리케이션을 제품으로 준비하기 위한 빌드 단계에서 컴파일이 발생한다

Minifying이란?

개발자들은 사람이 읽기 쉬운 코드를 작성한다

이러한 코드는 주석, 공백, 들여쓰기 및 여러 줄과 같은 코드 실행에 필요하지 않은 추가 정보를 포함할 수 있다.

minification은 코드의 기능을 변경하지 않으면서 줄바꿈 같은 위에서 말한 불필요한 코드 포맷을 없애는 작업을 말한다.

즉, 정리하자면 개발 단계에서 코드를 수정할때마다 컴파일이 발생하고 빌드 단계에서 컴파일된 파일들이 minification되어서 최종적으로 배포된다.

bundling이란?

개발자들은 자신들의 애플리케이션을 모듈, 컴포넌트 및 함수로 분할하여 더 큰 조각으로 구성할 수 있도록 한다.

내부 모듈 및 외부 제3자 패키지를 내보내고 가져오면 파일 의존성이 복잡한 웹이 형성된다.

더 쉽게 말하자면
개발자들은 애플리케이션을 만들때, 컴포넌트를 나누거나 함수를 따로 만든다.
그러면 이러한 것들을 import export하면 어떠한 파일은 어떤 것이 없으면 안되고, 어떤 것은 어떠한 파일이 안되는 등 의존성이 많이 꼬여서 복잡합 웹이 되는 것이다.

bundling은 파일 간의 의존성을 해결한다

bundling은 브라우저에서 최적화된 번들로 파일을 병합하는 프로세스이다.

이것으로 사용자가 웹 페이지를 방문할 때 파일 요청 수를 줄이는 것이 목표이다

웹 페이지를 방문할 때 서버에서 여러 개의 파일을 내려받는 것이 아니라 번들링 된 파일을 내려받아 더 빠르게 페이지를 로드할 수 있다.

code splitting이란?

개발자들은 보통 여러 URL에서 액세스할 수 있는 여러 페이지로 애플리케이션을 나눈다.

이러한 각 페이지는 애플리케이션의 entry point가 된다.

Code Splitting은 각 entry point에서 필요한 작은 chunk로 애플리케이션 번들을 분할하는 프로세스이다.

Entry Point란?
애플리케이션에서 다른 URL에서 접근할 수 있는 각각의 페이지를 의미한다
만약 /about 페이지에 접근한다고 했을때, page/about.tsx의 파일의 컴포넌트가 엔트리포인트이다.

Chunk란?
해당 Page에서만 필요한 JavaScript 코드를 의미한다
코드를 chunk 단위로 분할하면, 해당 페이지가 불려질 때 필요한 코드만 불러오기 때문에 초기 로딩속도를 향상시킬 수 있다.

목표는 해당 페이지를 실행하는 데 필요한 코드만 로드해서 애플리케이션의 초기 로드 시간을 개선하는 것이다.

Next JS는 코드 스플리팅을 내장하고 있다.

pages/ 디렉토리 내의 각 파일은 build 단계에서 Next.js만의 JavaScript 번들로 자동으로 분할 된다.

페이지 간에 공유되는 모든 코드도 다른 번들로 분할되어 동일한 코드를 다시 다운로드하는 것을 피한다.

초기 페이지 로드 후, Next.js는 사용자가 다음으로 이동할 가능성이 높은 다른 페이지의 코드를 미리 로드 할 수 있다

어떻게 미리 예측하는가 ?
Next.js의 기본 Link라는 컴포넌트를 사용해서 내부 링크를 처리한다.
Next.js는 이러한 Link라는 컴포넌트로 사용자가 다음에 사용할 페이지를 예측할 수 있다

그러면 Link가 너무 많은 사이트는 페이지 로딩이 느려지겠네?
그렇다. 그래서 Link라는 컴포넌트에는 prefetch 속성이 있다
<Link href=”” prefetch={true or false}>
이것을 false로 두면 미리 불러오지 않아서 초기 페이지 렌더링 속도가 빠를 수 있지만 Link를 클릭할때 로딩이 발생한다.

동적 import는 처음에 로드 할 코드를 수동으로 분할하는 또 다른 방법이다.

build time과 Runtime

애플리케이션을 build하면, Next.js가 코드를 프로덕션에 맞게 변환해서 서버에 배포하고 사용자가 사용할 준비가 된 최적화된 파일을 생성한다.

위에 말한 최적화된 파일이란

  • 정적으로 생성된 페이지를 위한 HTML 파일
  • 서버에서 페이지를 렌더링하기 위한 JS 코드
  • 클라이언트에서 상호작용을 위한 JS코드
  • CSS 파일

Runtime은 애플리케이션이 build 및 배포된 후 사용자의 요청에 응답하여 실행되는 기간을 말한다.

즉, Runtime을 애플리케이션이 실행되는 시간 전체를 의미한다.

Client와 Server

웹 애플리케이션에서 클라이언트는 사용자 기기에서 실행되는 브라우저를 말한다.

해당 브라우저는 어플리케이션 코드를 요청하기 위해 서버에 요청을 보낸다

그런 다음 서버로부터 받은 응답을 사용자가 상호 작용할 수 있는 인터페이스로 변환한다.

서버는 데이터 센터의 컴퓨터를 가리킨다.

애플리케이션 코드를 저장하고 클라이언트로부터 요청을 받아 계산을 수행한 후 적절한 응답을 반환한다.

profile
주니어 프론트엔드 개발자 입니다

0개의 댓글