TDD로 배우는 프론트엔드 이전에 황준일 님의 Vanilla JavaScript로 웹 컴포넌트 만들기를 읽으면서 메이커준님을 처음 알게 되었는데, 이번에 기회가 닿게 되어 메이커준님의 유데미 TDD 강의를 듣게 되었습니다. 글또에서 진행한 TDD 스터디에 참여하여 다른 개발자 분들과 함께 강의를 듣고 배운 내용을 공유하여 더 의미 있었던 강의였습니다. 프론트엔드에서 TDD를 적용하는 것에 대해 의견이 갈리지만, 코드에 대한 빠른 피드백을 받아 애플리케이션 사용자인 개발자와 실사용자에게 애플리케이션이 정상 동작할 것이라는 자신감을 줄 수 있고, 디버깅이나 리팩터링 시 문서화의 역할을 할 수 있다는 점에서 확실한 이점을 가지고 있습니다. 이러한 TDD를 가볍게 접해 보고자 한다면 해당 강의가 도움이 될 것입..
프론트엔드 프로젝트에 테스트를 적용하면서 가장 어렵게 느껴진 부분이 어떤 순서로, 무엇을 테스트하면 좋을지에 관한 것이었습니다. 이에 대해 Kent C. Dodds와 Tkdodo님의 블로그를 참고하여 이에 대한 생각을 정리해 보았습니다. 🤔 어떤 순서로, 무엇을 테스트할까? 테스트를 작성하는 목적 가운데 하나는 사용자, 즉 애플리케이션 사용자와 개발자가 애플리케이션을 사용할 때 애플리케이션이 제대로 동작할 것이라는 자신감을 주는 것입니다. 따라서 코드 커버리지 자체보다는 유저가 사용하는 유즈 케이스 모두를 코드가 지원하는지를 생각해보면 좋습니다. 무엇을 테스트하면 좋을까? React에서는 어떠한 유즈 케이스가 있을까요? 크게 아래의 3가지 경우를 생각해 볼 수 있습니다. 라이프사이클 메서드: rerend..
들어가며 [1편]에서 테스트 환경 구축 시 사용되는 패키지의 설정 파일을 살펴보았습니다. [2편]에서는 먼저 Vite, TypeScript, React Testing Library, Jest를 사용해 테스트 환경을 구축하고, 패키지 간 의존성과 설정 파일 문제로 발생했던 에러와 해결책을 공유하고자 합니다. React 테스트 환경 구축하기(Vite, TS, Jest, React Testing Library) Vite 프로젝트 설치 npm create vite@latest test-config -- --template react-ts cd test-config npm install code . // vscode 열기 테스트 관련 패키지 설치 // 2-1 Jest 관련 패키지 설치 npm i -D jest j..
