Eddie Sunny's Blog

Vue BDD

Vue BDD - Intro

2020.10.05

📌 목차 Introduction BDD란 무엇인가? BDD를 왜 사용하는가? Vue에서 어떻게 BDD를 적용하는가? Conclusion Reference 📌 Introduction Vue TDD를 진행하면서 그동안 TDD의 한계점과 좀더 좋은 코드에 대한 생각을 하다가 BDD를 접하게 되었습니다. 회사에서 TDD도 물론 매우 도움이 되었습니다.(주로 unit test) 이번 포스팅은 그래서 그러한 한계점을 극복하는 BDD를 적용하는 방법에 대해 알려드리려고 합니다. 해당 코드는 깃 레포를 참고하시면 됩니다.🎉 📌 BDD란 무엇인가? BDD는 Behavior Driven Development의 약자입니다. 아래 이미지를 봐주세요. 이처럼 TDD의 상위 버전이 바로 BDD입니다.🎉 순서는 BDD를 하여 fe..

Design Pattern

Constructor Pattern

2020.09.24

📌 목차 Object Creation Constructor in es5 fucntion Constructor in prototype Constructor in Class 📌 Object Creation 빈 Object를 생성하는 3가지 방법 // 1. const object1 = {}; // 2. const object2 = Object.create(Object.prototype); // 3. const object3 = new Object(); Object에 key와 value를 할당하는 4가지 방법 Dot Syntax newObject.key = "value"; Square Syntax newObject["key"] = "value"; Object.defineProperty Syntax Object...

Vue TDD

Vue TDD - 번외2 (mixins tesing)

2020.09.23

📌 목차 00.Introduction 01.Mixin Test하기 02.Conclusion 📌 00.Introduction 이번 포스팅은 mixins의 테스트 방법에 대해 다룹니당. 🎉 mixins는 그렇게 어렵지 않아요.(컴포넌트 테스트와 비슷하게 합니다.) 이번 포스팅에서는 어떻게 mixins를 테스팅하는지에 대해 알아보겠습니다. mixins는 counter example로 진행합니다. 해당 코드는 여기에서 보실수 있습니다. 📌 01.Mixin Test하기 이번 포스팅은 이해를 돕기 위해 먼저 counter mixins 코드를 짜보고 그뒤에 테스트 코드를 작성하겠습니다. 해당 코드는 이렇게 됩니다. // CounterMixins.js export default { data: () => ({ count..

Design Pattern

Vue Design Patterns - Builder Director Pattern

2020.09.05

Vue TDD

Vue TDD - 번외1 (Test Double)

2020.08.22

목차 Introduction What is Test Double Stub Spy Mock Conclusion Reference 📌Introduction 이번편은TDD를 하기위해 test double이라는 것에 대해 부가적으로 알아보는 포스팅입니다. 📌What is Test Double? 테스트 더블이란 실제 객체를 대신해서 테스팅에서 사용하는 모든 방법을 말합니다. 예를 들어 보겠습니다. 다음과 같은 실제 api 통신을 하는 함수가 있다고 가정해봅시다. asnyc function getTodos() { await axios.get('jsonplace-holder/todos'); } getTodos를 테스팅하려면 실제 네트워크 api를 사용하게 됩니다. 이것은 네트워크 연결 상태에 영향을 받을 것이고 항상..

Vue TDD

Vue TDD - 회고편

2020.08.10

📌 목차 서론 TDD를 하면서 겪었던 어려움들 TDD를 하면서 좋았던 점들 결론 📌 서론 이번 포스팅에서는 그동안 다뤘던 tdd에 관해 회고 해보는 포스팅 입니다. 개인적으로 tdd를 하면서 겪었던 어려움들 그리고 느꼈던 생각들을 정리해 보는 포스팅입니다. 📌 TDD를 하면서 겪었던 어려움들 TDD를 하면서 겪었던 어려움들은 다음 세가지가 있습니다. 어디까지 test를 해야할까? 어떻게 하면 의존성을 줄일 수 있을까? testcase가 잘못 되면 어쩌지? 1. 어디까지 test를 해야할까? 모든 코드를 test code로 커버한다는 것은 매우 어렵고 비생산적인 일입니다. 그렇다면 어디까지 testcode를 작성을 해야할까요? 어느 부분에서 실수가 가장 많이 날까요? 이런것들은 어쩔수 없는 경험이라고 생각..

Vue TDD

Test code 쉽게 쓰기 - 1

2020.08.06

목차 vscode snippet 이란? vscode snippet 사용하기 📌 1. vscode snippet 이란? 미리 지정해둔 예약어로 코드를 생성하는 기능 입니다. 이기능을 사용하여 일일이 쳐야하는 describe('', () => {})와 it('', () => {}) 를 자동적으로 생성해보겠습니다. 📌 2. vscode snippet 사용하기 설정 먼저 Code > Preferences > User Snippets로 이동합니다. file이름을 정의하고 javascript로 설정합니다. 그럼 이런 파일이 열리게 됩니다. 이제 이렇게 예약어를 등록할 수 있습니다. "describe": { // 제목 "prefix": "desc", // 예약어 "body": "descr..

Vue TDD

Vue TDD - E2E 편

2020.08.02

Table of Content Introduction Usage of Cypress1 Usage of Cypress2 Usage of Cypress3 Usage of Cypress4 Conclusion Reference 📌 Introduction 안녕하세요. 이번 포스팅에서는 e2e test를 진행합니다. Cypress를 이용하여 진행하게 될 것입니다. 🎉 이번 포스팅은 간단하게 tdd-todo를 통하여 5개의 todo를 추가해보고 5개가 정말로 추가가 됬는지에 관한 e2e테스트를 진행하려고 합니다. 🚨해당 포스팅에서는 설치 방법에 대해서는 다루지 않습니다. 또한 Cypress의 문법과 같은 자세한 방법은 다루지 않습니다. 📌 Usage of Cypress1 Cypress를 이용하기 전에 DOM 탐색 할..

전체 글

Vue BDD - Intro

Constructor Pattern

Vue TDD - 번외2 (mixins tesing)

Vue Design Patterns - Builder Director Pattern

Vue TDD - 번외1 (Test Double)

Vue TDD - 회고편

Test code 쉽게 쓰기 - 1

Vue TDD - E2E 편

티스토리툴바