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

min5x5·2023년 11월 13일

CSR CSS Module SSR Styles JSX hydration nextjs rehydration 노마드코더

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

목록 보기

1/2

#0 Introduction

create project

npx create-next-app@latest
npx create-next-app@12 // 12 version으로 강의 진행하기 때문에

#1 Framework Overview

#1.0 Library vs Framework

framework는 정해진 틀과 규칙을 따라서 만드는 것
library는 내가 원할 때, 사용하고 싶을 때 사용하는 것

nextJs는 프레임워크!이다.

#1.1 Pages

/pages 안에서 'index.js'라는 파일을 만들어서 코드를 입력하면, / 페이지에서 컴포넌트를 불러온다.
/pages 안에서 'about.js'라는 파일을 만들어서 코드를 입력하면, /about 페이지에서 컴포넌트를 불러온다.

create react-app만을 한다면, React router Dom을 다운받아야 하고, 설정해야하고, router를 만들고 routes를 설계하고 compoonent를 import 해야하고 router를 render해야 한다.

nextJS는 이 과정이 필요 없다!!
파일 이름이 url이 되고, component명은 중요하지 않다. export default만 해주면 된다!

404 페이지 또한 자동으로 만들어준다.
JSX를 사용할 때 react를 import 해줄 필요가 없다.

#1.2 Static Pre Rendering

NextJS는 앱에 있는 페이지들이 미리 렌더링 된다. 정적(Static)으로 생성된다.

Client Side Rendering

'create react-app'
1.

만 HTML로 가져온다.
2. 브라우저가 react.js를 다운받고, 모든 javascript를 요청해서 다운받는다.
3. 브라우저가 javascript와 react.js를 실행시킨다.
3. react.js가 렌더링된 후에야 유저는 react app을 보게 되고, 상호작용이 가능하다.

브라우저가 javascript, react 등 모든 것을 fetch한 후에야 UI가 보인다.
브라우저가 자바스크립트를 가져와서 client-side의 자바스크립트가 모든 UI를 만드는 것이다.
인터넷 속도가 느린 경우, 브라우저는 비어있는 div만 가져와서 빈화면이 보이게 된다.
자바스크립트가 활성화되어있지 않은 경우, 태그만 확인 가능하다.

Server Side Rendering

'create next-app'
1. 페이지를 열면, HTML이 로딩된다.
2. 이후에 reactJS가 클라인트로 전송되었을 때, reactJS 앱이 된다.
(reactJS를 프론트엔드 안에서 실행하는 것을 hydration이라고 부른다.)

유저가 페이지를 요청하면 실제 HTML이 있다. 비어있지 않은! 진짜 HTML이 있다.
nextJS가 미리 생성한다. 초기 상태로 pre-rendering한다.
인터넷 속도가 느리거나, 자바스크립트가 비활성화 되어있더라도 진짜 HTML을 얻게 된다.

nextJS는 reactJS를 백엔드에서 동작시켜서 초기 페이지를 미리 만든다. component들을 render시킨다. 렌더링이 끝났을 때 HTML이 되고, nextJS는 HTML을 페이지의 소스코드에 넣어준다.
그렇기 때문에, 유저는 javascript와 reactJS가 로딩되지 않았더라도 콘텐츠를 볼 수 있게 된다.
이후에 reactJS가 로딩되었을 때, 기본적으로 이미 존재하는 것들과 연결이 되어서 일반적인 reactJS앱이 된다.

장점!

유저가 코드를 다운받아 react를 실행시키길 기다리지 않아도 된다!
유저가 웹사이트에 가면, 초기 상태의 component로 된 미리 생성된 HTML 페이지를 보게 된다.
그리고 상호작용이 일어나면 reactJS는 그것을 받아서 아주! 잘! 작동한다!!
자바스크립트가 비활성화되면 reactJS가 로딩되지 않지만, 유저들은 앱의 초기 HTML을 볼 수 있다!
SEO에도 좋다!

#1.3 Routing

