[사전과제] 프리온보딩 프론트엔드 챌린지

[DawonOh]

유닛테스트 vs 통합테스트 vs E2E테스트

유닛테스트

• 컴퓨터 프로그래밍에서 소스 코드의 특정 모듈이 의도된 대로 정확히 작동하는지 검증하는 절차
• 언제라도 코드 변경으로 인해 문제가 발생할 경우, 단시간 내에 이를 파악하고 바로 잡을 수 있도록 한다.
• 클래스 또는 메소드 단위 등 최소한의 작은 단위를 테스트한다.

  통합테스트

• 단위 테스트가 끝난 모듈을 통합하는 과정에서 발생할 수 있는 오류를 찾는 테스트
• 외부 환경을 포함하여 테스트를 진행한다.

  E2E테스트

• End To End 테스트의 약자
• 애플리케이션의 흐름을 처음부터 끝까지 테스트한다.
• 실제 사용자의 시나리오를 테스트하며, 이를 통해 애플리케이션의 무결성을 증명할 수 있다.
• 테스트 과정이 길고 다양하다.

리액트 테스트에 사용되는 도구들

Jest

• 페이스북에서 개발한 자바스크립트 테스트 프레임워크
• zero config로 따로 설정이 필요없다는 큰 장점이 있다.
• Babel, TypeScript, Node.js, React, Angular, Vue.js, Svelte등에서 사용 가능하다.
• CRA로 프로젝트 생성 시 기본으로 포함되어있다.

  react-testing-library

• DOM 테스팅 라이브러리
• 가상 돔(Veitual DOM)을 제공하여 테스트할 수 있게 한다.
• CRA로 프로젝트 생성 시 기본으로 포함되어있다.

최적화

CDN(Content Distributed Network)

• 콘텐츠를 효율적으로 전달하기 위해 여러 노드를 가진 네트워크에 데이터를 저장하여 제공하는 시스템
• 데이터 사용량이 많은 애플리케이션의 웹 페이지 로드 속도를 높이는 상호 연결된 서버 네트워크

  Web Vitals

• 웹에서 우수한 사용자 경험을 제공하는 데 필수적인 품질 신호에 대한 통합 지침을 제공한다.

  Lighthouse

• 구글에서 개발한, 웹 페이지의 품질을 개선할 수 있는 오픈 소스 형태의 자동화 도구