Vue BDD - Intro

📌 목차

• Introduction
• BDD란 무엇인가?
• BDD를 왜 사용하는가?
• Vue에서 어떻게 BDD를 적용하는가?
• Conclusion
• Reference

📌 Introduction

Vue TDD를 진행하면서 그동안 TDD의 한계점과 좀더 좋은 코드에 대한 생각을 하다가 BDD를 접하게 되었습니다. 회사에서 TDD도 물론 매우 도움이 되었습니다.(주로 unit test) 이번 포스팅은 그래서 그러한 한계점을 극복하는 BDD를 적용하는 방법에 대해 알려드리려고 합니다. 해당 코드는 깃 레포를 참고하시면 됩니다.🎉

📌 BDD란 무엇인가?

BDD는 Behavior Driven Development의 약자입니다. 아래 이미지를 봐주세요.

이처럼 TDD의 상위 버전이 바로 BDD입니다.🎉 순서는 BDD를 하여 feature와 scenario를 먼저 적게 되고 그뒤에 TDD(unit test)를 진행하게 됩니다.

📌 BDD를 왜 사용하는가?

그렇다면 왜 BDD를 하는 것일까요? 정답은 TDD의 한계들 때문입니다. TDD가 실제적으로 팀 단위 작업에서는 약세를 보입니다. 그리고 문서의 기능을 많이 수행하지 않습니다. 이걸 좀더 자연어로 바꾸고 행동에 따라 test를 하기 때문에 기획자(코딩에 대해서 전혀 모르는)와 소통하기가 좋습니다.

또한 다양한 방법으로 실제 테스팅을 해볼 수 있습니다. Unit test로 아무리 자세하게 해보아도 실제 integration 테스트에서 버그가 발생하는 경우가 많은데 이부분을 보완할 수 있습니다.

📌 Vue에서 어떻게 BDD를 적용하는가?

cypress와 cypress-cucumber-preprocessor를 이용하여 BDD를 작성합니다. cypress와 같은 automation툴이 있어 BDD를 보다 편하게 할 수 있습니다. 보다 자세한 내용은 다음 포스팅을 참고해 주세요.

📌 Conclusion

요번에 회사에서 기획자분이 큐에이 시나리오를 써주신 것을 보고 많이 놀랐었습니다. 와 이렇게 테스팅을 하는구나! 이런 관점에서 앱을 보는구나!(앱을 만드는 관점과는 조금 다른) 근데 이걸 코드로 옮길 수는 없을까? 라는 생각에서 BDD를 찾아보게 되었습니다.

그럼 다음 포스팅에서는 BDD setting을 하는 방법에 대해서 포스팅을 해보겠습니다~~!

📌 Reference

• kyle's wiki
• BDD introduction