Dog foot print

테스트를 진행 하기 전 테스트를 위한 설정을 해주거나, 테스트가 종료된 이후에 설정을 변경해야 할 때가 종종 있습니다. 제스트는 이를 위해서 유용한 함수들을 제공합니다. 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..

서론 지난 포스팅에 이어 오늘은 [i]에 대해서 포스팅 하도록 하겠습니다. ISP (Interface Segregation Principal) : 인터페이스 분리 원칙 인터페이스 분리 원칙은 어떤 인터페이스로부터 상속받아 클래스를 정의 할 때, 사용하지 않는 메서드까지 상속 받지 말고 새로운 인터페이스를 생성하여 기존 상속하려던 인터페이스를 새롭게 확장하여 상속 받아야 한다는 분리원칙이다. 다음의 클래스다이어그램을 보도록 하자 . 위의 클래스 다이어그램에서 파리,벌,사슴벌레 클래스는 곤충 인터페이스를 상속받는다. 이 경우 파리 클래스에서는 독을 뿜다. 라는 메서드가 필요없으며, 벌 클래스와 사슴벌레 클래스에서는 각각 뿔을 움직인다, 독을 뿜다라는 메서드가 필요없음에도 곤충인터페이스를 상속 받았기 때문에 ..

책 소개 애자일 마스터는 2012년 조너선 라스무슨에 의해 작성된 책이다. 책의 진행 방식은 챕터별로 분류되어 있는 목록을 풀이하고, 중간 중간 애자일 마스터와 제자가 해당 챕터에서 다루고 있는 문제를 변형하여, 질문과 대답을 주고 받는 것으로 한 챕터가 종료된다. 독자는 충분히 의구심을 품을 수 있는 내용을 애자일 마스터와 제자가 대신 질문하고 답변 해주기 때문에, 쉽게 이해 할 수 있다. 책을 읽은 계기 올해 5월 부터 근무하게 된 Hitit 회사에서 첫 날 OT때 이사님으로부터, "Agile 방식으로 팀을 운영합니다. 매일 Stand up을 실천하고, 스프린트가 종료되는 날에는 retro spective를 진행 합니다. 또한 CICD를 통해서 테스트 자동화와 지속적인 배포를 하고 있습니다." 라고 ..

서론 “Side Effect”를 사용하기 위해서는 useEffect 함수로 의존성 배열을 통해 발생 시킨다고 지난번 포스팅에서 언급하였다. 그러나 이전에 작성한 함수형 컴포넌트를 내부를 보면 useEffect를 내부에서 사용함에 따라, sideEffect를 발생 시키는 useEffect 함수를 재 사용 하기 어렵고, 간결함이 장점인 함수형 컴포넌트가 useEffect함수로 오염되어 버렸다. function App() { const [counter,setCounter] = useState(0); const [name,setName] = useState('hokeys'); const [show,setShow] = useState(false); useEffect(()=>{ console.log("compone..

Side Effect ‘Side Effect’ 란 무엇인가 ? 바로 함수 호출 시, 함수 내부가 아닌 외부에 영향을 미치는 것을 말한다. 다음의 코드를 보도록 하자 let a = 0; function sideEffect(){ a++; } sideEffect() sideEffect는 매개변수로 들어온 a를 변경하거나, a를 1을 증가시켜 return하지 않는다. 단순히 어떤 함수를 이용하다가 외부 스코프에 있는 변수 a를 변경하였다. 이처럼 외부 상태를 변경시키는 것을 ‘side Effect’라고 한다. ‘부수 효과’라는 어감 때문에, 무조건 안 좋은 느낌이 들 수 있지만 절대 나쁜 용도로 사용하는 것이 아니다. Use effect 클래스 형 컴포넌트에서는 부수효과를 발생 시키기 위해, ‘component..