React TDD 정리 - React로 시작하는 TDD 15편Summary of React TDD Series - TDD with React Part 15
📅
🚀
들어가기 전에 🔗
안녕하세요.
드디어
React로 시작하는 TDD
시리즈의 마지막 편입니다.
빈 폴더에서 시작해 Vite
로 프로젝트를 만들고, Counter
를 구현하고, MSW
로 가짜 서버를 띄우고, CI
자동화까지 구축했습니다.처음에는 "테스트 코드를 짜는 게 시간이 더 걸리는 것 아닌가?"라는 의구심이 들었을지도 모릅니다.
하지만 이제 여러분은 코드를 수정할 때 두려움보다는
설렘
과 자신감
을 먼저 느끼게 되었을 것입니다.
오늘은 우리가 배운 핵심 가치들을 정리하고, 앞으로 어떤 개발자가 되어야 할지 이야기하며 마무리하겠습니다.🚀
1. 우리가 걸어온 길 (시리즈 요약) 🔗
우리는 단순히 도구 사용법만 배운 것이 아닙니다.
좋은 소프트웨어를 만드는 태도
를 배웠습니다.- 도구의 이해Vitest(실행기)와React Testing Library(렌더링)를 통해 테스트 환경을 구축했습니다.
- 사용자 관점구현 세부 사항(State 이름 등)이 아닌, "사용자가 무엇을 보고 클릭하는가"에 집중하여 테스트를 작성했습니다.
- 안전한 리팩토링테스트라는 안전장치 덕분에 컴포넌트 분리, Hook 추출 등의 대수술을 과감하게 진행할 수 있었습니다.
- 비동기와 모킹MSW를 도입하여 백엔드 API가 완성되지 않아도 프론트엔드 개발을 진행할 수 있는 환경을 만들었습니다.
🚀
2. TDD가 가져온 코드의 변화 🔗
TDD를 적용하기 전과 후, 우리의 코드는 어떻게 달라졌을까요?
✅
Before: 덩어리진 코드 (Spaghetti Code) 🔗
테스트를 고려하지 않으면, 하나의 컴포넌트에 UI, 비즈니스 로직, API 호출이 뒤엉키기 쉽습니다.
"일단 돌아가게 만들자"는 생각에
useEffect 안에 모든 것을 때려 넣게 되죠.✅
After: 역할이 분리된 코드 (Clean Code) 🔗
"이걸 어떻게 테스트하지?"라고 고민하는 순간, 구조가 개선됩니다.
// [변화] 로직은 Hook으로 분리되어 독립적으로 테스트 가능해졌습니다.
export function useUserList() {
const [users, setUsers] = useState([]);
// ... 데이터 fetching 로직
return { users };
}- Custom Hook:비즈니스 로직을 분리하여 재사용성과 테스트 용이성을 높였습니다.
- Container/Presenter:데이터 처리와 화면 렌더링을 분리하여 UI 테스트를 단순화했습니다.
🚀
3. 프론트엔드 테스트 전략 (Testing Trophy) 🔗
우리는 13편에서
테스팅 트로피
개념을 배웠습니다.
모든 것을 단위 테스트로 짤 필요도, 모든 것을 E2E로 짤 필요도 없습니다.- Static (정적 분석)TypeScript와ESLint로 오타와 기본 에러를 잡습니다. (가성비 최고)
- Unit (단위)유틸리티 함수나 복잡한 Hook 로직을 검증합니다.
- Integration (통합)가장 중요합니다.컴포넌트가 사용자와 상호작용하는 흐름을RTL로 검증합니다.
- E2E (종단 간)실제 브라우저 환경에서의 핵심 시나리오(결제, 로그인 등)를 검증합니다.
🚀
4. 앞으로의 학습 방향 🔗
이 시리즈는 끝났지만, 더 나은 품질을 위해 도전해 볼 만한 주제들을 소개합니다.
✅
E2E 테스트 (Playwright / Cypress) 🔗
우리는 가짜 브라우저(jsdom) 환경에서 테스트했습니다.
하지만 실제 크롬, 사파리 브라우저에서 스타일이 깨지지는 않는지, 페이지 이동이 잘 되는지 확인하려면
E2E 도구
가 필요합니다.
(이 내용은 곧 이어질 번외편
에서 다룰 예정입니다.)✅
시각적 회귀 테스트 (Storybook / Chromatic) 🔗
기능은 동작하지만 버튼 색깔이 실수로 바뀌었다면?
코드로 검증하기 힘든 디자인 영역을 픽셀 단위로 비교해 주는 도구들입니다.
✅
백엔드와의 협업 (Contract Testing) 🔗
프론트엔드의 Mock 데이터와 실제 백엔드 API 스펙이 달라지면 장애가 발생합니다.
이를 방지하기 위해 API 명세(계약)가 변경되면 테스트가 실패하도록 만드는 기법입니다.
🚀
결론 🔗
소스 코드는 GitHub - Promleeblog/react-tdd-setup↗ 에서 확인할 수 있습니다.
(각 챕터별 코드는 브랜치로 구분되어 있습니다.)
git clone https://github.com/PROMLEE/my-tdd-app.git
cd my-tdd-appTDD는 단기간에 마스터할 수 있는 기술이 아닙니다.
처음에는 귀찮고, 느리고, 답답할 수 있습니다.
하지만 꾸준히 연습하여 습관이 되는 순간, 여러분은
버그 없는 코드
를 넘어 변화에 유연한 코드
를 작성하는 엔지니어로 성장해 있을 것입니다.👨💻
긴 시리즈를 함께해 주셔서 감사합니다.
여러분의 코드에 항상 초록 불(Green)만 가득하기를 응원합니다!
✅
참고 🔗
- Testing JavaScript↗ Kent C. Dodds의 프리미엄 강의로, 프론트엔드 테스트의 모든 것을 깊이 있게 다룹니다.
- Modern React Testing↗ 최신 리액트 테스트 베스트 프랙티스를 정리한 시리즈 아티클입니다.