---

원티드 프리온보딩 프론트엔드 챌린지 8월 사전 과제

---

테스트

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

유닛 테스트(Unit testing)

하나의 모듈 / 컴포넌트가 기대한대로 동작하는지 독립적으로 진행하는 가장 작은 단위의 테스트입니다.

해당하는 모듈만 독립적으로 테스트하기 때문에 빠르게 문제 여부를 확인할 수 있고, 테스트에 대한 시간과 비용을 절약할 수 있습니다. TDD(Test-Driven Development, 테스트 주도 개발)에서 다루는 테스트도 일반적으로 단위 테스트를 이야기합니다.

좋은 단위 테스트를 작성하기 위한 규칙 ‘FIRST’

1. Fast: 테스트는 빠르게 동작해야 한다. 단위 테스트는 대상 시스템에 대해 지속적이고 빠르게 피드백을 주는데 가치가 있기 때문에 빠르게 동작해야 한다.
2. Independent: 각각의 테스트는 독립적으로 수행되어야 하며 서로 의존해서는 안된다. 즉 단위 기능에 집중해서 작성하고 하나의 테스트는 하나의 기능만 테스트하도록 작성한다.
3. Repeatable: 테스트는 반복적으로 수행해도 결과가 같아야 한다.
4. Self-Validating: 테스트는 스스로 검증 가능하며 성공 또는 실패로 결과를 단언할 수 있어야 한다. 테스트 결과를 수동으로 검증하지 않는다.
5. Timely: 테스트는 적시에 작성해야 한다. 즉, 테스트하려는 실제 코드를 구현하기 직전에 구현해야 한다.

TDD(Test-Driven Development) 법칙 세가지

• 실패하는 단위 테스트를 작성할 때까지 실제 코드를 작성하지 않는다.
• 컴파일은 실패하지 않으면서 실행이 실패하는 정도로만 단위테스트를 작성한다.
• 현재 실패하는 테스트를 통과할 정도로만 실제 코드를 작성한다.

통합 테스트(Integration testing)

통합 테스트는 단위 테스트가 끝난 두 개 이상의 모듈을 통합하는 과정에서 발생할 수 있는 오류를 확인하고 호환성을 확인하는 테스트입니다. 통합 테스트는 단위 테스트와 달리 데이터베이스, 서드파티 API를 직접 호출하여 올바르게 동작하는지 여부를 확인합니다.

E2E 테스트(End-to-end testing)

실제 사용자가 이용하는 환경과 최대한 유사하게 만들어 사용자의 경험을 전반적으로 테스트합니다. 사용자 시나리오를 시뮬레이션하며 사용자의 요구 사항을 충족하는지 모든 구성 요소와 해당 구성 요소의 상호 작용이 제대로 이루어지고 있는지, 시스템이 예상대로 작동하고 있는지 확인합니다.

테스트 도구

Cypress

Cypress는 자바스크립트를 기반으로 하며, 사용자 상호작용에 중점을 둔 E2E 테스트 프레임워크입니다. 브라우저와 통합된 형태의 구조를 사용하여 빠른 속도를 보장하고, 단위 테스트와 통합 테스트까지도 사용이 가능합니다. GUI 인터페이스를 제공하고 각 실행을 스냅샷으로 기록하여 디버깅이 쉽다는 장점이 있습니다.

RTL(React Testing Library) + Jest

RTL(React Testing Library)은 React 컴포넌트들을 테스팅하기 위해 필요한 유틸리티 함수를 제공하는 라이브러리로, DOM 노드를 찾거나 테스트를 위한 가상 DOM을 생성하고, DOM 노드와 상호작용 하는 데에 사용됩니다.

Jest는 프론트엔드 어플리케이션을 쉽게 테스팅 할 수 있도록 다양한 인터페이스를 제공하는 JavaScript용 테스팅 프레임워크입니다. 테스트 케이스 단위마다 단독적으로 동작하며, 병렬적으로 실행될 수 있습니다.

별도의 설정 없이 빠르게 테스트 가능하며, 테스트에 관한 광범위한 기능을 지원합니다(테스트 러너, 코드 커버리지 확인, 스냅샷 테스트, 목(Mock)함수 제공 등)

