[원티드 챌린지] 리액트 테스트와 최적화

이 글은 원티드 프리온보딩 8월 챌린지(리액트 리팩토링 실전가이드: 테스트부터 최적화까지) 사전과제를 하며 공부한 것을 정리한 글입니다.

잘못된 부분이 있으면 언제든지 댓글 등으로 알려주세요.

1. 테스트

 

테스트 코드의 중요성

- 개발 과정에서 미리 문제를 발견하고 수정할 수 있다.

- 코드 변경시 변경 부분으로 인한 영향도 파악이 쉽다.

- 리팩토링을 안심하고 할 수 있다.

 

 

유닛테스트 vs. 통합테스트 vs. E2E테스트 비교

 

유닛테스트

• 가장 작은 단위 테스트 (각 컴포넌트 및 기능 단위의 동작 검증)
• 소스코드의 특정 모듈이 의도된 대로 정확히 작동하는지 검증하는 절차
• 모든 함수와 메소드에 대한 테스트 케이스를 작성하는 절차
• 단시간내에 문제 파악 및 수정 가능 (쉽고 빠름)

통합테스트

• 단위 테스트가 끝난 소프트웨어를 결합해 가며 시험하는 방법
• 두개 이상의 서로 다른 모듈 또는 클래스간 상호작용 검증
• 모듈 간 인터페이스 및 데이터 흐름에 대한 검증

E2E 테스트

• End to End 테스트
• 애플리케이션의 흐름을 처음부터 끝까지 테스트하는 것
• 애플리케이션 동작의 무결성을 증명하기 위한 테스트
• 실제 사용자 시나리오를 테스트함 (사용자 입장에서 테스트)
• 과정이 길고 다양하며, 속도가 느림

 

비교 테이블

	유닛테스트(Unit)	통합테스트(Integration)	E2E 테스트(End to End)
테스트 단위	가장 작은 단위(각 컴포넌트 및 기능 또는 메소드 단위)	두개 이상의 서로 다른 모듈 또는 클래스	애플리케이션
목적	기능 작동 검증	모듈간의 상호작용/호환성/데이터흐름 검증	애플리케이션 동작
속도	빠름	중간	매우 느림
무결성 증명	모듈의 무결성		애플리케이션 동작의 무결성
툴	Jasmine, Jest, Karma, Mocha	Jest, Testing Library	Cypress, Playwright, TestCafe

 

단계별 테스트 비중과 비용

- 테스트 비용에 따라 비중을 조절해야 한다.

