프론트엔드 정복하기

TDD의 장점 - 무엇을 개발해야하는지, 무엇이 문제인지 명확히 알고 시작할 수 있다. - 문제를 먼저 정의한 뒤 ---->> 문제의 해답을 찾아가는 루트라 할 수 있다. - 완성된 코드가 문제없이 동작하는지 console.log() 등을 통해 알필요 없다. - 코드 변경이 일어난 경우 또다시 console.log() 등을 통해 테스트할 필요 없다. - 아무리 설계를 잘하고, 유연하게 짰다고 해도, 테스트 코드가 없다면 코드 변경을 주저하게 된다. TDD의 핵심 과정 실패 (문제 정의, 테스트 코드를 실제코드보다 먼저 작성) --->> 성공 (문제 해결, 테스트를 통과할 수 있는 최소한의 코드를 작성) --->> 리팩토링 (불필요하고 비효율적인 코드를 개선한다.) 무엇을 테스트해야할까? : 내가 만든 기..

CRA(Create React App)를 통해 리액트 패키지를 설치하면 React Testing Library도 같이 설치되어서 테스팅 라이브러리를 설치하지 않아도 테스트 주도 개발을 할 수 있다. 하지만 테스팅 라이브러리를 지원하지 않는 버전으로 CRA를 실행했거나, CRA를 통해 리액트 패키지를 설치하지 않은 경우에는 React Testing Library를 직접 설치하고 셋팅해야 한다. React Testing Library를 사용해야 하는 몇 가지 이유가 있다. 모든 테스트를 DOM 위주로 진행하며, 필요한 기능들만 지원해줘서 매우 가볍고, 개발자들이 일관성있고 좋은 관습을 따르는 테스트 코드를 작성할 수 있도록 도와준다는 점이다. 자, React Testing Library를 설치하고 셋팅해보자..

useSelector, useDispatch 등의 함수는 가짜 데이터로 Mock-up 해야 한다. stackoverflow.com/questions/60011473/testing-react-redux-useselector testing react-redux useSelector I have a react application which uses react-redux, useSelector to get data from the store. The react component has function PersonDataView() { const name= useSelector(state => state.data.na... stackoverflow.com 위 게시글의 질문자에 따르면, react testing ..

Jest는 페이스북에서 만든 테스팅 라이브러리다. 자바스크립트 개발자들로부터 좋은 반응을 얻고 있다. 설치 npm i --save-D jest -D : 개발 dependency로 설치 test 스크립트 수정 package.json 파일에서 "scripts":{ "test":"jest" } npm test 라고 입력하면 jest command를 실행할 수 있다. 테스트 코딩 파일 생성 Jest는 기본적으로 test.js로 끝나거나, __test__ 디렉터리 안에 있는 파일들을 테스트 파일로 인식한다. 만약 특정 테스트 파일만 실행하고 싶은 경우에는 터미널창에 npm test 를 입력하면 된다. 테스트 코드 기본 test.js 파일을 생성하고, 그 안에 다음과 같이 코드를 입력한다. test("1 is 1"..