Eddie Sunny's Blog

Design Pattern

Observer Pattern

2020.10.19

📌 목차 Introduction What is Observer Pattern? Implementation Conclusion Reference 📌 Introduction 안녕하세요. 이번 포스팅에서는 Observer Pattern에 대해 알아보겠습니다. 📌 What is Observer Pattern? 옵저버 패턴은 객체의 상태 변화를 관찰 하는 관찰자를 등록하여 상태 변화가 있을때 noti를 주는 디자인 패턴입니다. 📌 Implementation 먼저 subject클래스를 정의 해보겠습니다. class Subject { constructor() { this.observers = []; return this; } addObserver(observer) { this.observers.push(observe..

Javascript Study

call, apply, bind

2020.10.18

📌 목차 Introduction What is call? What is apply? What is bind? Usage Conclusion Reference 📌 Introduction 안녕하세요. 이번 포스팅에서는 가장 헷갈리는 call, apply, bind에 대해서 알아보겠습니다. 📌 What is call? 먼저 call을 정의하기 전에 해당 예제를 봐주세요. const example = (a, b, c) => { console.log(a + b + c); }; example(1, 2, 3); // 6 example.call(null, 1, 2, 3); // 6 example을 실행시킨 것과 마찬가지로 example.call도 똑같은 결과를 보냅니다. 눈치를 채신분도 있겠지만 call의 첫번 째 인..

Vue BDD

Vue BDD - Cypress Mock Api

2020.10.13

📌 목차 Introduction Cypress api mock 하기 Conclusion Reference 📌 Introduction 안녕하세요. BDD마지막 시간으로 이제 Cypress에서 api call를 mock 하는 방법에 대해 알아보겠습니다. 해당 코드는 여기에서 확인하실 수 있습니다. 해당 예제는 jsonplaceholder에서 todo를 하나 반환하는 예제 입니다. 📌 Cypress api mock 하기 API를 mock 하기전에 먼저 행동을 정의해보겠습니다. Todo의 제목은 'hello'라고 쓰여있어야 합니다. Feature: Todo Background: Given I am on the main page Scenario: Todo display Then I can see Todo with..

Vue BDD

Vue BDD - Cypress 적용하기

2020.10.13

📌 목차 Introduction Gherkin 사용 Gherkin + Cypress Vuex store mocking 하기 Conclusion Reference 📌 Introduction 안녕하세요! 오늘은 지난 포스팅에서 다뤘던 Gherkin을 실제로 Cypress에 적용하는 포스팅입니다. 해당 코드는 여기에서 확인 하실 수 있습니다. 🚧 해당 포스팅의 예제는 간단한 counter 구현입니다. 📌 Gherkin 사용 Counter는 세가지 시나리오에 대해서 작동이 해야합니다. count의 시작 값은 0입니다. 플러스 버튼을 누르면 count가 1 증가 해야합니다. 마이너스 버튼을 누르면 count가 1 감소 해야합니다. 이제 해당 시나리오를 Gherkin으로 옮겨보겠습니다. # Counter.featu..

Design Pattern

Module Pattern

2020.10.07

📌 목차 Introduction Module Pattern 이란? Moudle Pattern 구현 Module Pattern의 장단점 Conclusion Reference 📌 Introduction 안녕하세요! 이번 포스팅에서는 자바스크립트에서 module pattern에 대해서 공부해보겠습니다.🎉 Singleton 패턴과는 비슷하지만 Singleton처럼 하나의 instance만 만드는것이 아닌 다수의 instance를 만드는 것이 module pattern 입니다! 📌 Module Pattern 이란? Module pattern이란 전체 어플리케이션 일부를 독립된 코드로 분리하여 만드는 것 입니다. 다른 여타 프로그래밍 언어처럼 자바스크립트는 접근 제한자(public, private,...)가 없기 ..

Vue BDD

Vue BDD - Gherkin

2020.10.06

📌 목차 Introduction Gherkin?이 뭔데? Gherkin 키워드 Good And Bad Gherkin example Conclusion Reference 📌 Introduction 안녕하세요. 이번 포스팅은 드디어 BDD를 시작하는 첫걸음 입니다. 바로 Gherkin인데요. 그럼 지금부터 Gherkin이 뭔지 사용은 어떻게 하는지에 대해 알아보겠습니다. 👍 📌 Gherkin?이 뭔데? Gherkin이란 cucumber의 표현 형식입니다. 아래 그림을 봐주세요. Gherkin은 바로 이렇게 Given, When, Then으로 정의를 합니다. Before Gerkin을 보면 기획자로 보이는 사람과 개발자로 보이는 사람이 서로 대화를 합니다. 개발자의 말을 기획자는 이해를 못하죠. 하지만 Ghe..

Vue BDD

Vue BDD - Setting

2020.10.06

📌 목차 Introduction Setting을 어떻게 해야할까? Conclusion Reference 📌 Introduction 안녕하세요 이번 포스팅은 지난번에 알려드린대로 BDD를 세팅하는 방법에 대해서 알려드리려고 합니다. 실제 코드는 여기를 참고하시면 됩니다. 🎉 📌 Setting을 하는 방법 먼저 cypress-cucumber-preprocessor를 설치해주세요 npm i -D cypress-cucumber-preprocessor package.json package.json에 해당 내용을 추가해주세요. "cypress-cucumber-preprocessor": { "nonGlobalStepDefinitions": true, "stepDefinitions": "tests/e2e/specs",..

Design Pattern

Singleton Pattern

2020.10.05

📌 목차 Introduction Singleton 패턴이란? Singleton 패턴 구현 Conclusion Reference 📌 Introduction 안녕하세요 이번 포스팅에서는 design pattern중 singleton 패턴에 대해서 배워보겠습니다! 📌 Singleton 패턴이란? 이름에서 single이 들어가는 것으로 유추할 수 있듯이 전체 시스템에서의 하나의 인스턴스를 존재하도록 보장하는 객체 생성패턴입니다. 따라서, 객체 리터럴도 모두 싱글톤 패턴이라고 할 수 있습니다. 하지만 모든 속성이 다 공개가 되어있기에 비공개를 만들때 제대로 된 singleton 패턴 입니다. 📌 Singleton 패턴 구현 Singleton은 객체 리터럴 + 클로저로 구현할 수 있습니다. 다음 코드를 봐주세요. ..

전체 글

Observer Pattern

call, apply, bind

Vue BDD - Cypress Mock Api

Vue BDD - Cypress 적용하기

Module Pattern

Vue BDD - Gherkin

Vue BDD - Setting

Singleton Pattern

티스토리툴바