최적화

CDN(Content Distributed/Delivery Network)

CDN은 물리적 거리에 상관없이 사용자에게 웹페이지나 이미지, 동영상 등의 컨텐츠를 서버에서 지연없이 사용자에게 전송하는 것을 목적으로 하는 서버, 혹은 서버 간의 네트워크를 말합니다.

서버를 분산시켜 캐싱해두고 사용자의 컨텐츠 요청이 들어오면 CDN은 클라이언트에게 가장 빠르게 서비스를 제공할 수 있는 엣지를 선택해서 매핑, 캐싱된 콘텐츠를 전송하는 방식으로 지연 시간을 줄이는 방법을 사용합니다.

오리진 서버에서 캐시하는 방법은 정적 캐싱과 동적 캐싱 2가지 방식이 있습니다.

• 정적 캐싱(Static Caching) - 캐싱할 컨텐츠를 미리 CDN 엣지 서버에 전송
• 동적 캐싱(Dynamic Caching) - 클라이언트 요청 시에 보낼 컨텐츠가 엣지에 있다면(cache hit) 바로 클라이언트에게 전송하고 없다면 오리진 서버에 요청해서 다운로드한다.

CDN의 장점

1. 오리진 서버가 제공하는 데이터의 양을 줄여 오리진 서버의 대역폭 비용을 절감하고 빠르게 컨텐츠를 제공할 수 있습니다.
   ❗️대역폭(Network Bandwitdh)이란? 주어진 시간 안에 전송할 수 있는 데이터의 최대 전송량
2. 오리진 서버의 부하가 줄어들기 때문에 과부하로 인한 오류의 위험성이 줄어들고, 엣지 서버에 오류가 생겨도 다른 엣지 서버로 연결하여 서비스를 제공할 수 있기 때문에 가용성과 안정성이 향상됩니다.
3. CDN 서버가 정상적인 요청과 비정상적인 요청을 구분하거나 특정 시점의 요청 수를 제한하는 등 집중된 요청을 엣지 서버로 분산하는 등 DDoS 공격을 무력화시킬 방법을 제공합니다.

Web Vitals

Web Vitals는 웹에서 우수한 사용자 경험을 제공하는데 필수적인 품질 신호에 대한 통합 지침을 제공하기 위한 지침입니다. 웹 바이탈은 로딩 시간(loading performance), 상호작용(interactivity), 시각적 안정성(visual stability) 3가지 요소로 구성되어 있습니다.

