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

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

---

DIL-week5-1_2024-04-01

| DIL 주차 | 범위 | 내용 | 오늘차 진도 | | -------- | ---- | -------------------------------------------------- | ----------- | | 5주차 | 9장 | 모던 리액트 개발 도구로 개발 및 배포 환경 구축하기 | 529p~528p |

오늘 읽은 내용을 markdown으로 간단히 메모
읽은 시간: 9시~10시반

---

모던 리액트 개발 도구로 개발 및 배포 환경 구축하기

Next.js로 리액트 개발 환경 구축하기

• 한땀한땀 만들기 챕터
• create-react-app은 유지보수되지 않을 가능성이 크다.
  • 2023년 1월 리액트 팀 => 보일러플레이트 CLI가 아니라 여러 리액트 기반 프레임워크를 제안하는 런처 형태로 변경될 것이라 밝힘

create-next-app 없이 구축하기

• tsconfig.json

{
  "$schema": "https://json.schemastore.org/tsconfig", // 자동완성
  "compilerOptions": {
    // "타입스크립트를 자바스크립트로 컴파일할 때" 사용하는 옵션

    "target": "ES5",
    // <target: 변환>
    // 변환을 목표로 하는 언어 버전 (폴리필까지는 지원하지 않는다.)

    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    /* <lib: 명세>
     * - es5 지원 목표일 때:
     *   => Promise, Map 객체를 폴리필해서 준비 했어도 존재를 모름
     *   => esnext를 추가해서 신규 기능에 대한 API 정보를 확인
     *   => 에러 발생하지 않게 하기
     * - DOM:
     *   - 타입스크립트 환경에서 window, document 등 브라우저 API 명세 사용
     */

    "allowJs": true,
    // 자바스크립트도 컴파일 할 지 -> js와 ts가 혼재된 상황에서 사용한다 ex) TS 마이그레이션

    "skipLibCheck": true,
    // 라이브러리에서 제공하는 d.ts(타입 파일) 검사 여부
    // 컴파일 시간이 길어지므로 일반적으로 꺼놓는 경우 많음

    "strict": true,
    /**
     * <타입스크립트 컴파일러 엄격모드>
     * - alwaysStrict: true
     *   - 모든 자바스크립트 파일에 "use strict;" 추가
     * - strictNullCheck: true
     *   - 엄격한 널 검사: null과 undefined 구분 (런타임 에러를 방지하자1)
     * - strictBindCallApply: true
     *   - call, bind, apply에 정확한 인수 수 요청 (런타임 에러를 방지하자2)
     * - strictFunctionTypes: true
     *   - 함수 타입에 대한 엄격함~ (켜놓자~)
     * - strictPropertyInitialization: true
     *   - 클래스 냅의 프로퍼티에 값 할당 타입 엄격하게
     * - noImplicitAny: true
     *   - 타입 명시하지 않은 변수에 에러, false면? any 할당됨
     * - noImplicitThis: true
     *   - this를 추론할 수 없는 상황에서 에러, false면? any 할당됨
     * - useUnknownInCatchVariable: true
     *   - catch로 잡은 구문 => any 대신 unknown할당(4.0버전 이후), 타입 가드 사용
     */

    "forceConsistentCasingInFileNames": true,
    // 파일 이름 대소문자 구분 강제

    "noEmit": true,
    // 컴파일 하지 않고, 타입 체크만 한다
    // 왜? Next.js는 swc가 타입스크립트 파일을 컴파일하므로, TS가 컴파일할 필요가 없다.

    "esModuleInterop": true,
    // CommonJS 방식으로 보낸 모듈을 ES 모듈 import로 가져올 수 있게 함

    "module": "ESNext",
    // 모듈 시스템 설정: commonjs(require), esnext(import)

    "moduleResolution": "Node",
    // 모듈 해석 방식: node(node_modules 기준), classic(tsconfig.json 디렉터리 기준)

    "resolveJsonModule": true,
    // JSON 파일 import (allowJS 옵션이 자동으로 켜진다..!)

    "isolatedModules": true,
    // import나 export가 없다면 단순 스크립트로 인식 - 막음
    // 왜? 모듈 시스템과 연계되지 않고 단독으로 있는 파일의 생성을 막기 위함

    "jsx": "preserve",
    /*
     * <JSX 컴파일 설정>
     * - react: React.createElement() 기본값, ~리액트 16까지 기본 변환 방식
     * - react-jsx: react/jsx-runtime 리액트 17~
     * - react-jsxdev: 디버깅 정보 추가
     * - preserve: no 변환
     * - react-native: no 변환
     */

    "incremental": true,
    // .tsbuildinfo 파일을 디스크에 저장한다(마지막 컴파일)
    // 가장 비용이 적게 드는 방식으로 컴파일해 속도 업

    "baseUrl": "src",
    // 모듈을 찾을 때 기준 ✋

    "paths": {
      // 경로 별칭
      "🐟pages/*": ["pages/*"],
      "🐟hooks/*": ["hooks/*"],
      "🐟types/*": ["types/*"],
      "🐟components/*": ["components/*"],
      "🐟utils/*": ["utils/*"]
    }
  },

  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  // 타입 스크립트 컴파일 대상에 포함시킬 파일 목록

  "exclude": ["node_modules"]
  // 타입 스크립트 컴파일 대상에서 제외시킬 파일 목록
}

