테스트

유닛테스트 vs 통합테스트 vs E2E테스트를 비교하여 설명

단위 테스트 (Unit test)

• 범위: 소프트웨어의 개별 단위 또는 구성 요소를 개별적으로 테스트하는 데 중점을 둡니다. 단위는 함수, 메서드 또는 작은 코드 조각일 수 있습니다.
• 목적: 주요 목표는 소프트웨어의 각 단위가 예상대로 작동하고 결함이 없는지 확인하는 것입니다.
• 특성
  • 테스트는 독립적으로 수행되며 외부 종속성은 일반적으로 모의 또는 스텁 처리됩니다.
  • 일반적으로 개발 중에 수행되는 첫 번째 테스트 수준입니다.
  • 빠른 피드백을 제공하고 개발 프로세스 초기에 버그를 잡는 데 도움이 됩니다.

통합 테스트 (Integration test)

• 범위: 소프트웨어의 여러 장치 또는 구성 요소 간의 상호 작용을 테스트하여 함께 올바르게 작동하는지 확인합니다.
• 목적: 주요 목표는 단위가 상호 작용할 때 발생할 수 있는 문제를 식별하고 통합 지점이 의도한 대로 작동하는지 확인하는 것입니다.
• 특성
  • 시스템의 다른 부분 간의 인터페이스와 통신을 테스트합니다.
  • 데이터베이스, API 또는 외부 서비스에 대한 실제 연결이 필요할 수 있습니다.
  • 일반적으로 단위 테스트 후 E2E 테스트 전에 수행됩니다.
  • 통합 테스트는 데이터 흐름, API 통합 및 구성 요소 간의 통신과 관련된 문제를 식별하는 데 도움이 됩니다.

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

• 범위: 이 테스트 유형은 처음부터 끝까지 실제 사용자 시나리오를 시뮬레이션하여 전체 애플리케이션 워크플로를 확인합니다.
• 목적: 주요 목표는 소프트웨어가 모든 구성 요소와 상호 작용을 포함하여 사용자 관점에서 예상대로 작동하는지 확인하는 것입니다.
• 특성
  • UI, 데이터베이스, API 및 기타 외부 통합을 포함한 전체 시스템을 테스트합니다.
  • 일반적으로 프로덕션 설정과 매우 유사한 환경에서 실행됩니다.
  • E2E 테스트는 세 가지 유형의 테스트 중 가장 느리고 리소스 집약적입니다.
  • Playwright 또는 Cypress와 같은 도구를 사용하여 자동화됩니다.

요약

• 단위 테스트는 개별 코드 단위를 격리하여 테스트하는 데 중점
• 통합 테스트는 서로 다른 단위 간의 상호 작용에 중점
• End-to-End 테스트는 사용자 관점에서 전체 애플리케이션 워크플로를 검증 하는데 중점

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

Jest

• Facebook에서 개발한 인기 있고 널리 사용되는 JavaScript 테스트 프레임워크입니다.
• React 애플리케이션을 포함한 JavaScript 애플리케이션을 테스트하기 위해 특별히 설계되었습니다.
• 개발자가 단위 테스트, 통합 테스트 및 스냅샷 테스트를 쉽게 작성할 수 있도록 하는 포괄적인 테스트 유틸리티 및 기능 모음을 제공합니다.
• 주요 기능
  • 내장된 assertions: Jest는 내장된 assertions 라이브러리와 함께 제공되어 개발자가 최소한의 상용구 코드로 표현적이고 읽기 쉬운 테스트 사례를 작성할 수 있습니다.
  • 스냅샷 테스트: Jest의 스냅샷 테스트 기능을 사용하면 구성 요소 또는 데이터 구조의 직렬화된 표현을 캡처하고 비교할 수 있으므로 시간이 지남에 따라 의도하지 않은 변경 사항을 편리하게 감지할 수 있습니다.
  • 모킹: Jest는 강력한 모킹 기능을 제공하여 개발자가 테스트 중에 종속성 또는 외부 모듈의 동작을 시뮬레이션하고 제어할 수 있도록 합니다.
  • 병렬 테스트 실행: Jest는 테스트를 동시에 실행할 수 있으므로 대규모 테스트 스위트의 테스트 속도가 크게 향상됩니다.
  • 코드 커버리지 분석: Jest는 코드 커버리지 보고서를 제공하여 개발자가 테스트 커버리지가 부족한 코드 영역을 식별하도록 돕습니다.

