[코드숨] 리액트 4주차 회고-Redux

Dae-Hee·2022년 5월 29일
0

CodeSoom

목록 보기
4/8
post-thumbnail

어려울때는 도움을 받고 항상 도움을 줄 수 있는 사람이 되자


▪︎ 회고


이번주의 주제는 리액트 상태관리 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 = [...];

지금 마음가짐을 유지하고 끝까지 최선을 다해서 성장하길!🔥

0개의 댓글