이번엔 React에서 적용해 보았다. 예제 프로젝트 생성 $ npx create-react-app tdd_test_react $ cd tdd_test_react My-Button.js const MyButton = ({ onClick, disabled, children }) => ( {children} ); export default MyButton; 간단한 Button 컴포넌트를 제작한다. My-Button.test.js import React from 'react'; import { render, fireEvent, screen } from '@testing-library/react'; import '@testing-library/jest-dom'; import MyButton from './My-B..
JS에서 테스트 자동화를 사용할 때 사용하는 도구는 아래와 같다. 이름 간단 설명 Jest Facebook에서 만든 프레임워크로, JS를 위한 강력하고 사용하기 쉬운 테스트 도구 Mocha 유연하고 확장성이 높은 프레임워크로, 다양한 플러그인과 어설션 라이브러리를 지원 Cypress 최근 웹 어플리케이션을 위한 end-to-end를 위한 도구로, 자동화된 브라우저에서 테스트를 실행할 수 있다. Puppeteer Google에서 만든 Node.js용 웹 스크래핑 및 자동화 라이브러리로, 웹 어플리케이션의 UI 테스트와 end-to-end 테스트에 적합하다. 순위는 아래와 같다. 이외에도 다양한 종류의 도구들이 있지만, 공부해볼 도구는 가장 많이 사용되고 있는 Jest에 대해 알아보려고 한다. 먼저 자바스크..
우선 TDD의 정의는, 아래와 같다. 테스트 주도 개발은 Test-Driven Development의 약자로, 테스트가 코드 작성을 주도하는 개발 방법이다. 작은 단위의 테스트 케이스를 작성하고 이를 통과하는 코드를 추가하는 단계를 반복하여 구현한다. TDD 진행 단계 테스트 코드 작성: 먼저 작성할 기능에 대한 테스트 코드를 작성한다. 이때, 실패할 것으로 예상되는 테스트를 작성한다. 테스트 실행: 작성한 테스트 코드를 실행하고, 테스트가 실패하게 된다. 기능 구현: 테스트가 성공하도록 기능을 구현한다. 리팩토링: 구현한 코드를 리팩토링하여, 테스트가 성공하는지 확인한다. TDD 사용 시 장점 안정성 증가: TDD는 테스트를 먼저 작성하므로, 코드가 기대한 대로 작동하는지 항상 확인할 수 있다. 이는 ..
Hooks는 React v16.8 이후 새로 도입된 기능으로, 기존의 함수 컴포넌트에서 할 수 없었던 기능을 가능하게 해 준다. useState 함수 컴포넌트에서 가변적인 상태를 지닐 수 있게 도와준다. 다음은 버튼을 클릭해 Count를 올리고 내리는 컴포넌트다. import { useState } from 'react'; const Test = () => { const [count, setCount] = useState(0); // 비구조화 할당 return ( Count value = {count} setCount(count + 1)}> +1 setCount(count - 1)}> -1 ); }; export default Test; useReducer useState보다 더 다양한 컴포넌트 상황에 ..
모든 리액트 컴포넌트에는 라이프 사이클이 존재하는데, 컴포넌트의 수명은 페이지에 렌더링되기 전 준비 과정부터 시작하여 페이지에서 사라질 때 끝난다. 기본적으로 클래스형 컴포넌트만 사용할 수 있으며 함수형 컴포넌트에서 사용하기 위해서는 Hooks를 사용해야 한다. 접두사로 알아보는 라이프사이클? Will 접두사가 붙은 메서드는, 어떤 작업을 작동하기 전에 실행되는 메서드이며 Did 접두사가 붙은 메서드는, 어떤 작업을 작동한 후에 실행되는 메서드다. 메서드들은 크게 세 가지 카테고리 로 나뉜다. Mount DOM이 생성되고 웹 브라우저상에 나타나는 것 메서드명 설 명 constructor 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 getDerivedStateFromProps props에 있..
Redux는 해도해도 헷갈리는 느낌이기에, 한 번 정리해보려 글을 작성한다. React에서 이야기하는 상태는 무엇을 의미할까? React에서 사용되는 상태(State)란, 컴포넌트 내 존재하는 변수를 의미한다. React는 Vue나, Angular와 다르게 데이터가 한 방향으로 흐르는 단방향 바인딩 방식인데, 이는 Props drilling을 발생시킨다고 한다. Prop Drilling이란, '리액트의 컴포넌트 트리에서 데이터를 전달하기 위해서 필요한 과정' 이라고 하는데, 쉽게 풀이해보자면 React 내에서 상탯값을 전달하기 위해 하위 컴포넌트를 계속 타고 가는 과정이라고 생각하면 된다고 한다. 결국, 상태 관리 라이브러리는 이러한 Props drilling을 방지하기 위해 사용한다고 보면 된다. 상태..
