Dog foot print

Store contract store = { subscribe: (subscription: (value: any) => void) => (() => void), set?: (value: any) => void }개발자는 svelte/store의 도움 없이, store contract를 구현 할 수 있습니다. 다음은 커스텀 스토어를 생성하기 위한 규칙입니다. 스토어는 반드시 subscription 정의에 맞는 첫번째 전달인자를 가진 .subscribe메서드를 가지고 있어야 합니다. subscription콜백은 신속하고 동기적으로 현재 값을 전달해주어야 합니다. .subscribe메서드는 반드시 unsubscribe메서드를 반환해야 합니다. unsubscribe메서드를 호출 하게되면, 더 이상 store의 ..

Svelte script script 블락은 컴포넌트 인스턴스가 생성 되었을 때 실행되는 script 입니다. 변수를 선언하거나 import를 최상위에서 선언한 경우, 해당 컴포넌트 마크업 구조에서 사용이 가능합니다. 이 script에는 4가지 조건이 존재합니다. export creates a component prop svelte는 export예약어를 사용하여, 해당 컴포넌트로 전달되는 props 를 정의합니다. 이렇게 정의된 props는 컴포넌트의 consumer에서 접근이 가능합니다. 또한 개발자는 props의 기본 값을 미리 지정해 줄 수 있습니다. 이 것은 해당 컴포넌트를 사용하는 consumer에서 props를 구체적으로 정의하지 않은 경우, 대신하게 됩니다. props가 consumer에 의..

Mock 함수는 테스트에서 사용 할 수 없는 함수(window.replace)와 함수에 어떤 파라메터가 전달되었는지, 인스턴스가 new 키워드로 생성되었을 때 생성자 함수를 캡쳐링 하는 것을 가능하게 도와준다. Mock 함수를 사용하는 방법은 두개가 존재한다. 이 두 방법은 test code에서 직접 Mock 함수를 생성하거나, 의존성 모듈에 직접 mock함수를 작성하는 방법이다. Using a mock function 다음과 같이 forEach 함수를 통해서 배열을 순회하며, 전달 된 callback으로 배열 내부에 아이템을 전달한다고 생각해보자. function forEach(items, callback) { for (let index = 0; index < items.length; index++) ..

테스트를 진행 하기 전 테스트를 위한 설정을 해주거나, 테스트가 종료된 이후에 설정을 변경해야 할 때가 종종 있습니다. 제스트는 이를 위해서 유용한 함수들을 제공합니다. Repeating Setup For Many Tests 만약 테스트가 종료된 후, 반복해야 할 코드가 존재할 때 `beforeEach` 또는 `afterEach`를 이용해 반복을 줄일 수 있습니다. 예를 들어, 테스트 마다 각 도시의 데이터베이스와 통신해야 한다고 가정하겠습니다. 개발자는 `initializeCityDatabase()`를 가지고 있고, 이는 테스트 전에 항상 호출 해야합니다. 또한 `clearCityDatabase()`를 테스트가 종료 될 때 마다 호출해야합니다. beforeEach(() => { initializeCit..

Note : 자바스크립트의 코드는 비동기적으로 작동합니다. 개발자가 코드를 비동기적으로 실행 할 때, 이를 위해 제스트에게 이 코드가 언제 완료 되는지 알려 주어야 합니다. callback 을 이용하기 비동기 코드를 확인 하는 가장 일반적인 방법은 콜백을 이용하는 것 입니다. 예를 들어, fetchData(callBack) 의 함수를 사용하는 경우, 함수는 어떤 데이터를 패치하고 마무리 되면 callback(data) 를 호출하게 될 것입니다. 아래의 코드에서는 ‘peanut butter’ 라는 string이 전달되는데, 개발자는 이를 확인 하고 싶을 겁니다. function fetchData(callBack){ setTimeout(()=>{ callBack("peanut butter"); },1000)..

Note : 제스트는 matcher를 사용하여, 사용자가 다양한 방식으로 값을 테스트 하게 도와줍니다. 이 문서는 주로 사용되는 matcher에 대해서 소개 하며, 모든 Mathcer에 대한 list는 다음의 링크를 참조하세요. 일반적인 Matcher들 다음 예제는 아주 간단한 방법으로 값이 예상하는 값과 일치하는지 확인 하는 방법입니다. test('two plus two is four',()=>{ expect(2 + 2).toBe(4); }) 이 코드에서, expect(2+2) 함수 호출은 ”expectation” 객체를 반환합니다. 일반적으로 이러한 expectation 객체에서 call matcher를 제외하고는 많은 작업을 수행하지 않습니다. 이 코드에서는.toBe(4) 가 Matcher 입니다...

서론 Jest 시작하기 시리즈 문서들은 TEST 도구인 JEST의 공식 홈페이지 문서를 번역하고 설명을 덧 붙인 문서입니다. 설치 * Yarn 을 이용한 설치 * $ Yarn add —dev jest * Npm 을 이용한 설치 * $ npm install —save-dev jest Note : 이 문서는 yarn command를 사용하지만, npm 또한 동일하게 동작합니다. JEST 실행하기 ./sum.js function sum(a,b){ return a + b; } ./sum.test.js const sum = require("./sum"); test("adds 1 + 2 to equal 3",()=>{ expect(sum(1,2)).toBe(3); }) ./package.json { ... "scr..

서론 지난 포스팅에 이어 마지막 DIP 에 대해서 포스팅 하겠습니다. DIP :(Dependency Inversion Principle) 의존관계 역전 원칙 의존성 역전 원칙에서 말하는 "유연성이 극대화된 시스템"이란 소스코드가 추상에 의존하며 구체에는 의존하지 않는 시스템을 의미한다. 추상 인터페이스에 변경이 생기면 이를 구체화한 구현체들도 따라서 수정해야 한다. 반대로 구체적인 구현체에 변경이 생기더라도 그 구현체가 구현하는 인터페이스는 항상 변경될 필요가 없다. 따라서 인터페이스는 구현체보다 변동성이 낮다. 즉 안정된 소프트웨어 아키텍처란 변동성이 큰 구현체에 의존하는 일은 지양하고, 안정된 추상 인터페이스를 선호하는 아키텍처라는 뜻이다. 이 원칙을 구체적인 코딩 실천법으로 요약 하면 다음과 같다...