테스트
1️⃣ 유닛테스트 vs 통합테스트 vs E2E 테스트를 비교하여 설명해주세요
- 유닛 테스트(Unit Test)
유닛 테스트는 전체 코드 중 **작은 부분**을 실행하여 예상대로 동작하는지 확인하는 테스트이다.
일반적으로 클래스 또는 메소드 수준으로 정해지고 단위의 크기가 작을수록 단위의 복잡성이 낮아진다. 또한 단위 테스트는 TDD와 함께 할 때 특히 더 강력해진다.- 통합 테스트(Integration Test) 위 테스트보다 더 큰 동작을 달성하기 위해 여러 모듈들을 모아 이들이 의도대로 협력하는지 확인하는 테스트이다. 통합 테스트는 단위 테스트와 달리 개발자가 변경할 수 없는 부분(ex. 외부 라이브러리)까지 묶어 검증할 때 사용한다. 통합 테스트의 장점은 단위 테스트에서 발견하기 어려운 버그를 찾을 수 있다는 점이다. 단점은 단위 테스트보다 더 많은 코드를 테스트하기 때문에 신뢰성이 떨어질 수 있다는 점과 어디서 에러가 발생했는지 확인하기 쉽지 않아 유지보수하기 힘들다는 점도 있다.
- E2E 테스트(End-to-End Test) 애플리케이션의 흐름을 처음부터 끝까지 테스트하는 것을 의미합니다. 유닛 테스트나 통합 테스트는 모듈의 무결성을 증명할 수 있는 강력한 테스트이지만, 모듈의 무결성이 애플리케이션 동작의 무결성까지는 증명해 줄 수 없습니다. 그래서 E2E 테스트 과정에서는 실제 사용자의 시나리오를 테스트함으로써 애플리케이션 동작을 테스트하게 되고, 이 테스트를 통과함으로써 애플리케이션의 무결성을 증명할 수 있게 됩니다.
2️⃣ 리액트 테스트에 사용되는 도구들을 비교하여 설명해주세요
- Jest
주로 유닛테스트 작성하는데 사용
자체적으로 모의 객체(Mock)와 스파이(Spy)를 지원하여 테스트 케이스를 작성하기 쉽게 도와줌
실행 속도가 빠르며 Snapshot 테스트를 통해 컴포넌트 렌더링 결과를 쉽게 확인할 수 있음- React Testing Library 사용자 중심 테스팅에 초점을 맞춘 라이브러리 컴포넌트의 실제 렌더링 결과를 테스트하여 사용자가 상호작용하는 것과 유사한 방식 DOM 요소의 선택과 상호작용을 도와주는 간편한 API를 제공
- Enzyme 주로 유닛 및 통합 테스트에 사용 컴포넌트의 내부 상태와 메서드에 접근하고 테스트하는 데 유용 shallow, mount, render와 같은 메서드를 제공하여 컴포넌트를 다양한 방식으로 렌더링하고 테스트 가능
- Cypress 빠르고 신뢰성이 높은 E2E 테스트를 위해 많이 사용 실제 브라우저에서 애플리케이션을 실행하고, 사용자 시나리오를 자동으로 시뮬레이션하여 테스트
최적화
1️⃣ CDN(Content Distributed Network)에 대해 설명해주세요
사용자에게 웹 콘텐츠를 효율적으로 제공할 수 있는 서버의 분산 네트워크입니다. CDN은 최종 사용자와 가까운 POP(point-of-presence) 위치의 에지 서버에 캐시된 콘텐츠를 저장하여 대기 시간을 최소화합니다.
2️⃣ Web Vitals에 대해 설명해주세요
Web Vitals는 웹 페이지의 사용자 경험을 측정하기 위한 지표들의 모음이다. 이는 웹 페이지의 성능과 사용자의 경험을 평가하는데 사용되며, Google 검색 등에서 웹 페이지의 랭킹과 검색 결과에도 영향을 미치는 지표로 활용된다.
사용자의 경험을 측정하기 위한 웹 성능 지표 모음으로 LCP, FID, CLS 이렇게 세가지 주요 지표로 구성됨
사용자 중심의 성능 측정을 제공하여 웹 사이트의 성능을 개선하는 데 도움을 주고, 구글 검색 알고리즘에서도 웹 페이지의 랭킹에 영향을 미칠 수 있는 중요한 요소가 되기도 함
- LCP(Largest Contentful Paint) 사용자가 URL을 요청한 시점부터 페이지 내에서 시각적으로 가장 큰 콘텐츠를 그리는데에 걸리는 시간 좋은 LCP란 페이지가 빠르게 로드되고 사용자에게 빠른 시간 내에 유용한 콘텐츠를 제공한다는 것을 의미
- FID(First Input Delay) 웹페이지가 사용자의 동작(링크 클릭 등)에 반응할 때까지 걸리는 시간 짧은 FIP란 웹페이지와 사용자의 상호작용이 더 빠르게 이루어지며, 사용자의 대기 시간을 최소화한다는 것을 의미
- CLS(Cumulative Layout Shift) 페이지의 요소들이 로드되는 동안 이동하거나 크기가 변경되는것을 막는 등 페이지의 로드 중에 에리아웃이 얼마나 안정적으로 유지되는지를 측정 낮은 CLS란 사용자와 콘텐츠가 상호작용하는 동안 예기치 않은 레이아웃 변화로 인한 혼란을 최소화한다는 것을 의미
3️⃣ Lighthouse에 대해 설명해주세요
Lighthouse는 Google에서 개발한 오픈소스 도구로, 웹 페이지의 성능, 접근성, 최적화 상태를 평가하는 데 사용된다. Web Vitals을 비롯한 다양한 성능 지표를 측정하고, 웹 페이지의 개선점을 찾아주는 강력한 도구이다. 브라우저 개발자 도구의 일부로 내장되어 있어 사용이 간편하다.
