[노마드코더] NextJS 시작하기 #1

• [노마드코더] NextJS 시작하기 #1
• [노마드코더] NextJS 시작하기 #2
• [노마드코더] NextJS 시작하기 #3
• [노마드코더] NextJS 시작하기 #4
• [노마드코더] NextJS 시작하기 #5

 

NextJS의 가장 기초를 배우기 위해서 강의를 들으려고 한다.

NextJS 시작하기 – 노마드 코더 Nomad Coders

 

우선 명령어를 사용해서 원하는 위치에 next프로젝트를 생성해준다. cmd나 vscode의 터미널에 입력해주면 된다.

npx create-next-app@latest

 

그런 다음 이제 pages안에 있는 파일을 모두 지워준다.

 

우선 라이브러리와 프레임워크의 차이점을 알아보자.

react는 언제든지 가져와서 사용할 수 있는 라이브러리고, nextJS는 이미 정해진 규칙에 따라서 코드를 작성하면 알아서 작동하게 해주는 프레임워크다.

 

 pages 폴더 안에 index.js 파일을 만들고

export default function Home() {
  return "hi";
}

코드를 작성한다. 

 pages 폴더 안에 about.js 파일을 만들고

export default function about() {
  return "about js";
}

코드를 작성한다. 

그 후 이제 npm run dev 를 터미널에 입력해서 웹페이지를 실행시키면 hi가 보이는 것을 확인 할 수 있다.

끝에 /about을 입력하면 about js가 나오는 것을 확인할 수 있다.

이렇듯 nextjs는 자동적으로 pages안에 about이라는 페이지를 만들면 /about으로 가면 자동으로 컴포넌트를 불러준다.

여기서 중요한 점은 파일의 이름이다. 파일의 이름이 곧 URL이 되기 때문이다. 

 

파일에 작성한 컴포넌트의 이름은 파일명과 같을 필요는 없다. 그러나 export default를 해줘야 웹페이지를 볼 수 있다.

만약 파일명이 about-us라면 /about-us 경로로 가면 about js라는 페이지를 볼 수 있을 것이다

next.js에서는 404 페이지를 커스텀할 수 있기 때문에 매우 유용하게 쓰일 수 있다.

또한 react를 import하지 않고 jsx를 사용할 수 있다. 그러나 react method(useState, userEffect)를 사용하려면 react를 import해줘야한다.

 

next.js의 가장 좋은 점 중에 하나는 모든 페이지들이 pre-rendering 된다는 것이다. 이것들은 정적(static)으로 생성된다. 

create react app을 사용하면 CSR(Client Side Render)를 하는 애플리케이션을 만들게 된다. 

CSR이란 브라우저가 유저가 보는 UI를 만드는 모든 것을 하는 것을 의미한다. 모든 버튼과 검색창 등의 UI들이 js로 렌더링 되어있고, 사용자가 보는 html 안에 포함되어 있지 않다. CRA를 사용한 웹페이지의 소스코드를 보면 하나의 div만 존재하고 모두 js로 이루어져 있다. 

브라우저가 자바스크립트를 가져와서 Client-side 자바스크립트가 모든 UI를 만드는 것이 CSR이다.

브라우저가 HTML을 가져올 때 비어있는 div만을 가져오고, 그 후에 모든 자바스크립트를 요청해서 자바스크립트와 react.js를 실행시키고 나서야 유저는 웹페이지를 볼 수 있다. js를 가져와야만 화면에 모든 UI를 띄울 수 있기 때문에 만약 네트워크 연결이 느리다면, 처음에 흰 화면만 보이고 천천히 화면이 로딩이 되는 것을 볼 수있다. 

=> client의 브라우저가 모든 일을 하기 때문에 초기 로딩 속도가 느리다. 또한 웹에서 js를 비활성화 하면 화면이 작동하지 않는다.

 

그러나 next에서는 js 비활성화를 해도 똑같이 잘 작동하는 것을 볼 수 있다. 그 이유는 nextjs를 사용하는 웹페이지의 소스코드를 보면 실제로 사용하는 html이 있는 것을 볼 수 있다. 그렇기 때문에 js를 사용하지 않거나 네트워크가 느리더도 사용자에게 html은 보여질 수 있다. 미리 렌더링이 되는 것이다.

index.js에

import { useState } from "react";
export default function Home() {
  const [counter, setCounter] = useState(0);
  return (
    <div>
      <h1>Hello {counter}</h1>
      <button onClick={() => setCounter((prev) => prev + 1)}>+</button>
    </div>
  );
}

 

다음과 같이 작성하고 http://localhost:3000/ 로 접속한다.

오른쪽 버튼 클릭해서 페이지소스보기를 누르면

 

다음과 같은 코드가 보이고 자세히 살펴보면 위에서 작성했던 코드인

을 발견할 수 있다.

 

페이지를 딱 열면 보는 것이 위에서 봤던 html코드이다. 그리고 나서 react.js가 클라이언트로 전송됐을 때, react.js앱이 된다. 이렇게 react.js를 프론트엔드안에서 실행하는 걸 hydration이라고 부른다. 

 

next.js는 react.js를 백엔드에서 동작시켜서 해당 페이지를 미리 만든다. 이게 component들을 render시킨다. 렌더링이 끝나면 이게 html이 되고, 만들어진 html을 아까 봤던 페이지 소스 안에 넣어준다. 

페이지 소스안에 html이 미리 들어가있게 된다면 SEO에 유리하다는 장점을 가진다.