[ZBF] 7주차 보충 : TDD

이 글은 네이버 블로그에 2024년 6월 30일에 올렸던 것을 그대로 옮겨온 것입니다.

프론트엔드 개발에서 테스트 주도 개발(TDD, Test-Driven Development)은 코드 작성 전에 테스트를 먼저 작성하여 애플리케이션의 기능과 동작을 검증하는 방법론입니다. TDD는 코드의 품질을 높이고, 버그를 줄이며, 유지보수를 용이하게 하는 데 도움이 됩니다. 프론트엔드 TDD의 주요 절차와 장점에 대해 설명드리겠습니다.

TDD 절차

테스트 작성 (Red)

먼저, 구현하려는 기능의 테스트를 작성합니다. 이 단계에서는 테스트가 실패하는 것이 정상입니다. 실패하는 테스트는 아직 해당 기능이 구현되지 않았음을 나타냅니다.

코드 작성 (Green)

작성한 테스트를 통과하기 위해 최소한의 코드를 작성합니다. 이 단계에서는 테스트가 통과하는 데 필요한 코드만 작성합니다.

리팩토링 (Refactor)

코드를 최적화하고 정리합니다. 이 과정에서는 코드의 가독성, 유지보수성, 성능 등을 개선합니다. 리팩토링 후에도 테스트가 통과하는지 확인합니다.

TDD의 장점

코드 품질 향상: TDD는 테스트가 코드를 안내하므로, 코드가 목적에 맞게 작성되고 올바르게 동작하도록 합니다.
버그 감소: 코드 작성 전에 테스트를 작성하기 때문에, 버그가 일찍 발견되고 수정됩니다.
리팩토링 용이: 테스트가 코드를 보호하기 때문에, 리팩토링 시 코드가 깨질 걱정 없이 개선할 수 있습니다.
문서화: 테스트 자체가 코드의 동작과 기대 결과를 설명하는 문서가 됩니다.
개발 속도 향상: 초기에는 더 많은 시간이 걸릴 수 있지만, 장기적으로는 버그 수정과 리팩토링에 걸리는 시간이 줄어들어 전체 개발 속도가 빨라집니다.

프론트엔드 TDD 도구

Jest: 유닛 테스트와 스냅샷 테스트에 적합한 JavaScript 테스트 프레임워크.
React Testing Library: React 컴포넌트를 테스트하는 라이브러리로, 사용자 관점에서 테스트를 작성하도록 도와줍니다.
Cypress: E2E 테스트 프레임워크로, 사용자 상호작용을 모방하여 테스트를 작성합니다.
Mocha: 유연하고 강력한 테스트 프레임워크로, 다양한 플러그인과 함께 사용됩니다.

TDD는 코드를 작성하기 전에 테스트를 먼저 작성하고, 이를 통해 코드의 품질을 높이는 방법론입니다. 이 과정은 다음과 같이 진행되었습니다:

테스트 작성: 기능을 구현하기 전에 해당 기능을 검증할 테스트 코드를 먼저 작성합니다. 예를 들어, 사용자 로그인 기능을 구현하기 전에 로그인 성공 및 실패에 대한 테스트를 작성합니다.
코드 작성: 테스트를 통과하기 위해 최소한의 코드를 작성합니다. 이 단계에서는 테스트를 통과하는 것에만 집중합니다.
리팩토링: 테스트를 통과한 후, 코드를 정리하고 최적화합니다. 이 과정에서도 테스트를 계속 실행하여 코드의 기능이 유지되는지 확인합니다.

이 접근법을 통해,

Jest를 사용해 유닛 테스트와 기능 테스트를 작성하고, 이를 통해 코드의 결함을 초기 단계에서 발견하고 수정할 수 있었습니다. TDD를 통해 얻은 주요 이점은 다음과 같습니다:

코드 품질 향상: 테스트를 먼저 작성함으로써, 코드를 작성하는 동안 요구 사항을 명확히 이해하고, 코드의 결함을 사전에 방지할 수 있었습니다.
리팩토링 용이성: 테스트 코드가 존재하기 때문에, 리팩토링을 할 때 코드의 기능이 유지되는지 쉽게 검증할 수 있었습니다.
개발 속도 향상: 초기에는 테스트 작성에 시간이 걸리지만, 장기적으로는 버그를 줄이고, 코드 수정 시에도 안정성을 확보할 수 있어 개발 속도가 향상되었습니다.