목차
- 테스트
- 단위테스트 vs 통합테스트 vs E2E테스트를 비교하여 설명해주세요
- 리액트 테스트에 사용되는 도구들을 비교하여 설명해주세요
- 최적화
- CDN(Content Distributed Network)에 대해 설명해주세요
- Web Vitals에 대해 설명해주세요
- Lighthouse에 대해 설명해주세요
테스트
1. 단위테스트 vs 통합테스트 vs E2E테스트를 비교하여 설명해주세요
- 단위테스트
- 작은 단위를 떼어내어 분리된 환경에서 테스트
- 복잡한 알고리즘이 제대로 동작하는지 확인
- Mocking 필요(의존성이 있는 모듈을 제어하기 위해 사용)
- 작성 비용 낮음 / 실행 속도 빠름
- 작은 단위의 리팩토링에도 쉽게 깨질 수 있음
- ex. Jest
- 통합테스트
- 어플리케이션의 여러 부분들이 통합되어 제대로 상호작용되는지 테스트
- 주로 단위테스트보다 큰 범위의 테스트
- 앱의 모든 기능이 제대로 동작한다는 확신을 줄 수 있음
- 단일 모듈이 복잡한 알고리즘을 갖고 있을 때 단위테스트에 비해 테스트가 번거롭고 테스트 중복이 발생할 확률이 높음
- ex. Jest, RTL, Enzyme
- E2E테스트(End to End)
- 실제 사용자가 사용하는 것과 같은 조건에서 전체 시스템을 테스트
- API 서버, DB 등의 외부 서비스들을 모두 사용하여 통합된 시스템을 테스트
- 작성 비용 높음 / 실행 속도 느림
- 테스트 실행 환경의 예상치 못한 문제(네트워크 문제, 프로세스 대기로 인한 타임아웃 등)로 인해 테스트가 가끔 실패하는 일이 발생
- ex. Cypress, Selenium
| 단위테스트 | 통합테스트 | E2E테스트 |
|---|---|---|
| 개발자 관점 | 개발자 관점 | 실제 사용자 관점 |
| 작은 단위를 떼어내어 분리된 환경에서 테스트 | 2개 이상의 모듈이 실제로 연결된 상태를 테스트 | 실제 상활에서의 테스트 |
| 작성 비용 1 / 실행속도 3 | 작성 비용 2 / 실행속도 2 | 작성 비용 3 / 실행속도 1 |
* 느림/낮음(1) - 빠름/높음(3)
2. 리액트 테스트에 사용되는 도구들을 비교하여 설명해주세요
단위 테스트나 통합 테스트를 위한 도구
- 테스트 러너 : 테스트를 구동할 수 있는 환경을 제공
- 테스트 파일을 읽어들여 작성한 코드를 실행하고 그 결과를 특정한 형식으로 출력
- Node.js 기반의 테스트 러너들은 굳이 러너의 실행 환경과 코드의 실행 환경을 구분할 필요가 없기 때문에 대부분 테스트 프레임워크와 통합된 형태로 제공
- ex. Karma(브라우저에서 직접 코드 실행), Jest(Node.js 환경에서 코드를 실행)
- 테스트 프레임워크 : 테스트 코드 작성을 위한 기반을 제공해주는 자바스크립트 도구
- 프레임워크가 제공하는 함수들을 사용해서 테스트 코드를 작성하면, 프레임워크가 테스트 코드를 자동으로 실행한 후 성공 및 실패에 대한 결과를 반환
- ex. Mocha, Jasmine, AVA, Jest
- 테스트 러너 : 테스트를 구동할 수 있는 환경을 제공
E2E 테스트 도구
- 작성이 번거롭고 실행 속도가 느리며 통제된 환경에서 테스트를 할 수 없다는 단점 때문에 개발자들이 개발 과정에 사용하기에는 어려움
- ex. Selenium Webdriver, Cypress, TeskCafe
리액트 테스트 도구
- Jest : JS 테스트 러너
- DOM에 접근하게 하는 jsdom을 통해서 jsdom은 단지 어떻게 브라우저가 작동하는지에 대한 대략적 개요
- mocking modules과 timers 같은 파워풀한 특징과 결합되어 훌륭한 반복속도를 제공
- React Testing Library : 실행 디테일을 가지지 않는 React 컴포넌트를 테스트하게 하는 도구 모음
- 리팩토링을 수월하게 하며 접근성에 대한 가장 좋은 테스트를 가능하게 함
- Jest : JS 테스트 러너
최적화
1. CDN(Content Distributed Network)에 대해 설명해주세요
- 데이터 사용량이 많은 애플리케이션의 웹 페이지 로드 속도를 높이는 상호 연결된 서버 네트워크
- 클라이언트와 웹 사이트 서버 간에 중간 서버를 두어 효율성을 높임
- 웹 서버에 대한 웹 트래픽을 줄이고, 대역폭 소비를 줄이며, 애플리케이션의 사용자 환경을 개선
- 장점
- 페이지 로드 시간 단축 : 반송률을 줄이고 사용자가 사이트에서 보내는 시간을 늘릴 수 있음
- 대역폭 비용 절감 : 캐싱 및 기타 최적화를 통해 CDN은 오리진 서버가 제공해야 하는 데이터의 양을 줄여 웹 사이트 소유자의 호스팅 비용을 절감
- 콘텐츠 가용성 제고 : 하나 이상의 CDN 서버가 오프라인으로 전환되면 다른 운영 서버가 해당 서버를 대체하여 서비스가 중단되지 않도록 할 수 있음
- 웹 사이트 보안 강화 : 여러 중간 서버 간에 로드를 분산하여 오리진 서버에 미치는 영향을 줄임으로써 이러한 트래픽 급증을 처리할 수 있음
- 작동 방식
- 캐싱 : 더 빠른 데이터 액세스를 위해 동일한 데이터의 여러 복사본을 저장하는 프로세스
- 동적 가속 : 애플리케이션과 클라이어언트 사이의 CDN 서버로 인해 발생하는 서버 응답시간을 단축
- 엣지 로직 계산 : 클라이언트와 서버 간의 통신을 단순화하는 논리적 계산을 수행하도록 CDN 에지 서버를 프로그래밍할 수 있음
2. Web Vitals에 대해 설명해주세요
- Web Vitals : 웹에서 훌륭한 사용자 경험을 제공하는 데 필수라고 생각하는 품질 지표에 대한 통합적 지침을 제시
- Core Web Vitals : 모든 웹 경험에서 중요한 공통 집합
- 핵심 사용자 경험 요구사항에는 로딩 경험, 상호 작용, 페이지 콘텐츠의 시각적 안정성이 포함
- LCP(Largest Contentful Paint, 최대 콘텐츠풀 페인트): 로딩 성능을 측정
- 페이지의 주요 콘텐츠가 로드외었을 가능성이 높은 시점에 페이지 로드 타임라인에 점을 표시
- 페이지가 처음으로 로딩된 후 LCP가 발생 시간 <= 2.5s
- FID(First Input Delay, 최초 입력 지연): 상호 작용을 측정
- 사용자가 페이지와 처음 상호작용하려고 할 때 느끼는 경험을 정량화함
- FID <= 100ms
- CLS(Cumulative Layout Shift, 누적 레이아웃 시프트): 시각적 안정성을 측정
- 눈에 보이는 페이지 콘텐츠의 예기치 않은 레이아웃 변화량을 정량화함
- CLS <= 0.1 유지
3. Lighthouse에 대해 설명해주세요
Lighthouse : 개발자가 사이트의 사용자 경험을 개선할 수 있는 기회와 진단을 제공하는 자동화된 웹사이트 감사 도구
Metric 설명 가중치 First Contentful Paint 최초 콘텐츠가 포함된 페인트
사용자가 페이지를 탐색한 후 브라우저가 DOM콘텐츠의 첫 번째 부분을 렌더링하는 데 걸리는 시간을 측정10% Speed Index 속도 지수
콘텐츠가 시각적으로 표시되는 속도를 측정10% Largest Contentful Paint 가장 큰 콘텐츠가 포함된 페인트
가장 큰 콘텐츠를 렌더링 하는데 걸리는시간25% Time to interactive 상호 작용까지의 시간
사용자가 페이지와 완전하게 상호작용할 수 있을 때까지걸리는 시간10% Total Blocking Time 총 차단 시간
마우스 클릭, 화면 탭 또는 키보드 누름과 같은 사용자 입력에페이지가 응답하지 못하도록 차단된 총 시간30% Cumulative Layout Shift 누적 레이아웃 이동
사용자가 예상치 못한 레이아웃 이동을 경험하는 것에 대한 점수15% * 성능 점수 : 메트릭 점수의 가중치 평균
가중치가 더 높은 메트릭이 전체 성능 점수에 더 큰 영향을 미침메트릭 점수와 성능점수는 다음 범위에 따라 색상이 지정됨
- 0~49(빨간색): 나쁨
- 50~89(주황색): 개선 필요
- 90~100(녹색): 양호
출처
테스트
[10분 테크톡]도비의 프론트엔드에서의 테스트 종류
테스트
테스팅 개요
최적화
CDN이란 무엇입니까?
Web Vitals
Web Vitals 소개: 건강한 사이트를 위한 필수적인 측정항목
Lighthouse 6.0의 새로운 기능
Lighthouse 성능 점수
23.07.29 원티드 프리온보딩 챌린지 이후 내용 추가 예정