일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 자바스크립트
- hokidoki
- queue
- data structure
- 자료구조
- 리액트
- 계명대
- 이종호
- 자스민
- Svelte
- 리액트 예제
- 스위프트
- HTML
- hokeys
- javascript
- react
- TDD
- SWIFT
- 개발
- Hitit
- 힛잇
- IOS
- 스벨트
- 호키도키
- 호키스
- 개발자
- jest
- 계명대 이종호
- 자바스크립트 자료구조
- 비동기
- Today
- Total
목록Hitit (17)
Dog foot print
태그는 모든 컴포넌트가 인스턴스되었을 때 실행되는 것이 아닌 처음 script를 읽혔을 때 실행 됩니다. 보통의 script태그와 마찬가지로 변수를 선언 가능합니다. context="module" 속성을 가진 script 내부에서 export 키워드를 통하여, 모듈을 방출 할 수 있으며 컴파일 되었을 때, 모듈화 됩니다. export default는 사용 할 수 없습니다. 이유는 해당 파일에서 기본 방출 되는 것은 스벨트 컴포넌트이기 때문입니다. Note : 에서는 반응성을 구현 할 수 없습니다. 만약 다양한 컴포넌트에서 반응성을 필요로 한다면 store를 생성하는 것을 고려하세요 .
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..