Enzyme

• Airbnb에서 개발한 테스트 유틸리티 라이브러리로 React 구성 요소의 테스트를 단순화합니다.
• 구성 요소 렌더링, 출력 순회 및 상호 작용을 위한 일련의 기능 및 도구를 제공하여 React 애플리케이션에 대한 단위 테스트를 더 쉽게 작성할 수 있습니다.
• 주요 기능
  • Shallow rendering(얕은 렌더링): Enzyme은 하위 구성 요소를 렌더링하지 않고 현재 구성 요소만 렌더링하는 얕은 렌더링을 허용합니다. 이는 단일 구성 요소를 격리된 상태에서 테스트하는 빠르고 집중적인 방법을 제공합니다.
  • DOM 쿼리: Enzyme은 렌더링된 구성 요소의 가상 DOM을 탐색하고 쿼리하는 선택기와 메서드를 제공하여 특정 요소 및 해당 상태에 대한 어설션을 쉽게 수행할 수 있도록 합니다.
  • 구성 요소 메서드 테스트: Enzyme을 사용하면 구성 요소 수명 주기 메서드 및 구성 요소 내의 기타 사용자 정의 메서드를 테스트할 수 있습니다.
  • 다양한 렌더링 방법 지원: Enzyme은 얕은 렌더링, mount()를 사용한 전체 렌더링, render()를 사용한 정적 렌더링과 같은 다양한 렌더링 방법을 지원하여 다양한 테스트 시나리오에 대한 유연성을 제공합니다.

React Testing Library

• 사용자가 상호 작용하는 방식을 시뮬레이션하는 방식으로 React 구성 요소를 테스트하는 간단하고 직관적인 방법을 제공하는 테스트 유틸리티이다.
• Enzyme과 달리 사용자 관점에서 컴포넌트를 테스트하고 실제 사용자 상호작용을 시뮬레이션하며 접근성 테스트를 촉진하는 데 중점을 둡니다.
• 사용자가 웹 애플리케이션과 상호 작용하는 방식과 유사한 방식으로 DOM을 쿼리하고 조작하기 위한 유틸리티 세트를 제공하는 DOM 테스팅 라이브러리 위에 구축된다.
• 주요 기능
  • 사용자 중심 테스트: React 테스트 라이브러리는 사용자가 애플리케이션과 상호작용하는 방식과 매우 유사한 테스트를 작성하도록 권장합니다. 이렇게 하면 테스트가 실제 시나리오를 더 정확하게 모방할 수 있습니다.
  • 사용자 행동에 기반한 쿼리: 사용자가 상호 작용하는 방식에 따라 요소를 찾는 데 도움이 되는 getByText(), getByRole(), getByLabelText() 등과 같은 쿼리를 제공하여 테스트 가독성과 유지 관리가 향상됩니다.
  • 구현 세부 사항 피하기: React 테스팅 라이브러리는 컴포넌트 내부를 직접 쿼리하거나 컴포넌트 인스턴스 메서드를 사용하지 않도록 권장하므로 컴포넌트 구현 변경에 대한 테스트의 탄력성을 높일 수 있습니다.
  • 비동기 테스트 지원: 테스트에서 데이터 불러오기 및 API 호출과 같은 비동기 연산을 처리하기 위해 waitFor()와 같은 유틸리티를 제공합니다.

Cypress

