[TIL] 0630

easing 효과가 적용된 숫자 증가 애니메이션 구현하기

기존 방법으로 easing방정식을 사용하는데에 한계를 느꼈다.
직접 방정식을 이해해서 커스텀해야하는데 너무 수학적이라서 이해가 안갔다.
그래서 0부터 목표 숫자까지 증가하는 범위가 점점 작아지도록 해서 숫자가 변하는 속도가 점점 감소되어 보이도록 방향을 바꿨더니 잘 동작했다. 이제 숫자가 변하지 않았을 때에는 돔조작이 일어나지 않도록 해주고, 간결하게 사용할 수 있도록 추상화를 해주는 작업들을 하려한다.

---

TDD와 프론트엔드 테스트

모던 프론트엔드 테스트 전략
드림 코딩 엘리 - 테스트와 TDD

테스트란?

소프트웨어가 원하는 대로 동작하는 지 확인하는 것.
확인하는 요소는 함수, 특정 기능, ui, 성능, api스펙 등등이 있다.

목적

• 소프트웨어 품질 확인
• 버그 찾기

효과

• 실제 변경 시에 테스트 코드를 이용해 이전 답과 같은지 비교해볼 수 있으므로 안전하게 리팩토링할 수 있다.
• 실제 서비스가 오류 없이 안전하게 작동할 수 있다.

하는 방법

• 테스트하려는 기능이나 모듈과 예상하는 결과를 테스트 파일에 등록한다.
• 테스트 파일이 실행되면 해당 모듈이 실행되고, 등록해놓은 결과와 같을 시 통과, 다를 시 실패하게 된다.

종류

• Static Test: 타입이나 래퍼런스 문법 오류를 체크
• Unit Test: 모듈 단위의 테스트
• Integration test: 2개 이상의 모듈이 연결된 상태를 테스트
• E2E Test: 실제 서비스 환경에서 테스트 (프론트엔드는 브라우저)

프론트엔드의 테스트 종류와 방법

테스트 대상

1. 시각적 요소

   • 스냅샷 테스트: html 확인 -> jest이용.
   • 시각적 회귀 테스트: html+css확인 -> storybook이용.

2. 사용자 이벤트 처리

   • js API나 React 라이브러리에서 제공하는 테스트 유틸리티 이용.
   • 실제 브라우저 이용.

3. API 통신

   • API client를 모킹 -> jest이용.
   • 테스트 API 서버 구축.
   • 실제 API 서버 이용.

테스트 환경
실제 브라우저가 필요한 상황이 아니면 되도록 node js환경을 권장.

1. 브라우저 환경.
   • 모든 web API 사용 가능, 브라우저 호환성 테스트 가능.
   • 속도 느림.
   • Testcafe툴 사용.
2. node js환경.
   • 속도 빠름.
   • 모든 web API 사용 불가능 -> jest로 가상 돔 이용할 수 있음.
   • Jest, Testing library사용.

Jest란?
자바스크립트 테스팅 프레임워크로 테스트에 필요한 구성 요소들을 하나로 통합된 형태로 제공함.

• 테스트 러너
• 테스트에 필요한 유틸리티 함수를 제공해주는 테스트 프레임워크
• assertion 라이브러리
• 모의 객체를 만드는 데 사용하는 테스트 더블 라이브러리

Testing library란?
UI를 사용자 관점에서 테스트할 수 있도록 도와주는 라이브러리

TDD란?

기존 방식으로 개발을 마친 후 테스트 코드를 짜는 것이 아닌,
테스트를 먼저 만들고 테스트를 통과하기 위한 것을 짜는 것.

Point

• 실패하는 테스트 코드를 작성할 때까지 실제 코드를 작성하지 않는 것.
• 실패하는 테스트를 통과할 정도의 최소 실제 코드를 작성하는 것.

효과

• 실제 코드에 대해 기대되는 바를 보다 명확하게 정의 함으로써 불필요한 설계를 피할 수 있다.
• 정확한 요구 사항에 집중할 수 있다.
• 구현보다 인터페이스에 집중할 수 있으므로 사용자 입장에서 코드를 작성할 수 있게 된다.

기능의 인터페이스와 결과를 미리 정해두고 그에 맞게 구현하는 것.
커밋 시 커밋 메세지를 먼저 적어두고 코딩하는 이유와 비슷한 것 같다.