[Udemy] TDD로 배우는 웹 프론트엔드를 듣고

 

TDD로 배우는 프론트엔드 

이전에 황준일 님의 Vanilla JavaScript로 웹 컴포넌트 만들기를 읽으면서 메이커준님을 처음 알게 되었는데, 이번에 기회가 닿게 되어 메이커준님의 유데미 TDD 강의를 듣게 되었습니다. 글또에서 진행한 TDD 스터디에 참여하여 다른 개발자 분들과 함께 강의를 듣고 배운 내용을 공유하여 더 의미 있었던 강의였습니다.

 

프론트엔드에서 TDD를 적용하는 것에 대해 의견이 갈리지만, 코드에 대한 빠른 피드백을 받아 애플리케이션 사용자인 개발자와 실사용자에게 애플리케이션이 정상 동작할 것이라는 자신감을 줄 수 있고, 디버깅이나 리팩터링 시 문서화의 역할을 할 수 있다는 점에서 확실한 이점을 가지고 있습니다.

 

이러한 TDD를 가볍게 접해 보고자 한다면 해당 강의가 도움이 될 것입니다. 실무에 TDD 및 프론트엔드 테스트를 적용한 사례는 아래 블로그를 참고해 보시면 좋을 것 같습니다.

 

우아한 형제들

올리브영

와디즈

 

강의에서 무엇을 배울 수 있나요?

• TDD적인 사고 방식으로 해결하고자 하는 문제의 핵심부터 생각할 수 있습니다.
• 내가 작성한 코드에 대해 테스트 코드로 빠른 피드백을 받을 수 있습니다.
• Cypress를 이용하여 프론트엔드 웹 애플리케이션에 대한 테스트를 할 수 있습니다.

 

강의를 듣고

코드의 무엇을, 어떤 순서로 테스트하는가?

사실 테스트를 처음 접했을 때 코드의 무엇을, 어떤 순서로 테스트하는 것이 최선인지가 막연하게 느껴졌습니다. TDD는 먼저 실패하는 테스트 케이스를 만들고, 동작되게 구현하고, 이를 반복하며 리팩터링하는 과정입니다. 그런데 백지 상태에서 테스트 코드를 작성하자니 어디에서부터 시작해야할지 감을 잡기가 어려웠습니다.

 

다행히도 해당 강의를 통해 TDD Best Practice에 대한 오해를 설명하고, 실제 Best Practice가 무엇인지에 대해 알 수 있었습니다. TDD를 할 시 중요한 접근 방법은 내가 해결할 수 있는 가장 작은 영역의 문제부터 풀어나가고 빠르게 피드백 받는 것이라고 합니다. 이를 위해 사용자에게 가장 중요한 기능을 파악하고, 동작 해야 하는 기능 순서대로 테스트를 짜야 합니다.

TDD를 잘 하시는 분들을 보면 테스트 순서에 의미가 있는 경우가 많다고 합니다. 핵심 기능부터, 아는 것을 이용해 모르는 것으로 확장해 나가는 과정을 순차적으로 만들어 나가야 합니다. 이를 known to unknown이라고 하고, 이러한 Best Practice로 가는 과정에 집중해야 합니다.

 

구체적으로 예를 들자면, 계산기 애플리케이션을 제작하는 경우, 사용자에게 가장 중요한 기능은 연산의 “결과”이므로 연산 결과가 디스플레이에 잘 나타나는지를 확인하는 것이 핵심입니다. 이를 위해 전체 기능을 세분화하여 덧셈, 뺄셈, 곱셈, 나눗셈 기능에 대한 테스트를 작성하고, 이에 대한 연산 결과가 올바르게 나타나는지를 확인합니다. 이후 “최초 페이지에 접속할 시 디스플레이에는 0이 표시된다.”와 같이 결과치를 구체합니다. 이 과정에서 코드가 적을 때 리팩터링하는 습관이 중요합니다. 리팩터링 이후에는 테스트 코드가 동작하는지 확인해야 합니다.

 

 

그래서 추천하나요?

처음 TDD를 접하면서 개념이나 접근 방식이 궁금하신 분들에게 추천드립니다. 현재 섹션 3이 업로드 준비 중이라고 하셔서 그 부분이 아쉽지만, 개념을 잡고, Cypress도 활용해보는 데 좋은 가이드가 될 것이라고 생각합니다. 

 

좋은 강의를 제공해주신 글또와 유데미 감사드립니다.

 

강의 링크

https://www.udemy.com/course/tdd-for-frontend/