11/20 TIL | 이쯤에서 다시 보기! (feat. FEConf 2020 & BDD)

오늘은 14주차 풀스택 과정의 주말 학습의 둘째 날! 도합 15시간에 가까운 압도적 분량에 정신이 혼미하지만... 그래도 뜬금없는 내용이 아니라 13주간 배웠던 개념들을 총망라해서 마카오 뱅크라는 하나의 웹 서비스를 만드는 거라 재밌게 보고 있다. (but 아직 다 못 봄..)

12~13주차 2주 간 React, 즉 프론트엔드에서 TDD하는 법을 배웠고, 백엔드 TDD에는 나름 익숙해졌지만 React로 TDD하는 것은 완전 처음인 데다가 그동안 구현부터 했던 버릇이 남아있어 테스트 코드 먼저 작성하는 것에 익숙해지는 데 조금 고생을 했다. 그러다 문득 과정 시작 전에 봤었던 홀맨님의 FEConf 2020 <프론트엔드에서 TDD가 가능하다는 것을 보여드립니다.> 영상이 생각났고, 지금 시점에서 다시 본다면 지난번 봤을 때보다 느껴지는 게 다르지 않을까? 싶어 이쯤에서 다시 보기를 시전했다.

---

역시나 지금 시점에서 다시 보니 보이는 게 달랐다. 지난번에 봤을 때는 Test 짤 때 쓰는 describe~context~it도 뭔 소린가 했었고.. 어찌저찌 중반부까지는 이해했으나 후반부에 BDD 등장했을 땐 완벽하게 이해하기가 힘들어 걍 끝까지 다 보기에 의의를 두고 봤었다.

근데 2주 동안 React로 테스트 코드를 작성하면서 기본 개념들을 익힌 상태에서 다시 보니 처음부터 끝까지 아 이거였어? 하면서 보게 되었다는... 그 사이 또 조금 성장했구나.. 자 박수👏

---

무튼 영상의 후반부에 등장하는 BDD가 이번 주 강의에서도 등장한 개념이라 겸사겸사 정리해보겠다.

BDD란 Behavior Driven Development의 약자로, 한국어로는 '행위 주도 개발'이라고 한다. TDD와 큰 차이는 없는데, 테스트로 접근하려고 하면 너무 어려우니 테스트를 짤 때 사용자의 행위를 중심으로 시나리오를 짜서 개발하는 것을 말한다. 프로젝트를 개발할 때 BDD의 테스트 케이스로 시나리오 검증을 하고, 해당 시나리오에서 사용하는 각 모듈은 TDD의 테스트 케이스로 검증을 하면 된다.

TDD vs BDD

그렇다면 어떻게 작성하면 되는지 예시와 함께 살펴보자.

사용자 스토리	잔액 확인 - 고객은 얼마를 쓸 수 있는지 알기 위해 본인 계좌의 잔액을 확인할 수 있다.
시나리오	#1. 잔액이 0원인 경우	#2. 잔액이 있는 경우
Given	- 고객 잔액 정보 세팅(전제)  - 사용자가 웹 사이트에 로그인 한다.
When	- 잔액 조회 버튼을 누른다.
Then	- '잔액 0원' 혹은 '잔액이 없습니다.' 등의 메시지가 보인다.	- 가지고 있는 잔액이 보인다.

요구사항과 기능에 대해 사용자 가치 중심으로 사용자 스토리를 작성하고, 개별 스토리에 대해 구체적인 시나리오를 짠다. TDD와 BDD 덕분에 요구 사항이 자연스럽게 명확해지는 것이다! 배운 내용을 토대로 잘 작성해서 구현 중간에 길을 잃는 일이 없도록 야무지게 개발해보자!