[웹개발] TDD 정리

TDD란 테스트 주도 개발, 즉 테스트 코드를 먼저 작성하고 코드를 작성하는 방식의 개발 방법입니다.
테스트 코드를 먼저 작성함으로써 실제 코드가 무슨 기능을 해야 하는지 정확하게 정의할 수 있습니다.
테스트 코드를 작성한 후에는 테스트를 통과하는 코드를 최소한으로 작성하고, 표준에 맞게 리팩터링 합니다.

 

 

목차

 

TDD가 필요한 이유

테스트 코드를 작성하면서 실제 코드의 기능을 정의하기 때문에 명확한 코드 설계가 가능합니다.
테스트를 통과하기 위한 최소한의 코드만을 작성하는 것이 원칙이기 때문에 불필요한 코드를 줄일 수 있습니다.

개발 시작부터 만들어야 하는 서비스 혹은 웹사이트의 요구사항이 완벽하게 정의된 경우는 거의 없습니다.
개발 과정에서 많은 변경 사항이 생길 수 있고, 개발이 완료된 후에도 유지보수를 위해 코드를 수정해야 하는 경우가 많습니다.
코드를 수정하는 과정에서 많은 버그가 발생할 수 있는데, 버그를 사전에 방지할 수 있고 디버깅 시간을 단축해줍니다.

TDD의 단점?

테스트 코드를 함께 작성하기 때문에 기존의 방식보다 초기 개발 속도가 느립니다.
프로젝트의 규모와 장기적인 관점에서는 더 효율적일 수 있습니다. 
그러나 규모가 작고 앞으로 변경사항이 거의 없을 프로젝트에 TDD를 사용하는 것이 무조건 좋을지는 생각해봐야 할 문제인 거 같습니다.  

TDD 개발 순서

red        실패하는 테스트 코드를 작성
green    테스트 코드를 통과하기 위한 코드를 작성
blue      리팩터링 진행

(red) 테스트 코드를 먼저 작성합니다. 실제 코드가 없기 때문에 이 테스트는 무조건 실패하게 됩니다.
(green) 실제 코드를 작성할 때는 테스트 코드를 통과하는 최소한의 코드를 작성합니다.
(blue) 이후 중복 코드 제거, 표준화 등의 리팩터링 과정을 거칩니다.

테스트 작성 예시

텍스트의 색상이 빨강과 파랑으로 토글 되는 버튼 만드는 아주 간단한 예시를 통해 위에서 정리한 TDD 방식으로 코드를 짜 보겠습니다.

타입스크립트로 작성했으나, 타입스크립트 문법이 사용된 부분이 전혀 없으니 참고 바랍니다.

 

test/Btn.test.tsx

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";

import Btn from "../Btn";

test("빨강 버튼, 파랑 버튼", async () => {
  render(<Btn />);

  const btn = screen.getByRole("button", { name: /button/i });

  expect(btn).toHaveProperty("style.color", "red");

  await userEvent.click(btn);

  expect(btn).toHaveProperty("style.color", "blue");

  await userEvent.click(btn);

  expect(btn).toHaveProperty("style.color", "red");
});

 

Btn.tsx

import React from "react";

const Btn = () => {
  return <div>Btn</div>;
};

export default Btn;

 

첫 순서는 test파일을 작성합니다. button이라는 이름을 가진 버튼을 찾고, 색상이 빨강인지 확인합니다. 클릭 후 파랑으로 변경되는 걸 확인 한 뒤 다시 빨강으로 바뀌는지 테스트하는 코드입니다. Btn 컴포넌트를 만들고 렌더에서 오류가 나지 않도록 기본 템플릿 상태를 작성해줍니다. 실제 코드는 작성하지 않았기 때문에 테스트는 실패합니다.

 

 

이제 테스트가 통과할 수 있도록 최소한의 코드를 작성해줍니다.

 

Btn.tsx

import React, { useState } from "react";

const Btn = () => {
  const [isRed, setIsRed] = useState(true);

  const btnColor = isRed ? "red" : "blue";

  const changHandler = () => {
    setIsRed((prev) => !prev);
  };

  return (
    <button style={{ color: btnColor }} onClick={changHandler}>
      Button
    </button>
  );
};

export default Btn;

 

테스트가 성공했습니다. 이후에 리팩터링을 진행해서 코드를 정리하는 작업을 진행하면 됩니다.

 

 

이상으로 TDD에 대해 알아봤습니다. 웹 개발을 공부하면서 테스트에 관한 강의를 듣게 되었고, 강의 내용 중 TDD에 대해 소개하는 내용이 있어 배운 내용을 기록하고 기억하기 위해 간단한 내용을 정리했습니다.

 

도움이 되셨으면 좋겠습니다. 감사합니다.

잘못된 내용이나 추가해주시고 싶은 내용이 있으면 댓글 달아주시면 감사하겠습니다.