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

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

---

DIL-week4-6_2024-03-30

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

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

---

좋은 리액트 코드 작성을 위한 환경 구축하기

ESLint를 활용한 정적 코드 분석

• 정적 코드 분석
  • 코드 스멜(잠재적으로 버그를 야기할 수 있는 코드)

ESLint

1. 자바스크립트 코드를 문자열로 읽는다.
2. 자바스크립트 코드를 분석할 수 있는 파서(parser)로 코드를 구조화한다.
3. 2번에서 구조화한 트리를 AST(Abstract Syntax Tree) => 규칙과 대조
4. 규칙과 대조: report, fix

| 구분 | 내용 | | ------- | ---------------------------- | | rules | 잘못된 코드 + 맞는 코드 정의 | | plugins | 특정한 rules의 모임 |

espree

• 파서: 구문 분석기
• 파서 해보기: https://astexplorer.net/
• espree: https://github.com/eslint/espree
• ts => @typescript-eslint/typescript-estree, espree 기반 파서

eslint-plugin, eslint-config

네이밍: (1)정해진 접두사로 시작 (2)한 단어로 구성 (3)특정 스코프가 앞에 붙는 것 가능

eslint-plugin

• 특정 프레임워크나 도메인에 관련된 규칙을 묶는다
• 규칙(rule)을 모아놓은 패키지, ex) eslint-plugin-import, eslint-plugin-react
  • react/jsx-key 예시

eslint-config

• eslint-plugin을 묶어서 한 세트로 제공한다

| 라이브러리 | 내용 | 주소 | | --------------------------- | ---------------- | ---------------------------------------------------------------------------------------- | | eslint-config-airbnb | 에어비앤비, 유명 | https://github.com/airbnb/javascript | | @titicaca/triple-config-kit | 한국 커뮤니티 | https://github.com/titicacadev/triple-config-kit | | @eslint-config-next | Next.js | https://nextjs.org/docs/pages/building-your-application/configuring/eslint#eslint-plugin |

• eslint-config-next
  • Next.js 11 버전부터 만듦
  • (1)js 코드 뿐만 아니라, (2)페이지나 컴포넌트에서 반환하는 JSX (3) **app, **document 작성되어 있는 HTML 코드도 정적 분석 대상
  • 핵심 웹 지표core web vitals에 영향을 미칠 수 있는 분석

ESLint rule 만들기

• https://eslint.org/docs/latest/use/configure/rules#using-configuration-files

예시

• no-restricted-imports
• 예시: import React from 'react';
  • 리액트 17부터 새로운 JSX 런타임 때문에 import React가 필요없다
  • bundle.js에 unused variable
  • 웹팩이 트리쉐이킹으로 코드 삭제하기 때문에 번들 사이즈는 영향 없지만, 트리 쉐이킹 줄여서 빌드 속도를 빠르게 하는 것도 중요

  "no-restricted-imports": [
    'error',
    {
      paths: [
        {
          name: "react",
          importNames: ['default'],
          message:
            "~",
        }
      ]
    }
  ]
  

• 예시: import {} from 'lodash'

  {
    name: "lodash",
    message:
      "lodash는 CommonJS로 작성되어 있어 트리 쉐이킹이 되지 않아 번들 사이즈를 크게 하므로 lo-dash/* 형식으로 import 해주세요",
  },
  

• 예시: new Date() 금지
  • server 시간에 의존하는 경우
    • new Date() 금지, new Date(~~)는 허용
  • create로 새로운 규칙을 만든다.
    • RuleModule => node_modules/@types/eslint/index.d.ts
• eslint-plugin 만들기
  • yo, generate-eslint
    • lib/rules/~~.js << eslint rules
    • docs/~~.md << 여기 문서
    • tests/lib/rules/~~.js << eslint tests

AST, Abstract Syntax Tree 中

| 구분 | 내용 | | ---------------------------------------- | -------------------------------- | | type: ExpressionStatement | body가 표현식 전체임 | | ExpressionStatement.expression | 표현식을 확인할 Eslint 노드 단위 | | ExpressionStatement.expression.type | 표현 타입 | | ExpressionStatement.expression.callee | 생성자명 | | ExpressionStatement.expression.arguments | 인수 |

eslint 커스텀 rule 관련 레퍼런스 링크

• https://eslint.org/docs/latest/rules/no-restricted-imports
• https://typescript-eslint.io/developers/custom-rules/
• meta https://github.com/eslint/rfcs/blob/main/designs/2023-rule-options-defaults/README.md#support-for-metadefaultoptions-on-rules

주의할 점

• Pettier 충돌 | 정적 분석 도구 | 목적 | 언어 | | --- | --- | --- | | Prettier | 포매팅 | HTML,CSS,markdown,json | | ESLint | 코드 스멜 찾기 | JS |
• 해결법
  1. 충돌 안 나게 짜기
  2. js는 eslint에 맡기기
  • js에서 필요한 rule은 eslint-plugin-prettier를 사용한다.
• 예외 처리
  • // eslint-disable-line
    • 개발자가 무시하는 경우 >> 크건 작건 문제가 생긴다
    • 진짜 필요없는 규칙이라면 'off'해서 제거할 것

리액트 테스트 라이브러리

| 구분 | 테스트 | 내용 | 수행 | | -------- | ---------- | ---------------------------------------------------------- | -------------------------------- | | backend | 화이트박스 | 교착 상태, 경쟁 상태, 데이터 손실, 특정 상황에서 장애 발생 | AUI (Application User Interface) | | frontend | 블랙박스 | 주요 비즈니스 로직, 경우의 수 | GUI |

React Testing Library

• 리액트 환경에서 리액트 텀포넌트를 테스팅
• DOM Testing Library를 기반으로 만들었다
  • jsdom: JS 환경에서 HTML과 DOM을 사용할 수 있게 하는 라이브러리

=> 발표준비 이후 이어서 공부