[Next.js & React] 시작하기

이 글은 udemy의 Next.js & React - 완벽 정복 가이드 (incl. Two Paths) 강좌를 바탕으로 정리한 내용입니다.

1. Welcome to the Coursel

시작하도록 하겠습니다. 꾸준히 화이팅 🤟🤟

 

2. Next.js란 무엇인가? Next.js를 왜 사용하는 걸까?

NextJS는 프로덕션용 React 프레임 워크 입니다. 큰 규모의 프로덕션용 React 앱을 쉽게 구축할 수 있도록 해주는 많은 기능을 가지고 있습니다. ReactJS는 사용자 인터페이스 구축을 위한 JS 라이브러리입니다. 즉 Third Party 패키지로 프론트 엔드 프로젝트에 추가되는 라이브러리 입니다. 결국 클라이언트 측 JavaScript 코드라는 이야기 입니다. 주로 사용자 인터페이스 부분인 컴포넌트, 상태, 프로퍼티 등에만 초점을 맞추고 있기 때문에 라이브러리로 분류됩니다. 때문에 라우팅 혹은 인증 등이 필요할 경우 이를 돕는 라이브러리를 추가로 사용해야 합니다. 

 

한마디로 Next.js의 역할은 React 개발자인 여러분의 업무를 수월하게 만들어 주는 것입니다.

 

3. 핵심 기능 : Server-side Page (Pre-) Rendering

서버 사이드 렌더링(SSR)이란, 클라이언트 측이 아닌 서버 측의 페이지 상에 렌더링 되는 콘텐츠 처리를 의미합니다. React만을 이용해 구축된 일반적인 React App 에서 로딩된 React 페이지의 소스 코드를 확인해보면 페이지가 시작되는 부분부터 비어있습니다. 

 

React는 클라이언트 측 JavaScript 라이브러이기 때문에 렌더링은 전부 클라이언트 측에서 처리됩니다. 따라서 사용자가 페이지를 방문했을 때, 서버에서 클라이언트 측으로 전송되는 HTML 코드에는 별 내용이 없습니다. 예를 들어, 모임 약속과 같이 보여져야 하는 데이터를 서버로부터 fetch하는 경우, 데이터가 fetch 되는 동안 즉 요청이 전송될 때 잠깐 동안 페이지가 깜빡거리는 로딩 상태를 볼 수 있습니다. 이는 클라이언트 측에서 JavaScript 코드가 실행된 뒤에 데이터 fecth가 시작되기 때문입니다. 사용자 경험의 관점에서는 이러한 로딩이 이상적이지 않을 수 있습니다. 

 

반면 로그인을 해야지만 접근할 수 있는 관리 대시보드의 경우에는 검색 엔진 최적화(SEO)가 중요하지 않습니다. 하지만 검색 엔진을 통해 검색이 되어야 하고 많은 콘텐츠를 포함하고 있는 공개 페이지가 있을 경우 SEO가 중요해집니다. 이런 경우들에서는 서버 사이드 렌더링(SSR)이 도움이 됩니다. 

 

ReactJS에 서버 사이드 렌더링(SSR)을 추가하도록 해주는 내장 기능이 있긴 하나, 제대로 추가하기 어려울 수 있고 직접 거처야 하는 단계가 많습니다. 반면 NextJs에는 내장 서버 측 렌더링이 있으므로 자동으로 페이지를 미리 렌더링 하기 때문에 훨씬 쉽게 작업할 수 있습니다. 단순히 Html 뼈대만 있는 게 아니라 서버에서 받은 모든 콘텐츠가 이미 HTML 페이지에 포함되어 있습니다. 

 

4. 핵심 기능 : File-based Routing

NextJs 에는 코드 내 라우트 정의 없이, 파일과 폴더에 페이지와 라우트를 정의합니다. React와 달리 추가적인 코드를 작성하지 않아도 됩니다. 

 

5. 핵심 기능 : Key Feature: Build Fullstack React Apps! 