• 타입을 엄격하게? -> yes
• strict node는? 타입을 엄격하게 지키는 것을 도와주고, 타입 시스템을 이해하는 데 동무을 얻을 수 있다. 마이그레이션 아니면 켜두기
• 경로 별칭에 @를 안 쓰는게... 좋다?!
  • 스코프 패키지에 널리 사용되기 때문에 네이밍에 따라 충돌할 여지가 있다 <- 납득함
  • 기존 프로젝트는 어떻게 하느냐

"esModuleInterop": true

• CommonJS 모듈 시스템을 사용하여 작성된 모듈을 ES 모듈 형식으로 import하는 것이 용이해짐

• 모듈 시스템

  • CommonJS는 Node.js에서 널리 사용되는 모듈 시스템
  • ES 모듈은 ECMAScript 표준에 정의된 모듈 시스템

• CommonJS 타입 모듈과 esModuleInterop 예시

  // exports
  module.exports = {
    add: (a, b) => a + b,
    subtract: (a, b) => a - b,
  };
  
  // "esModuleInterop": false
  import * as math from "./math";
  
  console.log(math.add(5, 3)); // 8
  
  // "esModuleInterop": true
  import math, { add, subtract } from "./math";
  
  console.log(math.add(5, 3)); // 8
  console.log(add(5, 3)); // 8
  

"jsx" 컴파일 설정

export const Shrimp = () => <span>🦐</span>;

• react: React.createElement() 기본값, ~리액트 16까지 기본 변환 방식

  export const Shrimp = () => React.createElement("span", null, "🦐");
  

• react-jsx: react/jsx-runtime 리액트 17~

  import { jsx as _jsx } from "react/jsx-runtime";
  export const Shrimp = () => _jsx("span", { children: "🦐" });
  

• react-jsxdev: 디버깅 정보 추가

  import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
  const _jsxFileName = "file:///input.tsx";
  export const Shrimp = () =>
    _jsxDev(
      "span",
      { children: "🦐" },
      void 0,
      false,
      {
        fileName: _jsxFileName,
        lineNumber: 1,
        columnNumber: 27,
      },
      this
    );
  

• preserve: no 변환, swc가 JSX를 변환하므로 Next.js에서 preserve

  export const Shrimp = () => <span>🦐</span>;
  

• react-native: no 변환 (RN용)

  export const Shrimp = () => <span>🦐</span>;