FeConf2020 리뷰🖊: 프론트엔드에서 TDD가 가능하다는 것을 보여드립니다.

강연내용 살펴보기

TDD (Test Driven Development)

• 2014/켄트 벡, 테스트 주도 개발
• 클린코드의 궁극적인 목표는! "Clean Code that works"
• TDD는 "Test First Programming"이라고도 함

  TDD Cycle
  

TDD 왜 어려운가?

• 코드자체가 testable하지 않기 때문!
• TDD가 쉬워지는 해결법은 "코드를 Testable하게 짜는 것!"

Testable Code 어떻게 짭니까?

• testable 코드 어떻게 짭니까?

관심사의 분리 (Separation of Concerns)

• testable한 코드를 짜기 위해서는, 관심사의 분리를 적용해야!
• 각 개별 요소는 개별이 관심사만 다룰 것!
• 관심사의 분리가 제대로 이루어지지 않으면! 거대한 진흙 덩어리 (Big Ball of Mud)로 변한다!

Live Coding으로 TDD

코드는 여기에

Redux 왜써요?

• 상태관리 때문에 쓴다!
• 그리고! 연사분께서는 "React의 관심사" 분리 때문에 쓴다고 생각한다고 하신당!

React의 관심사란?

• React의 관심사는 상태의 반영(State Reflection)이다!
• 리액트는 상태의 반영에만 관심있지! 상태 관리에는 관심이 없다고 한다.

Presentational Components와 Container Components

• Container Components의 핵심은! Container Components만 리덕스의 존재를 안다는 것!

느낀 점

test가 어려운 것은 testable하지 못해서라는 말에 딱🌰 한대 맞았다
하나의 컴포넌트에서 수행하는 역할이 많을 때 테스트 코드 작성하기 난감해서, 기능이 명확한 작은 컴포넌트들만 테스트 코드를 작성하곤 했었다
컴포넌트를 관심사의 분리 원칙에 따라 잘 나눠서 테스트코드 작성이 용이한 컴포넌트를 만들고, 결과적으로 모든 컴포넌트에 test코드를 작성할 수 있도록 해야겠다!

TDD는 코딩습관
작은 기능(함수보다 작은 단위)을 위한 테스트 코드를 짜고 실제 코드를 짜고 확인
이 과정의 반복과
이렇게 코딩하는 습관을 길들이는 것

Reference

• https://www.youtube.com/watch?v=L1dtkLeIz-M&fbclid=IwAR1fypdPSFTV20lsBAv_k2gLkeH0qPJh7RnVFOxpjd21m5lVVCElZTjec4I
• https://drive.google.com/file/d/1658E_OFq-Iq4f2kCRKxL-afUz3NVmzWL/view
• https://github.com/CodeSoom/frontend-tdd-feconf2020
• react-testing-library 를 사용하여 TDD 개발 흐름으로 투두리스트 만들기 (https://velog.io/@velopert/tdd-with-react-testing-library)