시스템의 동작과 흐름을 검증하여 모든 구성 요소가 조화롭게 작동하여 의도한 기능을 사용자에게 제공하는지 확인
일반적으로 DB, API 및 외부 서비스를 포함하여 실제 서비스 환경과 거의 유사한 환경에서 실행
시스템의 기능, 사용자 경험 및 성능에 대한 포괄적인 평가 제공
완전히 통합된 환경에서만 발생하는 문제 식별에 도움
Cypress 또는 WebDriverIO와 같은 테스트 프레임워크 사용
2. 리액트 테스트에 사용되는 도구들을 비교하여 설명해주세요
Jest
단순성, 속도, 사용 편의성
스냅샷 테스트와 내장 모킹 기능이 있는 포괄적인 테스트 프레임워크
렌더링된 출력의 직렬화된 표현인 React 컴포넌트의 스냅샷 생성 가능
시간이 지남에 따라 의도하지 않은 UI 변경 사항을 감지하는 데 도움
모킹 함수 및 모듈에 대한 기본 지원을 제공, 테스트 중 컴포넌트 격리에 용이
코드 커버리지 보고서를 자동으로 생성하여 테스트에서 코드베이스가 얼마나 커버되는지 제공
React Testing Library
테스트 유틸리티 라이브러리
사용자와 상호 작용하는 방식의 관점에서 반응 구성 요소 테스트에 중점
사용자가 애플리케이션과 상호 작용하는 방법을 면밀하게 시뮬레이션하는 방식으로 테스트 구성 권장
-> 테스트를 더욱 강력하게 만들고 UI 변경에 대한 저항력을 높임
역할, 레이블, 텍스트 콘텐츠 등을 기반으로 렌더링된 출력에서 요소를 찾는 데 도움이 되는 쿼리 세트 제공
얕은 렌더링 지원 X, 실제 컴포넌트 동작을 테스트하기 위해 전체 렌더링을 권장
컴포넌트가 실제 시나리오에서 올바르게 작동하는지 확인하는 데 활용
Cypress
실제 환경에서 사용자 상호 작용 시뮬레이션 E2E 테스트 프레임워크
브라우저에서 직접 실행되며 보다 사용자 중심적이고 동기적인 방식으로 테스트를 작성 가능
테스트가 실행되는 동안 애플리케이션을 확인할 수 있는 고유한 실시간 테스트 러너를 제공하여 디버깅이 더 용이
요소가 나타날 때까지 자동으로 대기하므로 API 응답이나 애니메이션이 완료될 때까지 기다리는 등의 비동기 동작에 탄력적으로 대응
테스트 실행 중에 애플리케이션의 상태를 시간 여행할 수 있으므로 문제를 진단하는 데 도움
사용자 상호작용을 시뮬레이션하고 전체 애플리케이션의 흐름과 기능을 검증
최적화
1. CDN(Content Distributed Network)에 대해 설명해주세요
CDN : 전 세계에 있는 서버 네트워크
웹사이트에서 이미지, 스크립트 등의 콘텐츠를 가장 가까운 서버에 캐싱하여 제공
-> 웹사이트 이용자가 더 빠르게 콘텐츠를 로딩, 성능 개선
콘텐츠 전송을 최적화하고 온라인 위협에 대한 보안 기능 제공
2. Web Vitals에 대해 설명해주세요
Web Vitals(성능 보고서) : 웹사이트의 사용자 경험을 측정하기 위한 통합 지침과 메트릭을 제공하기 위한 Google의 이니셔티브.
웹 개발자와 사이트 소유자가 웹 사이트의 성능을 평가하고 개선하는 데 사용할 수 있는 일련의 필수 지표를 제공
Web Vital의 세 가지 핵심 메트릭
: 아래 세가지 메트릭을 기반으로 더 나은 사용자 경험을 제공하는 사이트는 검색 순위가 높아질 수 있으므로 Google의 검색 순위 알고리즘에서 중요한 역할
1) LCP(Largest Contentful Paint) : 웹 페이지의 로딩 성능 측정
페이지의 주요 콘텐츠가 사용자에게 표시되는 시점을 표시
2) FID(First Input Delay) : 웹 페이지의 응답성 평가
사용자가 페이지와 처음 상호작용한 시점부터 브라우저가 해당 상호작용에 응답하는 시점까지의 시간을 측정
3) CLS(Cumulative Layout Shift) : 웹 페이지의 시각적 안정성을 정량화
로드 프로세스 중에 페이지 레이아웃이 예기치 않게 이동하는 정도를 측정
3. Lighthouse에 대해 설명해주세요
Lighthouse : 웹 사이트 및 웹 애플리케이션의 성능, 접근성, 모범 사례, SEO 및 PWA(Progressive Web App) 기능을 감사하고 측정하는 데 사용되는 Google에서 개발한 오픈 소스 자동화 도구
일반적으로 웹 개발자, 웹마스터 및 사이트 소유자가 웹 페이지의 품질을 평가하고 최적화하는 데 사용
Lighthouse의 주요 기능
1) 성능 감사 : FCP(First Contentful Paint), LCP(Largest Contentful Paint), TTI(Time to Interactive) 등을 비롯한 다양한 성능 지표를 평가
페이지가 얼마나 빨리 로드되고 인터랙티브하게 되는지에 대한 인사이트를 제공하여 개발자가 성능 병목 현상을 파악하는 데 도움
2) 접근성 감사 : 색상 대비, 요소의 적절한 라벨링, ARIA(접근 가능한 리치 인터넷 애플리케이션) 속성의 존재 여부와 같은 접근성 문제를 확인
장애가 있는 사용자를 포함한 모든 사용자가 웹사이트를 사용할 수 있고 접근 가능한지 확인하는 데 도움
3) 모범 사례 감사 : 표준에 따라 웹사이트를 검사하여 코드를 개선할 수 있는 영역을 파악
전반적인 성능과 유지보수성을 향상시키기 위해 최신 웹 개발 관행을 채택하는 것에 대한 제안 제공
4) SEO 감사 : 메타 태그, 제목 설명 및 사이트의 검색 엔진 순위와 검색 가능성에 영향을 줄 수 있는 기타 요소를 포함하여 SEO 관련 측면을 확인
5) PWA(프로그레시브 웹 앱) 감사 : 앱이 빠른 응답성, 서비스 작업자 보유, 설치 가능 여부 등 PWA로 간주되는 데 필요한 기준을 충족하는지 평가
테스트
1. 유닛테스트 vs 통합테스트 vs E2E테스트를 비교하여 설명해주세요
유닛테스트
통합테스트
E2E테스트
2. 리액트 테스트에 사용되는 도구들을 비교하여 설명해주세요
Jest
React Testing Library
Cypress
최적화
1. CDN(Content Distributed Network)에 대해 설명해주세요
2. Web Vitals에 대해 설명해주세요
1) LCP(Largest Contentful Paint) : 웹 페이지의 로딩 성능 측정 페이지의 주요 콘텐츠가 사용자에게 표시되는 시점을 표시 2) FID(First Input Delay) : 웹 페이지의 응답성 평가 사용자가 페이지와 처음 상호작용한 시점부터 브라우저가 해당 상호작용에 응답하는 시점까지의 시간을 측정 3) CLS(Cumulative Layout Shift) : 웹 페이지의 시각적 안정성을 정량화 로드 프로세스 중에 페이지 레이아웃이 예기치 않게 이동하는 정도를 측정
3. Lighthouse에 대해 설명해주세요