유닛 테스트
개별적인 컴포넌트 또는 모듈의 동작을 테스트하는 과정입니다. 가장 작은 단위인 함수 또는 메소드가 올바르게 동작하는지 확인하고, 버그를 가능한 빨리 발견하여 수정하는 것을 목적으로 합니다.
통합 테스트
유닛테스트할 때의 여러 개의 유닛들을 묶어서 전체 시스템 기능 검증을 통해 상호작용이 잘 되는지 테스트하는 과정입니다. 데이터베이스, 서버와의 통신 등 시스템 전반의 통합이 잘 이루어지는지 확인합니다.
E2E 테스트
실제 사용자 시나리오를 시뮬레이션하여 소프트웨어 시스템의 완전한 기능을 테스트하는 과정입니다. 실제 사용자 환경에서의 테스트를 통해 시스템이 예상대로 작동하는지 확인하는 것이 목적입니다.
리액트 테스트에 사용되는 도구들을 비교하여 설명해주세요.
Jest
Jest는 facebook에서 개발한 자바스크립트 테스트 프레임워크로, 리액트 애플리케이션의 테스트에 많이 사용됩니다. 주로 유닛 테스트 및 통합 테스트를 작성하는 데 사용됩니다. 라이브러리를 사용할 때 의존성에 의해 어려움을 많이 겪는데, jest는 mock 함수를 이용해 의존성을 대체해 테스트를 진행 할 수있습니다.
Testing Library (React Testing Library)
리액트 컴포넌트를 사용자 시나리오에 기반하여 테스트하기 위해 사용됩니다. 사용자가 실제로 화면에서 볼 수 있는 방식으로 테스트를 작성하여 실제 사용자 경험을 시뮬레이션 합니다. 그렇기에 주로 E2E테스트나 사용자 시나리오에 따른 테스트를 작성하는데 적합합니다.
Enzyme
Airbnb에서 개발한 리액트 컴포넌트 테스트 도구로, 유닛 테스트를 작성하는 데 사용되며, 컴포넌트의 렌더링 상태, 이벤트 핸들링 등을 테스트할 수 있습니다.
Cypress
E2E 테스트 도구로, 실제 사용자가 웹 애플리케이션을 사용하는 것과 유사한 방식으로 테스트를 수행합니다. 디버깅이 쉽고, 자동화된 리로딩과 테스트 환경 조작 기능 등을 통해 개발자들이 효율적으로 웹 애플리케이션을 테스트하고 검증 할 수 있도록 도와줍니다.
최적화
CDN(Content Distributed Network)에 대해 설명해주세요.
전세계 여러 지역에 위치한 서버들을 사용하여 정적 콘텐츠(이미지, 스크립트, 스타일시트 등)를 서버들에 복제하고 저장합니다. 그리고 사용자와 가까운 지역의 서버를 통해 콘텐츠를 안정적이고 빠르게 제공해주는 기술적인 구조를 말합니다.
CDN을 사용하면 근접한 서버를 사용하여 콘텐츠를 전달하기에 웹 페이지를 빠르게 로드할 수 있습니다. 그렇기에 응답 속도가 향상되고, UX가 좋아집니다.
여러 지역에 위치한 서버들을 사용하기에 원본 서버의 부하를 분산시켜 트래픽 부하를 줄일 수 있습니다. 그렇기에 서버가 다운되더라도 다른 지역의 서버들로 콘텐츠를 제공할 수 있기에 웹 사이트의 가용성이 높아집니다.
일부 CDN은 보안 기능도 제공하여 DDos 공격, 웹 방화벽, 무단 액세스 등으로부터 웹 사이트를 보호할 수 있습니다.
Web Vitals에 대해 설명해주세요.
웹 사이트의 사용자 경험을 측정하고 평가하는 데 사용되는 지표들의 모음입니다. Google이 개발하였으며, 세 가지 주요 지표로 구성됩니다.
Largest Contentful Paint (LCP)
LCP는 사용자가 웹페이지에서 가장 큰 콘텐츠가 완전히 로드되기까지 걸리는 시간을 측정합니다. 큰 이미지, 비디오 또는 텍스트 블록과 같이 사용자가 화면에 먼저 보는 콘텐츠가 로드되는 속도를 측정합니다.
First Input Delay (FID)
FID는 사용자가 웹 페이지와 상호작용(마우스 클릭, 버튼 클릭 등)을 시작하는데 걸리는 시간을 측정합니다. 페이지가 로드된 후 사용자의 입력에 얼마나 빨리 반응하는지를 나타냅니다. 낮은 FID 값은 사용자가 빠르게 상호작용할 수 있고, 웹 페이지가 반응성이 좋다는 것을 의미합니다.
Cumulative Layout Shift(CLS)
CLS는 페이지의 레이아웃 안정성을 측정합니다. 웹 페이지가 로드되는 동안 콘텐츠가 움직이는 정도를 측정합니다. 낮은 CLS 값은 페이지가 레이아웃이 안정적이며 사용자가 콘텐츠를 쉽게 읽을 수 있음을 나타냅니다.
Lighthouse에 대해 설명해주세요.
Google에서 개발한 오픈 소스 자동화된 웹 페이지 성능 측정 도구입니다. 웹페이지의 성능, 접근성, 최적화 등 다양한 측면을 평가하여 웹 개발자들이 사용자 경험을 향상시키는 데 도움을 줍니다.
주요 기능과 평가 대상은 다음과 같습니다.
성능 측정
웹 페에지의 성능을 측정하고, Web Vitals과 같은 지표들을 제공합니다. 이런 지표를 통해 페이지의 로딩 속도, 반응성 및 레이아웃 안정석을 평가합니다.
접근성 평가
웹 페이지의 접근성을 평가하여 웹 사이트가 모든 사용자들에게 동등한 접근성을 제공하는지 확인합니다.
SEO (검색 엔진 최적화) 평가
SEO 관련 요소를 분석하여 검색 엔진 결과 순위에 영향을 미칠 수 있는 요소들을 제시합니다.
PWA 평가
웹 페이지가 PWA 요구 사항을 충족하는지 확인하여 웹 앱의 기능과 특성을 평가합니다.
최적화 제안
웹 페이지의 성능을 향상시키기 위한 최적화 제안을 제시합니다. 이를 통해 웹 개발자들은 웹 사이트를 더 빠르고 효율적으로 만들기 위한 개선점을 확인할 수 있습니다.
테스트
통합 테스트 유닛테스트할 때의 여러 개의 유닛들을 묶어서 전체 시스템 기능 검증을 통해 상호작용이 잘 되는지 테스트하는 과정입니다. 데이터베이스, 서버와의 통신 등 시스템 전반의 통합이 잘 이루어지는지 확인합니다.
E2E 테스트 실제 사용자 시나리오를 시뮬레이션하여 소프트웨어 시스템의 완전한 기능을 테스트하는 과정입니다. 실제 사용자 환경에서의 테스트를 통해 시스템이 예상대로 작동하는지 확인하는 것이 목적입니다.
Testing Library (React Testing Library) 리액트 컴포넌트를 사용자 시나리오에 기반하여 테스트하기 위해 사용됩니다. 사용자가 실제로 화면에서 볼 수 있는 방식으로 테스트를 작성하여 실제 사용자 경험을 시뮬레이션 합니다. 그렇기에 주로 E2E테스트나 사용자 시나리오에 따른 테스트를 작성하는데 적합합니다.
Enzyme Airbnb에서 개발한 리액트 컴포넌트 테스트 도구로, 유닛 테스트를 작성하는 데 사용되며, 컴포넌트의 렌더링 상태, 이벤트 핸들링 등을 테스트할 수 있습니다.
Cypress E2E 테스트 도구로, 실제 사용자가 웹 애플리케이션을 사용하는 것과 유사한 방식으로 테스트를 수행합니다. 디버깅이 쉽고, 자동화된 리로딩과 테스트 환경 조작 기능 등을 통해 개발자들이 효율적으로 웹 애플리케이션을 테스트하고 검증 할 수 있도록 도와줍니다.
최적화
CDN을 사용하면 근접한 서버를 사용하여 콘텐츠를 전달하기에 웹 페이지를 빠르게 로드할 수 있습니다. 그렇기에 응답 속도가 향상되고, UX가 좋아집니다. 여러 지역에 위치한 서버들을 사용하기에 원본 서버의 부하를 분산시켜 트래픽 부하를 줄일 수 있습니다. 그렇기에 서버가 다운되더라도 다른 지역의 서버들로 콘텐츠를 제공할 수 있기에 웹 사이트의 가용성이 높아집니다. 일부 CDN은 보안 기능도 제공하여 DDos 공격, 웹 방화벽, 무단 액세스 등으로부터 웹 사이트를 보호할 수 있습니다.
Largest Contentful Paint (LCP) LCP는 사용자가 웹페이지에서 가장 큰 콘텐츠가 완전히 로드되기까지 걸리는 시간을 측정합니다. 큰 이미지, 비디오 또는 텍스트 블록과 같이 사용자가 화면에 먼저 보는 콘텐츠가 로드되는 속도를 측정합니다.
First Input Delay (FID) FID는 사용자가 웹 페이지와 상호작용(마우스 클릭, 버튼 클릭 등)을 시작하는데 걸리는 시간을 측정합니다. 페이지가 로드된 후 사용자의 입력에 얼마나 빨리 반응하는지를 나타냅니다. 낮은 FID 값은 사용자가 빠르게 상호작용할 수 있고, 웹 페이지가 반응성이 좋다는 것을 의미합니다.
Cumulative Layout Shift(CLS) CLS는 페이지의 레이아웃 안정성을 측정합니다. 웹 페이지가 로드되는 동안 콘텐츠가 움직이는 정도를 측정합니다. 낮은 CLS 값은 페이지가 레이아웃이 안정적이며 사용자가 콘텐츠를 쉽게 읽을 수 있음을 나타냅니다.
주요 기능과 평가 대상은 다음과 같습니다.
성능 측정 웹 페에지의 성능을 측정하고, Web Vitals과 같은 지표들을 제공합니다. 이런 지표를 통해 페이지의 로딩 속도, 반응성 및 레이아웃 안정석을 평가합니다.
접근성 평가 웹 페이지의 접근성을 평가하여 웹 사이트가 모든 사용자들에게 동등한 접근성을 제공하는지 확인합니다.
SEO (검색 엔진 최적화) 평가 SEO 관련 요소를 분석하여 검색 엔진 결과 순위에 영향을 미칠 수 있는 요소들을 제시합니다.
PWA 평가 웹 페이지가 PWA 요구 사항을 충족하는지 확인하여 웹 앱의 기능과 특성을 평가합니다.
최적화 제안 웹 페이지의 성능을 향상시키기 위한 최적화 제안을 제시합니다. 이를 통해 웹 개발자들은 웹 사이트를 더 빠르고 효율적으로 만들기 위한 개선점을 확인할 수 있습니다.