앞으로의 과제

Keyword

Next.js

framework와 library의 차이
라이브러리는 개발자가 필요할 때 불러와서 사용
프레임워크는 개발자가 프레임워크에 맞게 코드를 작성해야 한다

react를 사용할 때는 마음대로 폴더 구조를 짜고, 이름을 마음대로 설정하고 언제 react를 불러올지 직접 정할 수 있다
next.js는 프레임워크이기 때문에 정해진 룰을 따라서 작성한다
커스텀할 수 있는 것도 없다
추상화되어 어딘가에서 실행되고 있는 것

Next.js의 Fancy한 라우팅

pages 폴더에 index 파일을 만들면 "/" 로 라우팅 되고
pages 폴더에 about 파일을 만들면 "/about"으로 라우팅 되는 방식
awesome..
404 page도 기본으로 있음

export default 하는 react 컴포넌트를 가진 파일을 pages폴더 내부에 만들면
알아서 파일명으로 라우팅이 된다

// index.tsx

// component name은 어떻게 작성해도 상관 없음
import NavBar from "../components/NavBar";

export default function Home() {
  return (
    <div>
      <NavBar />
      <h1>hi</h1>
    </div>
  );
}


// about.tsx
import NavBar from "../components/NavBar";

export default function About() {
  return (
    <div>
      <NavBar />
      <h1>about</h1>
    </div>
  );
}

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

export default function NavBar() {
  const router = useRouter();
  return (
    <nav>
      <Link href="/"> // Link는 href를 설정하는 기능만 담당
    				// style, className등은 내부 a태그에 넣어줘야 동작한다
        <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>
  );
}

JSX문법 기본 탑재

파일명을 jsx로 할 필요도 없고 바로 jsx처럼 사용하면 된다
하지만 ts를 사용하면 tsx로 해줘야하는듯..ㅎ

ssr

react는 csr로 빈 페이지만 보여진다
자바스크립트를 비활성화 하면 noscript 태그 내의 것만 보여지게 된다 (흔치 않음)
csr은 client의 성능이 화면 렌더링 성능에 영향을 미친다

next.js는 앱에 있는 패이지들이 ssr로 미리 렌더링된다
정적으로 생성됨 -> 진짜 html 페이지가 생성된다
유저가 자바스크립트를 비활성화 했어도 html페이지는 볼 수 있고
느린 연결이어도 ssr을 하기 때문에 api를 사용한 것을 제외하곤 다 금방 렌더링 됨

hydration

next.js는 백엔드에서 react를 동작시켜서 페이지를 구성하고
컴포넌트를 렌더링 함
렌더링이 끝나면 html이 되고
1. 앱의 초기 상태를 활용해서 html을 pre-rendering
2. 페이지가 로딩되고 react.js가 클라이언트에 전송되면, react앱이 된다
-> react를 프론트에서 실행하는 것을 hydration