주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

react-testing-library 를 사용한 리액트 컴포넌트 테스트 react-testing-library Enzyme과 달리 모든 테스트를 DOM 위주로 진행 필요한 기능만 지원해서 가볍다 일관성있고 좋은 관습을 따르는 테스트 코드를 작성할 수 있게 유도해준다. props, state 조회하는 작업을 하지 않음 리팩터링 시 구조, 네이밍 변경 시 기능이 똑같이 작동한다면 테스트가 실패하지 않음 CRA 프로젝트 생성 react-testing-library, jest-dom 설치 jest-dom은 jest 확장, dom관련 matcher를 추가해준다. vscode 사용 시 @types/jest 도 같이 설치 테스트 코드 작성 테스팅 스냅샷 테스팅 ㄴ 렌더링결과와 이전 렌더링 결과의 일치여부(u 키로 ..

Enzyme를 사용하여 리액트 컴포넌트 테스트 테스트 소개 가장 기본적인 방법은 내부 유틸 함수인 react-dom/test-utils 사용한다. 하지만 복잡하고 불편한 점이 있기 때문에 리액트 공식문서에서도 테스팅 라이브러리 사용을 권장한다. react-testing-library를 권장하며 Enzyme를 대체하여 사용할 수 있다고 언급한다. 두 라이브러리는 서로 다른 철학을 가지고 있다. Enzyme 컴포넌트 내부 기능 집중 post나 state 확인 컴포넌트 내장 메서드를 직접 호출 react-testing-library 렌더링 결과에 집중 컴포넌트 인스턴스에 신경쓰지 않고 화면에 보여지는 것 이벤트 발생 시 화면의 변화에 대한 부분에 최적화 사용자 관점에서 테스팅하기 용이하다. Enzyme 1. ..

드디어 리액트 기초강의끝!! 이젠 typescript를 보려고하는데 보는 매일 안쓰다보니 ㅠ 글이 엉망이다. 강의 볼때마다 글 쓰도록 해봐야지... 강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn 리액트 라우터 라우터를 쓰기위해서 모듈을 설치해준다. 필요한 것은 react-router와 react-router-dom이다. npm i react-router react-router-dom react-router는 웹, 앱 모두 사용할 수 있다고 한다. react-router-dom이 웹브라우저에서 사용하기 위해 필요한것들이 있다고 한다. react-router만 설치해도 종속성에 의해 ..

강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn 성능최적화 구글확장플러그인 devtools로 확인하여 테스트한 후에 최적화가 필요하면 진행한다. 최적화작업은 작업의 마지막에 한다. useEffect와 useRef로 재렌더링이 되는 이유를 디버깅할 수 있는 방법이 있다. ref를 만들어서 props나 state들을 넣고 비교하면서 검사하면된다, import React, {useCallback, useEffect, useRef}from 'react'; const Test = () => { const Ref = uesRef([]); useEffect(() =>{ // 콘솔에 찍어보자 co..