NextJS를 사용하면 개발자들이 React 프로젝트에 백엔드 코드를 추가하는 작업을 수월하게 할 수 있습니다. 또한 Server-side Rendering 을 통한 클라이언트 측 코드 뿐만 아니라 NojdeJS 코드를 통해 쉽게 백엔드 API를 React 프로젝트로 추가할 수 있습니다. 

 

6. Join Our Learning Community! 

 

7. Creating a NextJS Project 

npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app

Node.js에는 Node Package Manager가 포함되어 있는데, 이는 JavaScript 프로젝트의 라이브러리를 설치하고 관리하기 위한 실질적인 표준 도구입니다. Next 프로젝트 생성을 위해 이 도구를 사용하게 됩니다. 예를 들어 SSR의 경우 Node.js를 내부에서 사용합니다. 이 때문에 Node.js를 설치해야 합니다. 

 

prettier extension 설치 후 아래 설정까지 추가해줍니다.

 

8. 생성된 Project 분석하기

• pages : create-react-app으로 생성한 일반적인 표준 React 앱 내에는 public 폴더에 index.html 파일이 있는 반면, NextJS 앱 내에는 파일이 없습니다. 이는 이미 NextJS가 내장된 사전 렌더링이 포함되어 있기 때문입니다. 요청이 서버로 도달할 때에 싱글 페이지 애플리케이션(SPA)의 단일 페이지가 동적으로 사전 렌더링이 되어 콘텐츠를 포함한 초기 페이지를 반환합니다. 따라서 pages 폴더가 가장 중요합니다. 이 폴더에 파일 기반의 라우팅을 설정하기 때문입니다. 
• public 
• styles

 

9. 첫번째 데모 : NextJS 직접 사용해보기

npm run dev

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

npm run dev 는 개발 서버를 실행시킵니다. 개발 서버는 NextJs 페이지 및 앱의 전반을 담당하는 내장 서버로 코드를 확인해 파일에 변경 사항이 저장될 때마다 브라우저에 나타나는 페이지를 새로고침 하고 업데이트 해서 최고의 개발 경험을 제공해줍니다. 이후 앱의 배포 준비가 되면 deploy에 최적화된 출력값을 위해 npm run build를 실행해서 프로덕션 용으로 구축합니다. 이후 최적화된 서버를 시작하기 위해 npm start를 입력합니다. 

 

실행한 후, View Page Sorce를 클릭해 확인해보면 HTML 마크업 내에 화면에 나타난 텍스트 등의 모든 내용이 포함되어 있습니다. 페이지가 사전 렌더링이 되었기 때문입니다. 이 내장 페이지 사전 렌더링 기능이 표준 React App에 없는 NextJs가 제공하는 핵심 기능 중 하나입니다. 

 

❓Pre-rendering 이란?

Next.js에서는 기본적으로 모든 페이지를 프리 렌더링 합니다. HTML이 클라이언트 사이드에서 JS를 통해 생성되는 게 아니라 Next.js가 사전에 각 페이지를 만들어 놓습니다. 이때 각 HTML은 해당 페이지에 최소한으로 필요한 JS 코드와 결합되어 있습니다. 페이지그ㅏ 브라우저에 의해 로드될 때는 hydration이라는 프로세스를 거치게 됩니다. hydration은 JS 코드가 실행되어 해당 페이지를 완전히 인터렉티브하게 만드는 것을 의미합니다. 프리 렌더링을 할 경우, 프리 렌더링을 하지 않을 때보다 더 나은 성능과 SEO를 가출 수 있습니다. 

 

 

10. About This Course & Course Outline

• Basics & Foundation
  • File-based Routing
  • Page Pre-Rendering & Data Fetching
  • Combining "Standard React" & NextJS
  • API Routes & Fullstack Capabilities
• Advanced Concepts
  • Optimization Opportunities
  • Looking Behind the Scenes & Theory
  • Deployment & Configuration
  • Authentication
• Summaries & Refreshers

---

https://ahnanne.tistory.com/75

https://www.udemy.com/course/nextjs-react-incl-two-paths/