TDD 흐름으로 투두리스트 만들기

프로젝트 세팅

> create-react-app react-tdd-todo --template typescript

컴포넌트 계획

투두리스트를 만들기 위해서 만들어야 하는 컴포넌트를 생각해보자

• TodoForm: 할 일을 작성할 form이 있고 submit 이벤트가 발생하면 새로운 할 일을 추가할 수 있어야 한다.
• TodoItem: 할 일을 보여주는 컴포넌트다. 클릭하면 체크박스에 체크가 되고 삭제 버튼을 클릭하면 해당 할 일이 목록에서 삭제되어야 한다.
• TodoList: 할 일 목록을 보여주는 컴포넌트다. 여러개의 TodoItem 컴포넌트로 구성한다.
• TodoApp: 위에 컴포넌트의 조합으로 할 일 목록 기능이 구현되는 컴포넌트다.

얻은 점

지금까지 개발할 때 테스트 코드를 작성하지 않고 기능을 개발하면 브라우저에서 직접 테스트를 하나씩 다 하면서 개발을 진행했었다.
하지만 언제까지 그럴 수 없어서 테스트 코드를 작성하는 방법을 학습하는 겸 TDD 흐름으로 할 일 리스트를 만들었는데 꽤 많은 점을 배웠다.
앞으로 실무나 사이드 프로젝트를 진행할 때 테스트 코드를 작성하면서 개발을 하고 싶다. 상당히 효율적인 테스트가 가능하고 물론 테스트 코드가 있어도 브라우저에서 돌려봐야 정확하겠지만 그래도 없는 것보단 좋겠다.

1. 테스트 주도 개발(TDD)의 흐름을 배웠다.
2. 테스트 코드를 작성하는 방법을 배웠다.
3. 효율적인 테스트 코드를 위해서 선언적 프로그래밍을 사용해서 테스트를 작성했다.

참고

• React Testing Library 사용법
• react-testing-library 를 사용하여 TDD 개발 흐름으로 투두리스트 만들기