NextJs 어플리케이션에서 anchor 태그를 네비게이팅하는 데 사용하면 안된다.
앱 내에서 페이지를 네비게이트할 때 사용해야만 하는 컴포넌트가 따로 있다.
anchor 태그를 사용하면 전체 어플리케이션이 새로고침된다.
client-side navigation이 없다는 뜻이다.

<a href="">Home</a>
<a href="/about">About</a>

대신 Link 태그를 사용한다.

import Link from "next/link";

// v12
<Link href="/">
	<a className="">Home</a>
</Link>


// v13 <Link>는 항상 <a>를 렌더링 하고 기본태그에 props를 전달할 수 있다.
<Link href="/about">
  About
</Link>

useRouter 훅을 사용할 것이다.

import Link from "next/link";
import { useRouter } from "next/router";

export default function NavBar() {
  const router = useRouter();
  return (
    <nav>
      <Link href="">
        <a style={{ color: router.pathname === "/" ? "red" : "blue" }}>Home</a>
      </Link>
      <Link href="/about">
        <a style={{ color: router.pathname === "/about" ? "red" : "blue" }}>
          About
        </a>
      </Link>
    </nav>
  );
}

#1.4 CSS Modules

xxx.module.css 파일에 css처럼 작성한다.
CSS Modules이라고 부르는데, 클래스에 텍스트로 적는 대신 javascript 오브젝트에서의 프로버티 형식으로 적는다.
브라우저에서 클래스 이름을 확인해보면 이름이 다르다. 페이지가 빌드될 때 NextJS가 클래스이름을 무작위로 바꿔준다. 클래스 이름의 충돌이 일어나지 않는다!
NextJS 컴포넌트 내에서 css를 import 하고 싶다면, module이어야 한다.

// NavBar.module.css
.link {
	text-decoration: none;
}

.active {
	color: tomato;
}

// NavBar.js
...
<Link href="/">
	<a className={`${styles.link} ${router.pathname === "/" ? styles.active : ""}`}>
    HOME
    </a>
</Link>
<Link href="/about">
	<a className={[styles.link, router.pathname === "/about" ? styles.active : ""].join(" ")}
</Link>
...

#1.5 Styles JSX

어플리케이션에 styles를 추가하는 또다른 방식
부모 컴포넌트가 사용하고 있더라도 상관없다.
JSX style은 해당 컴포넌트 내부로 범위가 한정된다.
props를 추가할 수 있다.

<style jsx>{`
	nav {
    	background-color: tomato;
    }
    a {
    	text-decoration: none;
    }
    .active {
    	color: ${props.color};
    }
`}</style>

#1.6 Custom App

NextJS로 작업할 때 페이지별로 생각해야 한다!
NextJs는 '_app.js'파일을 먼저 확인한다. 이후에 다른 컴포넌트를 렌더링한다.
_app.js 파일은 어떻게 페이지가 있어야 하는지, 어떤 컴포넌트가 어떤 페이지에 있어야만 하는지 알려준다.
css module이 아닌 global styles를 import 할 수 있다.

import NavBar from "../components/NavBar";
import "../styles/global.css";

export default function App({ Component, pageProps }) {
    return (
        <>
            <NavBar />
            <Component {...pageProps} />
            <style jsx global>{`
                a {
                    color: white;
                }
            `}
            </style>
        </>
    );
}

#1.7 Recap

hydration?
Hydration은 서버에서 생성된 HTML 마크업과 클라이언트 측 JavaScript를 연결하는 프로세스를 나타냅니다. 서버 측 렌더링을 통해 생성된 페이지의 초기 상태와 마크업이 클라이언트로 전송되며, 클라이언트는 이 정보를 사용하여 페이지의 초기 렌더링을 수행합니다.

rehydration?
Rehydration은 클라이언트에서 서버로부터 받은 초기 데이터를 사용하여 페이지를 다시 생성하는 프로세스를 나타냅니다. 이 초기 데이터는 페이지의 초기 상태와 일치하며, 클라이언트 측 JavaScript가 페이지를 다시 렌더링할 때 사용됩니다. 이를 통해 초기 페이지 로드 후에도 사용자에게 부드러운 경험을 제공할 수 있습니다.

min5x5

삶에 변화를 만드는 개발자

다음 포스트

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