• 웹 애플리케이션을 위한 오픈 소스 E2E 테스트 프레임워크입니다.
• 강력한 도구와 기능을 제공하여 E2E 테스트를 빠르고, 쉽고, 효율적으로 수행할 수 있도록 설계되었습니다.
• 기존 테스트 프레임워크와 달리 Cypress는 브라우저에서 직접 실행되므로 개발자는 테스트를 실행하는 동안 애플리케이션과 실시간으로 상호 작용할 수 있습니다.
• 주요 기능
  • 브라우저 자동화: 브라우저에서 직접 테스트를 실행하는 내장 브라우저 자동화 엔진을 제공합니다. 이 접근 방식은 테스트 실행에 대한 실시간 가시성을 제공하므로 문제를 더 쉽게 디버그하고 진단할 수 있습니다.
  • 시간 여행 디버깅: 개발자는 언제든지 테스트 실행을 일시 중지하고 애플리케이션의 상태, DOM 및 변수를 검사할 수 있으므로 테스트 실패의 원인을 쉽게 파악할 수 있습니다.
  • 자동 대기 및 재시도: 명령을 실행하기 전에 요소와 네트워크 요청이 안정화될 때까지 지능적으로 대기합니다. 또한 결함이 있는 테스트를 자동으로 재시도하여 테스트 결과의 오탐 가능성을 줄입니다.
  • 간편한 설정 및 구성: 간단한 설치 프로세스를 제공하며 최소한의 설정만 필요합니다. 사용자 친화적인 대화형 테스트 러너와 테스트 환경에 맞게 조정할 수 있는 포괄적인 구성 파일이 포함되어 있습니다.
  • 실시간 리로딩: 개발자가 테스트 작성 중에 코드를 변경하면 Cypress가 자동으로 테스트 러너를 다시 로드하여 이러한 변경 사항이 테스트 결과에 미치는 영향에 대한 피드백을 빠르게 받을 수 있습니다.
  • 크로스 브라우저 테스트: 주로 Chromium 브라우저에서 테스트를 실행하지만 다른 브라우저에서 테스트를 실행할 수 있는 실험적 지원도 제공하므로 테스트 커버리지의 범위가 넓어집니다.
  • 네트워크 및 API 테스트: 개발자는 네트워크 요청을 가로채고 수정하여 테스트를 통해 적절한 API 상호 작용과 응답을 확인할 수 있습니다.
  • 플러그인을 통한 확장성: 개발자는 추가 기능을 플러그인을 통해 확장, 통합하고 특정 테스트 요구 사항에 맞게 프레임워크를 사용자 지정할 수 있습니다.

Playwright

• 개발자가 테스트 및 기타 목적으로 웹 브라우저와의 상호 작용을 자동화할 수 있도록 Microsoft에서 개발한 브라우저 자동화 라이브러리입니다.
• 기존 자동화 라이브러리와 달리 Playwright는 Chromium(Google Chrome), Firefox, WebKit(Safari)을 비롯한 여러 브라우저를 지원합니다.
• 이를 통해 개발자는 여러 브라우저에서 실행할 수 있는 테스트를 작성하여 웹 애플리케이션의 브라우저 간 호환성을 보장할 수 있습니다.
• 주요 기능
  • 크로스 브라우저 지원: 통합 API를 사용하여 다양한 브라우저에서 웹 애플리케이션을 테스트할 수 있습니다.
  • 빠르고 안정적입니다: Playwright는 속도와 정확성을 위해 설계되어 빠른 테스트 실행과 신뢰할 수 있는 결과를 제공합니다.
  • 강력한 자동화: 사용자 상호 작용 시뮬레이션, 네트워크 요청 처리, 복잡한 테스트 시나리오 수행을 위한 다양한 기능을 제공합니다.
  • 헤드리스 및 헤딩 모드: 디버깅 및 모니터링 목적으로 헤드리스 모드(브라우저 창이 표시되지 않음) 또는 헤딩 모드(브라우저 창이 표시됨)에서 테스트를 실행할 수 있습니다.
  • 여러 프로그래밍 언어: Playwright는 자바스크립트, 타입스크립트, 파이썬, 자바 등 여러 프로그래밍 언어로 제공되므로 더 많은 개발자가 이용할 수 있습니다.

코드셉트JS(Codecept)

