테스트

유닛 테스트 vs 통합 테스트 vs E2E테스트를 비교하여 설명해 주세요.

단위 테스트(Unit Test)

틀 : Jasmine, Jest, Karma, Mocha

• 단위 테스트는 함수나 메서드와 같은 작은 단위의 코드를 테스트하는데 중점을 두는 테스트 유형이다. 즉, 시스템의 전체적인 동작에 중점을 맞추지는 않는다.
• 단위 테스트의 목적은 코드의 각 단위가 예상대로 작동하고 요구 사항을 충족하는지 확인하는 것이다.

통합 테스트(Integration Test)

틀 : Jest, Testing Library

• 통합 테스트는 시스템의 여러 단위 또는 구성 요소 간의 상호 작용을 검증하는 테스트 유형이다.
• 서로 다른 단위가 함께 동작하면서 흐름에 맞게 잘 작동하고, 예상한 결과를 생성하는지를 테스트한다.

E2E 테스트(End-to-End Test)

틀 : Cypress, Puppeteer

• E2E 테스트는 시스템의 시작부터 끝까지 전체 흐름을 확인하는 테스트 유형이다.
• 시스템이 예상대로 작동하고 사용자의 요구 사항을 충족하는지 확인하기 위해 모든 구성 요소와 해당 구성 요소의 상호 작용을 테스트 하는 것이 포함된다.

리액트 테스트에 사용되는 도구들을 비교하여 설명해주세요.

Jest

• 페이스북에서 만든 자바스크립트 테스트 프레임워크이다
• 테스트 코드가 완전히 분리되어 있으며, 분리된 테스트는 동시에 실행할 수 있어 빠른 성능을 제공한다.
• 유닛 테스트 & 통합 테스트에 사용

Cypress

• 브라우저를 이용한 E2E테스트 프레임워크
• 주로 프론트엔드의 E2E 시나리오를 수행하는 도구이다.

최적화

CDN(Content Distributed Network)에 대해 설명해주세요.

CDN

• CDN은 콘텐츠 전달 네트워크의 약자로, 인터넷 상에서 콘텐츠를 빠르게 전송하고 전달하기 위해 사용되는 분산 서버 시스템이다.
• 일반적으로 정적 파일(이미지, 스타일시트, 스크립트 등)과 동영상, 웹 페이지와 같은 리소스를 CDN을 통해 제공하면 이러한 파일들이 웹 사이트를 요청한 사용자와 지리적으로 더 가까운 위치에 위치한 서비스를 통해 전달한다.

CDN 장점

• 빠른 로딩 속도 : 사용자와 가까운 위치의 서버에서 콘텐츠를 제공하므로 로딩 속도 향상
• 트래픽 분산 : 콘텐츠를 여러 서버에 분산시킴으로써 웹 사이트의 트래픽 부하를 줄임
• 강력한 보안 : CDN은 보안 기능을 제공하여 DDos 공격 등으로부터 웹 사이트를 보호

Web Vitals에 대해 설명해주세요

Web Vitals

• web Vitals는 웹 사이트의 사용자 경험을 측정하는 메트릭의 집합으로, Google에 의해 제공되는 중요한 웹 사이트 성능 측정 지표

Web Vitals 메트릭 구성

• Largest Contentful Paint (LCP) : 사용자가 페이지를 처음 로딩했을 때, 가장 큰 콘텐츠가 화면에 나타나는시간을 측정한다.LCP는 로딩 시간과 페이지의 퍼셉션을 나타냅니다.

• First Input Delay (FID) : 페이지가 로딩된 후, 사용자의 첫 번째 상호작용과 실제 브라우저가 해당 상호작용에 응답하기 시작하는 사이의 시간을 측정한다. FID는 페이지의 대화형성과 반응성을 나타냅니다.

• Cumulative Layout Shift (CLS) : 페이지의 로딩 중에 콘텐츠가 예상치 못하게 움직이는 정도를 측정한다. 여러 번의 레이아웃 변화가 있을 때, 각 변화마다 얼마나 많은 콘텐츠가 이동하는지를 평가한다. CLS는 사용자의 불편함 정도를 나타낸다.

Lighthouse에 대해 설명해주세요

Lighthouse

• Lighthouse는 Google이 개발한 오픈소스 자동화된 품질 평가 도구다.
• Lighthouse는 웹 페이지의 성능, 접근성, PWA(Progressive Web App) 등 여러 측면을 평가하고 개선하는데 사용된다.
• 브라우저 개발자 도구와 명령줄 도구로 제공되며, 사용하기 쉽고 다양한 지표를 제공