어려울때는 도움을 받고 항상 도움을 줄 수 있는 사람이 되자
이번주의 주제는 리액트 상태관리 Redux에 대한것이었다.
그동안 알고있던 Redux의 내용을 정확하게 배웠는지 체크해 볼 수 있는 시간였고,
바로 가공된 패턴을 사용하기보다, TDD를 적용하며 차근차근 복습 할 수 있었다.
하지만 두번째 과제에서 기존에 코딩하던 방식을 버리고 새로운 방식으로 접근하려니
첫 단추를 끼기가 참 어렵게 느껴졌다.
같은 조원분께 조언을 구했는데 너무나 감사하게도 내가 코딩하는 걸 라이브로 지켜봐주시며,
TDD 수행 방식의 기초를 알려주셨다 🙏🏻
나도 그런사람이 되어야겠다!
* Point
구현에 목적을 두지 않고 TDD의 red green refactor cycle를 따르다 보면,
자연스럽게 테스트는 스펙이되고 좋은 개발 문서가 된다.
R-G-R 의 중요성
npm ci - https://mygumi.tistory.com/409
getBy...(//)은 정규표현식을 사용하는 것
Mock 은 가짜라고 생각하기보다 대처를 하는 것이라고 생각
toBeInTheDocument dom이 있는 체크할 때 사용
예시 : expect(getByText('등록')).toBeInTheDocument();
일단 당연히 실패하는 테스트를 만들어라!(Red)
그 테스트를 성공하는 바보 아메바 같은 구현체를 만들어라~(Green)
아메바를 완성했을때,
1. 성공한 케이스의 테스트 코드를 보강한다.
2. 구현체를 더욱 더 리펙터링 한다.
(Refactor)
3. 새로운 요구사항을 접근한다.
늦은 제출로 인한 추가 코드리뷰 대기중...
제약 조건에 걸린 추가 및 삭제 등
길이 불변에 대한 테스트는 list 변수를 별도로 선언하여,
length 활용한다.
// before
context('without existed task ID', () => {
it('doesn`t work', () => {
const state = reducer({
tasks: [
{ id: 1, title: 'Task' },
],
}, deleteTask(100));
expect(state.tasks).toHaveLength(1);
});
});
// after
context('without existed task ID', () => {
it('doesn`t work', () => {
const tasks = [{ id: 1, title: 'Task' }];
const state = reducer({ tasks }, deleteTask(100));
expect(state.tasks).toHaveLength(tasks.length);
});
});
array 변수는 뒤에 List를 붙이는 것 보다
복수 명사의 형태로 하는 것 이 좋다.
// before
const operationList = [...];
// after
const operations = [...];
지금 마음가짐을 유지하고 끝까지 최선을 다해서 성장하길!🔥