구글이 자체적으로 진행했던 연구 결과에 따르면 코어 웹 바이탈 (Core Web Vitals)의 기준을 충족한 웹 페이지의 경우 방문자가 사이트에서 이탈할 가능성이 24% 낮다고 합니다.(https://support.google.com/webmasters/answer/9205520?hl=ko)

LCP(Largest Contentful Paint)

로딩 시간을 측정합니다. 사용자가 페이지에 접근했을 때 페이지 내에서 가장 큰 컨텐츠를 렌더링하는데 걸린 시간을 의미합니다(일반적으로는 이미지나 동영상). 우수한 사용자 경험을 제공하려면 페이지가 처음으로 로딩된 후 2.5초 이내에 LCP가 발생해야 합니다.

https://web.dev/lcp/

FID(First Input Delay)

상호 작용을 측정합니다. 사용자가 페이지의 링크를 클릭하거나 버튼을 클릭하는 등의 상호 작용을 시도했을 때부터 브라우저가 반응하는 시간을 의미합니다. 우수한 사용자 경험을 제공하려면 페이지의 FID가 100밀리초 이하여야 합니다.

https://web.dev/fid/

CLS(Cumulatice Layout Shift)

시각적 안정성을 측정합니다. 페이지 로드 중 발생하는 레이아웃의 변화로 사용자가 예기치 않은 동작을 수행하는지 감시하는 척도입니다. 우수한 사용자 경험을 측정하려면 페이지에서 0.1 이하의 CLS를 유지해야 합니다.

CLS를 개선하기 위해서는 이미지와 비디오에 항상 크기(width, height) 속성을 포함하거나 이미지 비율을 지정하고, 레이아웃에 변화를 주는 광고, FOUT/FOIT를 유발하는 웹폰트 사용을 지양해야 합니다.

https://web.dev/cls/
https://web.dev/optimize-cls/

Lighthouse

Lighthouse는 웹 사이트의 성능, 접근성, 모범 사례, SEO 및 프로그레시브 웹 앱(PWA) 기능을 측정하는 오픈소스 자동화 도구입니다.

Performance

웹 페이지의 로딩 속도에 대해 전반적인 평가를 합니다.

항목	설명	가중치
First Contentful Paint	페이지 로드가 시작된 이후 사용자에게 의미있는 최초 컨텐츠를 렌더링 하는데 걸리는 시간을 측정. iframe 요소는 측정되지 않습니다.	10%
Speed Index	뷰포트 내의 컨텐츠가 로드되는 속도를 측정합니다.	10%
Largest Contentful Paint	뷰포트의 컨텐츠 중 가장 큰 영역을 차지하는 이미지 혹은 텍스트 요소가 처음 로딩되는 시간을 측정합니다. img, svg>image, video, 텍스트 노드를 포함하는 블록 레벨 요소에 한해 측정합니다.	25%
Total Blocking Time	RAIL Model https://web.dev/rail/#response 에 따라 로딩에 50ms 이상이 걸리는 작업을 Long Task로 분류하고, 이 Long Task가 메인 스레드를 독점하여 클릭, 키보드 입력 등 사용자와 상호 측정하지 못했던 시간는 시간을 측정합니다.	30%
Cumulative Layout Shift	CLS는 사용자가 예상하지 못한 레이아웃을 경험하는 빈도를 정량화해서 측정합니다. 레이아웃의 변화로 사용자가 예기치 않은 동작을 수행하는지 감시하는 척도입니다.	25%

https://developer.chrome.com/docs/lighthouse/performance/performance-scoring/

Accessibility

이미지의 누락되거나 올바르지 않은 alt 속성을 사용했는지 확인하고 WAI-ARIA 사용성, 색상 대비 비율과 키보드 접근성 등 웹 페이지의 전반적인 접근성에 대해 평가합니다.

Best Practices

모든 JavaScript 라이브러리가 안전한지, 페이지에 사용되지 않는 프레임워크와 API가 없는지, HTTPS 사용하는 서버에서 리소스를 로드하고 있는지와 같은 웹 페이지가 웹 개발의 최신 표준을 제대로 따르고 있는지 확인합니다.

SEO(Search Engine Optimization)

웹 페이지의 검색 엔진 최적화를 진단합니다. 검색 엔진이 컨텐츠를 제대로 이해했는지(적절한 제목과 메타 태그 속성을 사용했는지, 링크에 대한 설명이 있는지), 검색 엔진이 페이지를 크롤링하고 인덱스를 만들 수 있는지 확인합니다.

Progressive Web App(PWA)

웹 페이지가 프로그레시브 웹 앱의 기준을 충족하는지 평가합니다. PWA는 브라우저와 사용자 인터페이스와 완전히 분리된 윈도우에서 열려야 하고, 오프라인으로도 작동할 수 있어야 합니다. 더 자세한 사항은 아래 링크를 확인하세요! https://web.dev/learn/pwa/progressive-web-apps/

---

Reference
https://mangkyu.tistory.com/143
https://velog.io/@sdb016/좋은-단위-테스트-FIRST에-대하여
https://github.com/ssi02014/react-test-reference-documentation

https://code-lab1.tistory.com/261
https://velog.io/@youngblue/CDN이란-무엇인가
https://www.alibabacloud.com/ko/knowledge/what-is-cdn

https://web.dev/vitals/
https://lucy-the-marketer.kr/ko/growth/what-is-core-web-vital/
https://www.ascentkorea.com/core-web-vitals/

https://www.semrush.com/blog/google-lighthouse/
https://velog.io/@dell_mond/Lighthouse-사용법#-lighthouse-결과-항목-분석
https://medium.com/jung-han/라이트하우스-성능-지표-살펴보기-83df3dc96fb9
https://velog.io/@w-hyacinth/Google-Lighthouse-SEO