• 프론트엔드 및 백엔드 테스트를 모두 포함하여 웹 애플리케이션에 대한 E2E 테스트를 간소화하는 테스트 프레임워크입니다.
• Puppeteer(Chromium 자동화용) 및 WebDriverIO(Selenium 기반 자동화용)와 같이 널리 사용되는 자동화 라이브러리를 기반으로 구축되었으며, 크로스 브라우저 테스트를 위한 Playwright도 지원합니다.
• 기본 라이브러리의 복잡성을 추상화하는 높은 수준의 API를 제공하므로 E2E 테스트를 더 쉽게 작성하고 유지 관리할 수 있습니다.
• 주요 기능:
  • 간소화된 구문: CodeceptJS는 단순하고 사람이 읽을 수 있는 구문을 제공하여 테스트 시나리오를 쉽게 이해하고 작성할 수 있습니다.
  • Playwright를 통한 크로스 브라우저 지원: CodeceptJS는 브라우저 간 테스트를 위해 Playwright를 활용하므로 개발자는 큰 코드 변경 없이 다양한 브라우저에서 E2E 테스트를 실행할 수 있습니다.
  • 기본 제공 도우미: CodeceptJS에는 페이지 객체 처리, 인증 관리, 데이터베이스 작업과 같은 일반적인 테스트 작업을 간소화하는 빌트인 헬퍼 세트가 포함되어 있습니다.
  • 확장 가능한 아키텍처: 개발자는 사용자 지정 헬퍼 및 플러그인을 생성하여 테스트 프레임워크를 특정 프로젝트 요구 사항에 맞게 조정하여 기능을 확장할 수 있습니다.
  • BDD(Behavior-Driven Development) 스타일 테스트 지원: CodeceptJS는 사람이 읽을 수 있는 비즈니스 지향 언어로 테스트를 작성할 수 있는 구문과 기능을 제공함으로써 행동 중심 개발(BDD)을 가능하게 합니다.

최적화

CDN(Content Distributed Network)에 대해 설명

• CDN(콘텐츠 전송 네트워크)은 지리적으로 분산된 서버 네트워크로, 정적 파일(이미지, 스타일시트, JavaScript 파일, 동영상 등) 및 동적 콘텐츠(웹 페이지, API 응답 등)를 포함한 웹 콘텐츠를 지리적 위치에 따라 사용자에게 전송하기 위해 함께 작동합니다. CDN의 주요 목적은 최종 사용자를 위한 웹 콘텐츠의 성능, 안정성 및 가용성을 개선하는 것입니다.

• 작동 방식

  • 캐싱: 사용자가 웹사이트에서 콘텐츠를 요청하면 CDN은 사용자 위치에서 가장 가까운 서버에서 콘텐츠를 제공합니다. 이렇게 하면 사용자와 서버 사이의 거리가 줄어들어 콘텐츠 전송 속도가 빨라집니다. 또한 CDN은 서버에 콘텐츠를 캐시하므로 콘텐츠가 요청되어 사용자에게 전달되면 해당 콘텐츠는 CDN의 서버에 저장됩니다. 이후 동일한 콘텐츠에 대한 요청이 있을 경우 원본 서버에서 콘텐츠를 가져올 필요 없이 가까운 CDN 서버에서 콘텐츠를 제공할 수 있으므로 원본 서버의 부하가 더욱 감소하고 콘텐츠 전송 속도가 향상됩니다.
  • 엣지 서버: 전 세계에 여러 PoP(거점)를 보유하고 있으며, 각 PoP에는 수많은 엣지 서버가 포함되어 있습니다. 이러한 엣지 서버는 여러 지리적 위치에 전략적으로 분산되어 사용자의 위치에 관계없이 콘텐츠를 효율적으로 전송합니다. 사용자가 요청을 하면 CDN의 지능형 라우팅 시스템이 가장 가까운 엣지 서버로 요청을 전달하여 지연을 최소화하고 콘텐츠 전송 시간을 개선합니다.
  • 로드 밸런싱: 로드 밸런싱 기술을 사용하여 수신 요청을 여러 서버에 분산합니다. 이렇게 하면 서버가 갑작스러운 트래픽 급증에 압도되지 않고 높은 부하를 효율적으로 처리하여 최적의 성능과 가용성을 유지할 수 있습니다.