Test Pyramid (출처: https://betterprogramming.pub/the-test-pyramid-80d77535573)

 

리액트 테스트 도구 비교

1. 테스트 러너 (테스트 직접 실행해주는 주체)

 : Jest, Mocha, Jasmine, AVA

	Jest	Mocha
설계	React를 위해 설계됨 (Facebook에서 지원, TypeScript, NodeJS, Angular, VueJS 모두 지원)	NodeJS를 위해 설계됨
주안점	단순함	많은 프로세스를 유연하게 테스트 하는 것
독립성	독립적 사용 가능	다른 라이브러리 필요
기타	쉬운 설치와 사용 문서화 잘 되어 있음 빠른 성능 테스트 자동화 프레임워크 비동기 코드 테스트 지원 snapshot test 지원	다른 라이브러리와의 구성이 자유로움 비동기 코드 테스트 지원 서버와 브라우저 모두 테스트 가능

2. 테스트 도구 모음 (테스트를 위한 도구 제공)

 : React-Testing-Library, Enzyme

	React-Testing-Library	Enzyme
주안점	'어떻게 보여지는가?' 사용자 관점에서의 테스트 도구 제공 (렌더링 결과에 더 집중)	'어떻게 구현되어 졌는가?' 사용자는 물론 개발자 관점에서 테스트 도구까지 제공 (내부 기능에 접근, props, state 확인등)
적합한 테스트	통합테스트에 적합	단위테스트에 적합
얕은 렌더링 (자식 포함하지 않음)	다른 라이브러리 필요(react-test-renderer 또는 jest)	지원

- React 공식 문서의 추천 : Jest + React-Testing-Library

 

 

2. 최적화

CDN(Content Distributed Network)

CDN이란?

• 콘텐츠 전송 네트워크
• 콘텐츠의 효율적인 전송을 위해, 여러 노드를 가진 네트워크에 데이터를 저장하여 제공하는 시스템
• 데이터 사용량이 많은 애플리케이션의 웹페이지 로드 속도를 높이는 상호 연결된 서버 네트워크
• 최종 사용자와 가까운 곳에 콘텐츠를 캐시하는 지리적으로 분산된 서버 그룹

목적 및 효과

• 콘텐츠 전달시 높은 사용성과 효율로 전달할 수 있도록 함
• 웹사이트 로드 시간 개선
• 대역폭 비용 절감
• 콘텐츠 가용성 및 이중화
• 웹사이트 보안 개선 가능

Web Vitals

 

Web Vitals

• 웹에서 우수한 사용자 경험을 제공하는데 필수적인 품질 신호에 대한 통합 지침을 제공하기 위한 구글의 이니셔티브

Core Web Vitals

• 모든 웹페이지에 적용되는 Web vitals의 하위 집합 (모든 웹 경험에서 중요한 공통 집합)
• 로딩 경험, 상호 작용, 페이지 콘텐츠의 시작적 안정성이 포함됨
• 항목 (2023년 기준)
  • LCP: 인식되는 로드 속도를 측정, 페이지의 주요 콘텐츠가 로드되었을 가능성이 높은 시점에 페이지 로드 타임라인에 점을 표시
  • FID: 응답성을 측정, 사용자가 페이지와 처음 상호 작용하려고 할 때 느끼는 경험을 정량화
  • CLS: 시각적 안정성을 측정하는 항목, 눈에 보이는 페이지 콘텐츠의 예기치 않은 레이아웃 변화량을 정량화 

• 측정 도구: Chrome UX Report, PageSpeed Insights, Search Console(Core Web Vitals Report), web-vitals JavaScript 라이브러리 등, Web Vitals Chrome Extension, Chrome DevTools(FID 대신 TBT 측정), Lighthouse(FID 대신 TBT 측정)

최적화 방법

(*일단 여기서는 방법들을 나열만 하고 추후 자세히 살펴보도록 하겠다)

• LCP 최적화
  • 느린 서버 응답 시간 개선 하기: 서버 최적화, 사용자를 가까운 CDN으로 라우팅, 자산 캐시, HTML 페이지 캐시 우선 제공, 조기에 타사 연결 구축, 서명된 교환 사용 등
  • 렌더링 차단 JavaScript 및 CSS 개선하기: 파일 축소 및 압축, 중요하지 않은 JS/CSS 지연, 중요 CSS 즉시 처리 등, 사용하지 않는 Polyfills 최소화 등
  • 느린 리소스 로드 시간 개선하기 :  이미지 최적화 및 압축, 중요한 리소스 미리 로드, 텍스트 파일 압축, 네트워크 연결을 기반으로 로 다양한 자산 제공, 서비스 작업자를 사용하여 자산 캐시 등
  • 클라이언트 측 렌더링 개선하기: 중요 JS 최소화, 서버측 렌더링 사용, 사전 렌더링 사용 등
• FID 최적화
  • 과도한 JavaScript 실행 개선: 긴 작업 세분화, 상호 작용 준비를 위해 페이지 최적화, 웹 작업자 사용, JavaScript 시간 단축
• CLS 최적화
  • 크기가 정해지지 않은 이미지 사용시: 이미지 및 비디오 요소에 크기 속성 포함시키기, 필요 공간 확보해두기 등
  • 크기가 정해지지 않은 광고, 임베드 및 iframe 사용시: 필요한 고정 공간 확보해두기, 충분한 공간 미리 계산 해두고 사용하기 등
  • 동적 콘텐츠 사용시: 사용자 상호 작용에 대한 응답을 제외하고는 기존 콘텐츠 위에 콘텐츠를 삽입하는 것을 피하기
  • FOIT/FOUT을 유발하는 웹 글꼴 사용시: font-display 사용, Font Loading API 사용, 핵심 웹 글꼴에 <link rel=preload> 사용등
  • 애니메이션 사용시: 레이아웃 이동을 유발하는 속성의 애니메이션보다 transform 애니메이션 사용 등

 

Lighthouse

- 구글에서 제공하는 오픈소스로 웹페이지 품질 개선을 위한 자동화된 웹사이트 감사 도구

- 사용방법: 크롬 개발자 도구, Node command line 에서 사용 가능

- 모든 웹페이지에 대해 사용할 수 있음

- 성능, 접근성, progressive web apps, SEO 등에 대한 검사 가능

- 검사 후 문제와 개선 방안도 제공

 

 

 

 

---

References

1) https://www.wanted.co.kr/events/pre_challenge_design_3?utm_source=wanted&utm_medium=share

2) https://fe-developers.kakaoent.com/2023/230209-e2e/

3) https://medium.com/delivus/e2e-%ED%85%8C%EC%8A%A4%ED%8A%B8-%EA%B5%AC%EC%B6%95%EA%B8%B0-used-aws-step-functions-2fccb930218c

4) https://blog.hwahae.co.kr/all/tech/tech-tech/6274

5) https://soojae.tistory.com/74 

6) https://gatsbybosungblogmain.gatsbyjs.io/tdd1/

7) https://espeo.eu/blog/front-end-testing-frameworks-2022/

8) https://aws.amazon.com/ko/what-is/cdn/

9) https://www.cloudflare.com/ko-kr/learning/cdn/what-is-a-cdn/

10) https://developers-kr.googleblog.com/2020/05/Introducing-Web-Vitals.html 

11) https://web.dev/vitals/

12) https://developer.chrome.com/docs/lighthouse/overview/