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

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

---

DIL-week4-5_2024-03-29

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

오늘 읽은 내용을 markdown으로 간단히 메모
읽은 시간: 12시 50분 ~ 1시반
저녁약속 이슈 => 점심시간 공부

---

Next.js 톺아보기

_app.tsx 응용하기

• app.getInitialProps: context.ctx?.req?.url

  import App, {AppContext} from 'next/app'
  import type {AppProps} from 'next/app'
  
  ...
  
  MyApp.getInitialProps = async (context: AppContext) => {
  	const appProps = await App.getInitialProps(context)
  	const isServer = Boolean(context.ctx.req)
  	console.log(
  		`[${isServer ? '서버' : '클라이언트'}] ${context.router.pathname}에서 ${context.ctx?.req?.url} 요청`
  	)
  	return appProps
  }
  

• 실행 절차 | 순서 | 로그 | 이유 | | ----------------------------------------------------------- | ----------------------------------------------------------- | ------------------------------------------------------------------ | | 자체 페이지 getInitialProps를 방문 | [서버] /test/GIP에서 /test/GIP를 요청 | 서버 사이드의 랜더링 전체적으로 작동 | | getServerSideProps가 있는 페이지를 <Link>를 이용하여 방문 | [서버] /test/GSSP에서 /_next/data/~~/test/GSSP.json을 요청 | 페이지에 서버 관련 로직이 있더라도 json 파일만을 요청하여 가져온다 | | 다시 1번의 페이지를 <Link>를 이용해서 방문 | [클라이언트] /test/GSSP에서 undefined를 요청 | | | 다시 2번의 페이지를 <Link>를 이용해서 방문 | [서버] /test/GSSP에서 /_next/data/~~/test/GSSP.json을 요청 | 해당 페이지의 json 요청 (req.url이 /_next로 시작) |
• 정상적인 최초 페이지 접근
  1. req가 있다면? 서버로 오는 요청
  2. req.url이 /_next로 시작하지 않는다 = 클라이언트 랜더링으로 인한 요청이 아님
  3. 접근 요청하는 pathname이 에러 페이지가 아님

  MyApp.getInitialProps = async (context: AppContext) => {
    const appProps = await App.getInitialProps(context);
    const {
      ctx: { req },
      router: { pathname },
    } = context;
  
    if (
      req && // 1
      !req.url?.startsWith("/_next") && // 2
      !["/500", "/400", "/_error"].includes(pathname) // 2
    ) {
      doSomethingOnlyOnce(); // 최초로 서버 사이드 랜더링을 수행했을 때, 코드를 실행할 수 있다
    }
  
    return appProps;
  };
  

Next.config.js

• basePath: 접근 가능한 주소 (url prefix)

  • { basePath: “docs” }는 도메인/docs 에서 서비스 시작
  • 랜더링 시 주소에 basePath가 붙은 채 클라이언트 랜더링
  • Next.js 제공 기능이므로 ⇒ a, window.location.push에 적용 안 됨

• powerByHeader: false

  • 응답 헤더 X-Power-by: Next.js 정보 제공 ⇒ 보안 관점에서 취약점이므로 false가 좋다

• redirect 메소드: 정규식 사용 가능!

  {
  redirects() {
    return [
      {
        // /tag/foo => /tag/foo/pages/1
        source: '/tag/:tag',
        destination: '/tag/:tag/pages/1',
        permanent: true,
      },
      {
        // /tag/foo/page/1 => /tags/foo/pages/1
        source: '/tag/:tag/page/:no',
        destination: '/tags/:tag/pages/:no',
        permanent: true,
      },
      {
        // /tags/foo/pages/something => /tags/foo/pages/1
        source: '/tags/:tag/pages/((?!\\d).*)',
        destination: '/tags/:tag/pages/1',
        permanent: true
      }
    ]
  }
  }
  

• reactStrictMode: 리액트 엄격 모드, default false임. true롤 리액트 업데이트에 대비

• assetPrefix: 동일 호스트가 아닌 CDN에 업로드

  • static 리소스들이 해당 주소 있다고 가정 ex) 정적인 리소스를 별도 CDN에 업로드

  assetPrefix: isProduction ? "https://cdn.somewhere.com" : undefined;