08. 좋은 리액트 코드 작성을 위한 환경구축하기
8.1 ESLint를 활용한 정적 코드 분석
ESLint : 자바스크립트모드를 정적 분석해 잠재적인 문제를발견하고 나아가 수정까지 도와주는 도구
- eslint-plugin : 규칙을 모아놓은 패키지
- eslint-config : slint-plugin을 한데 묶어서 완벽하게 한 세트로 제공하는 패키지 , 빠르게 적용
- eslint-config-airbnb : 에어비앤비에서 제작함 , 압도적인 다운로드 수
- titicaca/triple-config-kit : 유지보수가 활발한 편
- eslint-config- next : 넥스트 프레임워크를 사용하고 있는 프로젝트에서 사용
8.1.3 나만의 ESLint 규칙 만들기
- import React를 제거하기 위한 ESLint 규칙 만들기
- new Date를 금지시키는 규칙
8.1.4 주의할점
Prettier와의 충돌
: 코드의 포매팅을 도외주는 도구 , 코드를 정적 분석해서 문제를 해결 한다는 점은 동일
규칙에 대한 예외 처리， 그리고 react-hooks/no-exhaustive-deps
:일부 코드에서 특정 규칙을 임시로 제외시키고 싶다면 eslint-disable- 주석을 사용 ESLint 버전충돌
: ESLint couldn’t find the plugin "eslint-plugin-promise’
8.2 리액트 팀이 권장하는 리액트 테스트 라이브러리
8.2.1 React Testing Library란?
리액트를 기반으로 한 테스트를 수행하기 위해 만들어진 것.
실제로 리액트 컴포넌트를 렌더링하지 않고 ,브라우저를 직접 실행해 눈으로 확인하지 않아도 리액트 컴포넌트가 원하는 대로 렌더링되고 있는지 확인 할 수 있다.
8.2.2 자바스크립트 테스트의 기초
- 테스트할 함수나 모률을 선정한다.
- 함수나 모률이 반환하길 기대하는 값을 적는다.
- 함수나 모듈의 실제 반환 값을 적는다.
- 3번의 기대에 따라 2번의 결과가 일치하는지 확인한다.
- 기대하는 결과를 반환한다면 테스트는 성공이며， 만약 기대와 다른 결과를 반환하면 에러를 던진다
Jest로 테스트코드 작성
→ 무엇을 테스트했는지，소요된 시간， 무엇이 성공하고 실패했는지，전체 결과는 어떤지에 대한 정보를 확인가능
8.2.3 리액트 컴포넌트 테스트 코드 작성하기
8.2.4 사용자 정의 훅 테스트하기
훅이 들어있는 컴포넌트 만들기 → 테스트코드 작성외에 작업이 더 추가됨
훅이 들어있는 컴포넌트에 훅에 대한 테스트 만들기 → 해당 훅이 모든 테스트케이스를 커버하지 못할 경우 또 다른 컴포넌트를 찾아야 함
react-hooks-testing-library 로 해결
- useEffectDebugger : 디버거 역할 , props가 변경되는 것만 확인할 수 있음 , 부모 컴포넌트가 리렌더링되는 경우에는 useEffectDebugger로 확인할 수 없음