[모던 리액트 딥 다이브] 2024-03-25 DIL

 

모던 리액트 딥다이브 week4

2024-03-25 DIL

주차	DIL 범위	날짜	개인진도
4주차	4장,8장	03-25	469-483p

 

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

 

정적 코드 분석의 대표적인 도구 EsLint!

 

EsLint는 어떻게 코드를 분석할까? 코드스멜을 찾는 방법.

1. 자바스크립트 코드를 '문자열'로 읽는다.
2. 파서로 코드를 구조화하여 트리를 생성한다.(JSON 형식)
3. 구조화한 트리(AST: Abstract Syntax Tree)를 기준으로 각종 규칙과 대조한다.
4. 대조 후 위반한 코드를 알리거나 수정한다.

자바스크립트를 분석하는 파서는 여러가지가 존재하지만, 그 중 기본 값으로 espree를 사용한다.(ESLint 안에서 'espree'로 설정하여 분석)
(※ 다른 자바스크립트/타입스크립트를 분석해보고 싶다면 AST explorer를 방문해보자.)

잘못된 코드를 정하는 기준 EsLint Rules/ 특정한 규칙의 모음을 plugins

espree로 분석한 코드

• meta 필드:해당 규칙과 관련된 정보. (실제 규칙이 작동하는 코드와는 관계가 없음.)
• messages 필드: 규칙을 어겼을 때 반환하는 경고문구.
• fixable 필드: 수정가능 여부를 나타냄.
• create 필드★★: 실제로 코드에서 문제점을 확인하는 곳(함수): 선언한 특정 문구를 트리를 순회하며 찾는다.

eslint-plugin & eslint-config

• eslint-plugin: 특정 프레임워크나 도메인과 관련된 규칙을 묶어서 제공하는 패키지.
• eslint-config: eslint-plugin을 한데 묶어서 완벽하게 한 세트로 제공하는 패키지. 커스텀 set 제작 가능.

※ 네이밍 Rule: 접두사. 반드시 한 단어로 구성.

esLint 라이브러리 made by IT 기업들.

1. eslint-config-airbnb: 자바스크립트 프로젝트에 가장 합리적인 선택. 압도적 다운로드.
2. @titicaca/triple-config-kit: 한국 커뮤니티 중 유지보수가 가장 활발하다.

다른 패키지와 다른 점: 자체적으로 정의한 규칙을 기반으로 운영된다.
eslint-config-airbnb 기반으로 하지 않았음에도 대부분의 유용한 규칙은 모두 제공된다.

1. eslint-config-next: 리액트 기반 Next.js 프레임워크를 사용하고 있는 프로젝트에서 사용할 수 있는 eslint-config.
   • Next.js 11버전부터 만들어짐.
   • 페이지나 컴포넌트에서 반환하는 JSX 구문 및 _app,_document에서 작성되어있는 HTML 코드 또한 정적 분석 대상으로 분류하여 제공.
   • 웹 서비스(핵심 웹 지표) 성능에 영향을 미칠 수 있는 요소들을 분석하여 제공하는 기능도 포함.

 

나만의 ESLint 코드 규칙 만들기.

실수방지와 빠르고 쉽게 수정이 가능하도록 나만의 ESLint 규칙을 생성해보자.

1. 이미 존재하는 규칙을 커스터마이징해서 적용하기: import React를 제거.

• 리액트 17버전부터 새로운 JSX 런타임 덕분에 import React 구문이 필요 없어졌다.
• 제거하면 좋은 점으로는 번들러의 크기를 줄일 수 있다.
• 구문을 분석해보면 어디에도 쓰이지 않는 react__WEBPACK_IMPORTED_MODULE_0__ 변수를 발견할 수 있다.
• 해당 변수는 import React를 사용하는 횟수만큼 추가될 것이라는 것을 짐작해볼 수 있다.

 

웹펙에서 사용하지 않는 코드를 모두 삭제(트리쉐이킹) 기능이 탑재되어 있는데 굳이 삭제하는 이유?

A: 트리쉐이킹 소요 시간을 없애기 때문에 빌드 속도가 빨라지기 때문이다.

 

 

 

이처럼 React 17버전을 사용하고 있다면 구문을 모두 확인한 후에 제거하는 것이 좋다.