DIL: 모던 리액트 딥 다이브, 4주차-2

스터디: 월간 CS, https://github.com/monthly-cs/2024-03-modern-react-deep-dive
오늘 진행: 개인공부

---

DIL-week4-2_2024-03-26

| DIL 주차 | 범위 | 내용 | 오늘차 진도 | | -------- | ------ | ------------------------------- | ----------- | | 4주차 | 4, 8장 | SSR과 ESlint, 테스트 라이브러리 | 293p~310p |

오늘 읽은 내용을 markdown으로 간단히 메모
읽은 시간: 9시30분~11시

---

Next.js 톺아보기

Next.js

• 역사
  • PHP 대용품으로 위해 만들었었음, SSR
  • 당시 페이스북이 고려하던 SSR -> react-page
• Vercel
  • SWR, SWC, Turbopack, Svelte 등 영향력 있는 프로젝트를 개발 및 인수
• eslint-config-next: 구글과 협업해 만든 웹 지표 (core web vital)에 도움이 되는 지표
• next.config.js
  • reactStrictMode: 리액트 엄격 모드
  • swcMinify:
    • SWC 번들링 & 컴파일 (바벨 대용)
    • 빠르다 (Rust, 러스트는 C/C++ 만큼 빠름 + 병렬 처리)

Next13 page 라우팅

pages/_app.tsx

• 애플리케이션 전체 페이지의 시작점
  • 웹 앱 공통 설정 ex) 에러 바운더리, reset.css, 전역 데이터 제공 등
• 랜더링 위치
  • app에서 console.log을 찍어보면? => Next.js를 실행한 터미널에 기록
  • 페이지를 전환하면? => 브라우저에 로깅
  • 즉, 최초에는 서버 사이드 랜더링, 이후에는 app.tsx의 랜더링 실행

pages/_document.tsx

• DOM 요소
• hydrate 되기 전 상태
• Next 13, 두 가지 head
  • next/document의 head(DOM), next/head(SEO metadata)
• CSS-in-JS 스타일을 서버에서 모아 HTML로 제공한다

| 구분 | 랜더링 위치 | 기능 | | ------------- | ----------------- | ------------- | | _app.tsx | 서버와 클라이언트 | Next를 초기화 | | _documet.tsx | 서버 | HTML 설정 |

pages/_error.tsx

• _error.tsx

import { NextPageContext } from "next";

function Error({ statusCode }: { statusCode: number }) {
  return (
    <p>
      {statusCode ? `서버에서 ${statusCode}` : "클라이언트에서"} 에러가
      발생했습니다
    </p>
  );
}

Error.getInitialProps = ({res,err}: NextPageContext) => {
  const statusCode = res.statusCode: err? err.statusCode:"";
  return {statusCode}
}

export default Error;

pages/404.tsx

pages/500.tsx

• 서버 에러 핸들링
  • error와 500 있다면? 500 먼저 실행

pages/index.tsx

• react-pages에서 영감을 맏아 만들어진 페이지

| 페이지 | 내용 | 주소 | | -------------------------- | -------------------------------------------------------------------------------------------- | ---------------------- | | pages/index.tsx | 웹 사이트의 루트 | / | | pages/hello.tsx | pages 생략, 파일명으로 주소 접근 | /hello | | pages/hello/world.tsx | 디렉토리의 깊이만큼 주소 설정 | /hello/world | | pages/hello/[greeting].tsx | []는? 어떤 문자열도 들어갈 수 있음 (다만 이미 정의된 주소가 있다면 정의된 주소가 우선) | /hello/1 | | pages/hi/[…props] | […]는? 전개 연산자와 동일, 모든 하위의 주소 (props라는 변수의 배열로 감) | /hello/hi/bonjour/good |

// pages/hi/[...props].tsx

export default function HiAll({ props: serverProps }: { props: string[] }) {
  const {
    query: { props },
  } = useRouter();

  useEffect(() => {
    console.log(JSON.stringify(props) === JSON.stringify(serverProps)); // true
  });
  ...
}

export const getServerProps = (context: NextPageContext) =>{
  // 서버에서 값 가져오기
  const {
    query: {props}, // string | string[] | undefined
  } = context
}

server routing과 client routing의 차이

• Nextjs는 사전 랜더링을 지원한다. = 최초 페이지 랜더링을 서버에서 수행

  • a로 이동하는 경우: console.log의 경우 2번(서버에서 랜더링/클라이언트 hydrate)
  • link로 이동하는 경우: 클라이언트에서 필요한 자바스크립트만 불러온 뒤 라우팅하는 CSR

• 두 가지 장점을 살리기 위한 방식: 최초 페이지 빠르게 제공 + 싱글 페이지의 자연스러운 라우팅

  • <a> => <Link>
  • window.location.push 대신 router.push를 사용

서버 사이드 런타임 체크

export default function Hello() {
  console.log(typeof window === "undefined" ? "서버" : "클라");
}

• getServerSideProps를 제거하면?
  • 서버 사이드 랜더링이 필요 없는, 빌드 시점에 미리 만들어도 되는 페이지로 간주
  • 빌드 시점에서 미리 트리쉐이킹
    • 모든 작업이 서버에서 일어나는 것은 아님

pages/api/

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  res.status(200).json({ name: "John Doe" });
}

• BFF(backend-for-frontend)
• CORS(Corss-Origin Resource Sharing) 문제를 우회하기 위해 사용