배경
TDD를 공부하기 위해서 열심히 유튜브를 통해 jest 사용법을 공부하고 있는 와중. 충격을 먹은 부분이 있어서 잊지 않고자 블로그에 포스팅해보려고 한다.
바로 배열 없이 스택 구ㅡ현하기!!
설정부터 시작
우선 기본적인 설정부터 해보자. 일반적은 node js 환경에서 test를 돌리는 것이기 때문에, jest와 @types/jest가 필요하다. npm init을 커맨드에 작성하고 두 라이브러리를 다운받아 주자.
그 후 package.json을 다음과 같이 바꿔주자.
{
"test" : jest --watchAll --verbose --coverage
}- watchAll : 저장하면 runs all tests
- verbose : test 결과 상세 내역을 보여준다.
- coverage : test의 어떤 부분이 빠졌는지 표로 보여준다.
배열 없이 스택 만들기
위와 같이 구성을 하면 이제 TDD로 배열 없이 배열 만들기 준비가 끝났다. 배열 없는 배열 팀
stack의 기본 틀 잡기
describe('배열 만들기',()=>{
it('스택이 empty로 만들어졌는가?', () => {
const stack = new Stack();
expect(stack.top).toBe(-1);
});
it('스택 top에 push?');
it('pop도 가능?');
});TDD의 기본 방향은 우선 틀린 테스트 케이스 작성 -> 고쳐서 작동하게 만들기 -> 반복이다.
위처럼 코드를 짜서 test를 돌려보면 당연히 fail이다. Stack이 정의되지 않았기 때문. stack을 구현해준다.
describe('배열 만들기',()=>{
class Stack {
constructor(){
this.top = -1;
this.items = {}; // 배열을 못 쓰니 빈 객체를 넣자.
}
}
it('스택이 empty로 만들어졌는가?', () => {
const stack = new Stack();
expect(stack.top).toBe(-1);
expect(stack.items).toEqual({}); // toBe(x) toEqual(0)
});
it('스택 top에 push?');
it('pop도 가능?');
}); test가 끝난 후 다음 번 test를 진행하기 전에 initialize가 필요하다.
describe('배열 만들기',()=>{
class Stack {
constructor(){
this.top = -1;
this.items = {}; // 배열을 못 쓰니 빈 객체를 넣자.
}
}
// 초기화
beforeEach(()=>{
stack = new Stack();
})
it('스택이 empty로 만들어졌는가?', () => {
const stack = new Stack();
expect(stack.top).toBe(-1);
expect(stack.items).toEqual({}); // toBe(x) toEqual(0)
});
it('스택 top에 push?');
it('pop도 가능?');
});
stack의 매서드 만들기
describe('배열 만들기',()=>{
class Stack {
constructor(){
this.top = -1;
this.items = {}; // 배열을 못 쓰니 빈 객체를 넣자.
}
}
// 초기화
beforeEach(()=>{
stack = new Stack();
})
it('스택이 empty로 만들어졌는가?', () => {
const stack = new Stack();
expect(stack.top).toBe(-1);
expect(stack.items).toEqual({}); // toBe(x) toEqual(0)
});
it('스택 top에 push?',()=>{
stack.push('haha');
expect(stack.top).toBe('haha');
exprect(stack.peek).toBe('haha);
});
it('pop도 가능?');
});
stack의 push에 대한 test case 먼저 작성
describe('배열 만들기',()=>{
class Stack {
constructor(){
this.top = -1;
this.items = {}; // 배열을 못 쓰니 빈 객체를 넣자.
}
get peek() {
return this.items[this.top];
}
push(value){
this.top += 1;
this.items[this.top] = value;
}
}
// 초기화
beforeEach(()=>{
stack = new Stack();
})
it('스택이 empty로 만들어졌는가?', () => {
const stack = new Stack();
expect(stack.top).toBe(-1);
expect(stack.items).toEqual({}); // toBe(x) toEqual(0)
});
it('스택 top에 push?',()=>{
stack.push('haha');
expect(stack.top).toBe('haha');
exprect(stack.peek).toBe('haha);
});
it('pop도 가능?');
});
pop 구현
describe('배열 만들기',()=>{
class Stack {
constructor(){
this.top = -1;
this.items = {}; // 배열을 못 쓰니 빈 객체를 넣자.
}
get peek() {
return this.items[this.top];
}
push(value){
this.top += 1;
this.items[this.top] = value;
}
}
// 초기화
beforeEach(()=>{
stack = new Stack();
})
it('스택이 empty로 만들어졌는가?', () => {
const stack = new Stack();
expect(stack.top).toBe(-1);
expect(stack.items).toEqual({}); // toBe(x) toEqual(0)
});
it('스택 top에 push?',()=>{
stack.push('haha');
expect(stack.top).toBe('haha');
exprect(stack.peek).toBe('haha);
});
it('pop도 가능?',() => {
stack.push('haha');
stack.pop();
expect(stack.top).toBe(-1);
exprect(stack.peek).toBe(undefined);
});
}); test case 기반으로 구현한다.
describe('배열 만들기',()=>{
class Stack {
constructor(){
this.top = -1;
this.items = {}; // 배열을 못 쓰니 빈 객체를 넣자.
}
get peek() {
return this.items[this.top];
}
push(value){
this.top += 1;
this.items[this.top] = value;
}
pop(){
this.top -= 1;
delete this.items[this.top];
}
}
// 초기화
beforeEach(()=>{
stack = new Stack();
})
it('스택이 empty로 만들어졌는가?', () => {
const stack = new Stack();
expect(stack.top).toBe(-1);
expect(stack.items).toEqual({}); // toBe(x) toEqual(0)
});
it('스택 top에 push?',()=>{
stack.push('haha');
expect(stack.top).toBe('haha');
exprect(stack.peek).toBe('haha);
});
it('pop도 가능?',() => {
stack.push('haha');
stack.pop();
expect(stack.top).toBe(-1);
exprect(stack.peek).toBe(undefined);
});
}); 정리
- 내가 자연스럽게 썼던 무언가 역시 어떠한 구현으로 만들어진 것이라는 것이 새삼 충격이었다.
- 새로운 무언가를 정의하고 만들 때는
class를 항상 기억하자.
참고
더 나은 서비스를 고민하는 프론트엔드 개발자.