• 이점

  • 더 빠른 콘텐츠 전송: 지리적으로 분산된 엣지 서버에서 콘텐츠를 제공함으로써 사용자와 서버 간의 물리적 거리를 줄여 로딩 시간을 단축하고 사용자 경험을 개선합니다.
  • 웹사이트 성능 향상: 원본 서버의 트래픽을 오프로드하여 서버의 부하를 줄이고 다른 중요한 작업을 처리할 수 있도록 합니다. 따라서 트래픽이 급증하는 동안 웹사이트 속도 저하나 충돌을 방지할 수 있습니다.
  • 확장성: 대량의 트래픽을 처리하도록 설계되었으며 성능 저하 없이 증가하는 수요를 수용하도록 쉽게 확장할 수 있습니다.
  • 고가용성: 여러 위치에 분산된 이중화 서버를 보유하고 있기 때문에 내결함성이 뛰어나고 가용성이 높습니다. 한 서버가 다운되면 요청이 사용 가능한 다른 서버로 자동 리디렉션될 수 있습니다.
  • 비용 절감: 원본 서버의 대역폭 사용량과 서버 부하를 줄여 호스팅 비용을 절감할 수 있습니다.

Web Vitals에 대해 설명

• 웹 페이지의 사용자 경험을 평가하기 위한 통합되고 일관된 지표를 제공하기 위한 Google의 이니셔티브입니다.
• 개발자와 사이트 소유자가 웹사이트의 성능을 측정, 이해 및 개선할 수 있도록 지원하는 것을 목표로 합니다.
• 우수한 사용자 경험에 필수적인 일련의 주요 성능 지표로 구성되어 있습니다.
• 핵심 웹 바이탈 지표
  • 페이지 로딩 속도를 측정하는(LCP - Largest Contentful Paint): 웹 페이지의 주요 콘텐츠가 사용자에게 표시되는 데 걸리는 시간을 측정합니다. 사용자 관점에서 로딩 성능을 정량화합니다.
  • 대화형 성능을 측정하는 (FID - First Input Delay): 사용자의 첫 번째 상호 작용(예: 버튼 클릭)과 브라우저의 응답 사이의 시간을 측정하여 웹 페이지의 상호 작용을 평가합니다. 웹사이트의 응답성을 정량화합니다.
  • 콘텐츠 안정성을 측정하는(CLS - Cumulative Layout Shift): 페이지 수명 동안 발생하는 예기치 않은 레이아웃 이동의 양을 측정하여 시각적 안정성을 평가합니다. 페이지의 요소가 예기치 않게 이동하는 빈도를 정량화하여 사용자에게 불편을 줄 수 있습니다.

웹 바이탈은 개발자에게 사용자 경험에 직접적인 영향을 미치는 웹사이트의 측면에 대한 인사이트를 제공하기 때문에 필수적입니다. 개발자는 이러한 지표를 개선하는 데 집중함으로써 더 빠르고 반응성이 뛰어나며 시각적으로 안정적인 웹 페이지를 제작하여 사용자 만족도와 참여도를 높일 수 있습니다.

Lighthouse에 대해 설명

• 웹 페이지를 분석하고 성능, 접근성, 모범 사례, SEO 및 PWA(프로그레시브 웹 앱) 준수에 대한 자세한 보고서를 생성하는 Google의 오픈 소스 자동화 도구입니다.
• Google Chrome 개발자 도구에 내장되어 있지만 명령줄에서 실행하거나 브라우저 확장 프로그램으로 사용할 수도 있습니다.
• 웹 페이지에서 Lighthouse를 실행하면 웹 바이탈과 관련된 메트릭을 포함한 다양한 메트릭을 기반으로 일련의 감사를 수행하고 각 범주에 대한 점수를 제공합니다.
• 웹 페이지의 성능, 접근성 및 기타 영역을 개선하는 방법에 대한 실행 가능한 권장 사항을 제공합니다.
• 개발자와 웹사이트 소유자가 문제를 파악하고 사이트를 최적화하여 사용자 경험과 검색 엔진 순위를 개선하는 데 널리 사용됩니다.

PageSpeed Insights

• 구글에서 제공하는 웹사이트 성능 측정 도구입니다. 이 도구는 웹 페이지의 로딩 속도를 측정하고, 최적화할 수 있는 방법을 제시해 줍니다.
• PageSpeed Insights와 Lighthouse는 모두 구글에서 제공하는 웹페이지 성능 측정 도구지만, 목적과 기능에서 차이점이 존재합니다.
• PageSpeed Insights는 주로 모바일 기기에서 웹페이지 성능을 측정하는 데 사용하는 반면, Lighthouse는 성능 및 접근성, SEO, PWA 등 다양한 측면에서의 품질을 측정하는 데 사용됩니다.