코드숨 React 8기 - 3주차 회고

Facts(학습내용, 사실/ 객관)

학습내용

1.  TDD 이해 및 TodoList 적용해보기 

 

사실 / 객관

1. 회사 일이 바빠 과제에 많은 시간을 쏟지 못했다. 

2. 늦게 과제를 제출한 만큼 리뷰를 거의 받지 못했다. 

3. 고대했던 TDD를 배웠고 투두앱에 적용 해보았다.  

 

---

Feelings(느낌,주관)

1. 어렵다ㅠㅠ  

이번 주는 고대했던 TDD, 테스트 코드 작성법에 대해 배웠다. 영상을 보며 TDD의 개념과 사용법에 알아봤지만 막상 과제를 하려고 보니 

선뜻 작성하기 어려웠다. 어디서 부터 어떻게 작성해야 할 지 감이 잡히지 않았다. 

어려웠던 점은 두 가지였다. 첫 번째는 일단 사용법이 익숙하지 않아 어떤 함수를 써서 어떤 걸 테스트 해야하는 지가 어려웠고 

두 번째는 각 컴포넌트 별로 무엇을 테스트 해야하는 지에 대해 감이 잡히지 않았다.

고민 끝에 다른 분들은 어떻게 작성했는 지를 한번 보고 그제야 감을 익히고 시작할 수 있었다. 

 

2. 단순한 것과 쉬운 것부터 

무엇을 어떻게 해야 할까 싶을 땐 테스트 대상을 사용하면 이런 결과가 나온다부터 시작해 보세요.
복잡한 것 보다는 단순하고 쉬운 것 부터 시작해 보세요. 그 후에 만약에 이러한 경우라면? 만약 ~ 이 없다면 테스트를 추가하여 점진적으로 만들어 보세요.

과제를 선뜻 시작하지 못한 이유는 너무 복잡하게 생각하고 세세한 모든 다 계획하고 시작해야 된다는 생각이 기저에 있어서 이지는 않았을까? 윤석님은 트레이니의 상황을 이해하고 위와 같이 아주 간단한 것부터 시작하라고 조언 해주셨다. 

그렇다 모든 것이. 아주 어렵고 거창한 것일 수록 간단한 것부터 점진적으로 만들어 나가야 한다. 

 

---

Findings(배운점)

1. TDD Cycle(Red - Green - Refactoring)에 대해 알게 되었다. 

먼저 통과하지 못하는 코드를 작성하고 그것이 통과될 때까지 코드를 수정 보완 해나간다. 그리고 최종적으로 중복된 코드 제거 등 리팩터링을 한다. 

 

2. describe - context - it(test)의 개념을 알게 되었다.

• describe : 테스트를 진행할 대상을 명시한다.
• context : 테스트 대상의 상황을 설명한다(with, without, when).
• it(test) : 테스트 대상의 행동을 설명한다.

// describe - it => describe('List') => it('render tasks');
// with tasks
// - List renders tasks
// - List renders 'delete' button to delete a task

// without tasks
// - List renders no tasks message

describe('List', () => {
  const handleClickDelete = jest.fn();

  function renderList(propsTask) {
    return render(<List tasks={propsTask} onClickDelete={handleClickDelete} />);
  }

  context('with tasks', () => {
    it('renders tasks', () => {
      const { getByText } = renderList(tasks);

      expect(getByText(/뭐라도 하기/)).not.toBeNull();
      expect(getByText(/코드숨 과제/)).not.toBeNull();
    });

    it('render "완료" button to delete a task', () => {
      const { getAllByText } = renderList(tasks);

      const buttons = getAllByText('완료');
      fireEvent.click(buttons[0]);

      expect(handleClickDelete).toBeCalledWith(1);
    });
  });

  context('without tasks', () => {
    const emptyTasks = [];

    it('renders no task message', () => {
      const { getByText } = renderList(emptyTasks);

      expect(getByText(/할 일이 없어요!/)).not.toBeNull();
    });
  });
});

3. Fixture에 대해 알게 되었다. 

테스트를 위해 변경되지 않는 상태의 객체나 데이터를 만들어 둔 것을 'Fixture'라고 한다.

Mocking은 테스트 대상 객체의 행동을 고립시키기 위해서, 의존성을 배제하기 위해서는 의존되어있는 객체들의 행동을 가짜로 만들어주는 것이다.
출처: https://codify.tistory.com/116 [CodeLife]

 

4. npx jest --watchAll --verbose 

요약해서 알려주는 것이 npx jest --watchAll

테스트 컴포넌트 단위로 디테일하게 알려주는 것이 npx jest --watchAll --verbose 

 

---

Affirmation(자기 선언, 앞으로 할 것)

1. 수동적으로 정보만을 받아 들이지 말고 능동적으로 정보들을 찾고 적용해보고 질문해나가자. 

2. 질문을 많이 할 수록 더 많이 배워간다는 생각으로 과제를 빨리 시작하고 많은 질문을 하자. 

3. 일이 바쁘더라도 하루 2시간은 꼭 투자하자.