유닛테스트 :
단위 테스트(Unit Test)는 하나의 모듈을 기준으로 독립적으로 진행되는 가장 작은 단위의 테스트이다. 여기서 모듈은 애플리케이션에서 작동하는 하나의 기능 또는 메소드로 이해할 수 있다. 예를 들어 웹 애플리케이션에서 로그인 메소드에 대한 독립적인 테스트가 1개의 유닛테스트가 될 수 있다. 즉, 유닛 테스트는 애플리케이션을 구성하는 하나의 기능이 올바르게 동작하는지를 독립적으로 테스트하는 것으로, "어떤 기능이 실행되면 어떤 결과가 나온다" 정도로 테스트를 진행한다.
통합테스트 :
모듈을 통합하는 과정에서 모듈 간의 호환성을 확인하기 위해 수행되는 테스트이다. 일반적으로 애플리케이션은 여러 개의 모듈들로 구성이 되고, 모듈들끼리 메세지를 주고 받으면서(함수 호출) 기능을 수행한다. 그렇기에 통합된 모듈들이 올바르게 연계되어 동작하는지 검증이 필요한데, 이러한 목적으로 진행되는 테스트가 통합 테스트이다. 그렇기에 통합 테스트는 독립적인 기능에 대한 테스트가 아니라 웹 페이지로부터 API를 호출하여 올바르게 동작하는 지를 확인하는 것이다.
E2E테스트 :
개발물을 사용자 관점에서 테스트 하는 방법이다. 페이지에서 원하는 텍스트가 제대로 출력이 되었는지, 버튼을 클릭 했을 때 올바른 동작을 수행하는 지 등을 테스트한다.
모든 애플리케이션은 다양한 시스템, DB와 연결되고 통합되어있다. 따라서 앱의 Workflow는 복잡해졌다. 그래서 이러한 앱의 올바른 작동을 사용자 관점에서 확인할 수요가 늘어났다.
E2E테스트는 다양한 앱의 의존관계가 정확히 작동하는지 확인한다. 또한 정확한 정보가 다양한 시스템 컴포넌트 사이에서 전달하는지 체크할 수 있다.
리액트 테스트에 사용되는 도구들
Jest:
Jest는 페이스북에서 만든 테스트 프레임워크로, 주로 리액트 애플리케이션의 유닛 테스트를 위해 사용됩니다.
기본적으로 자바스크립트 테스트를 지원하며, Babel을 사용하여 ES6+ 문법을 지원합니다.
Snapshot 테스팅 기능을 제공하여 컴포넌트의 렌더 결과를 스냅샷으로 저장하고, 이후 변경 사항을 감지하는데 활용할 수 있습니다.
React Testing Library:
React Testing Library는 사용자 관점에서 리액트 컴포넌트를 테스트하는 데 중점을 둔 라이브러리입니다.
실제 DOM을 조작하고 상호 작용하는 방식으로 컴포넌트를 테스트하며, 사용자가 어떻게 컴포넌트를 사용하는지에 집중합니다.
가독성이 높으며, 테스트 코드가 실제 사용자 경험과 유사해질 수 있습니다.
Cypress:
Cypress는 리액트 애플리케이션의 End-to-End(E2E) 테스트를 위한 도구입니다.
실제 브라우저에서 동작하면서 애플리케이션의 동작을 시뮬레이트하고 검증할 수 있습니다.
DOM 조작, 네트워크 요청, 탐색 등을 지원하며, 디버깅과 시간 여행 기능을 제공하여 테스트를 용이하게 만듭니다.
이외에도 다양한 리액트 테스트 도구들이 존재하며, 프로젝트의 요구사항과 테스트 유형에 따라 적절한 도구를 선택하는 것이 중요합니다. 일반적으로 Jest와 React Testing Library를 함께 사용하는 것이 좋은 선택이며, End-to-End 테스트가 필요한 경우에는 Cypress를 추가적으로 고려할 수 있습니다.
최적화
CDN(Content Distributed Network) :
일반적으로 웹 사이트의 정적 컨텐츠(이미지, CSS 파일, JavaScript 파일 등)은 원래 서버에서 전 세계 사용자에게 제공됩니다. 하지만 사용자가 웹 사이트에 접속할 때, 서버와 사용자 사이의 물리적 거리와 인터넷 트래픽 혼잡 등의 이유로 로딩 시간이 느려지는 문제가 발생할 수 있습니다. 이러한 문제를 해결하기 위해 CDN이 사용됩니다. CDN은 여러 개의 전 세계적으로 분산된 서버를 가지고 있습니다. 이 서버들은 웹 사이트의 정적 콘텐츠를 복제하고, 사용자가 해당 콘텐츠를 요청할 때 가장 가까운 서버에서 콘텐츠를 제공합니다. 이로 인해 웹 사이트의 로딩 속도가 개선되고, 더 빠르게 컨텐츠를 제공할 수 있습니다.
Web Vitals :
사용자 경험을 측정하고 평가하는 웹 성능 지표들의 모음입니다. 이러한 지표들은 웹 개발자들과 웹 사이트 운영자들이 웹 애플리케이션을 최적화하고, 사용자 경험을 향상시키는 데 도움이 됩니다. 웹 비탈은 다음과 같은 주요 지표들로 구성됩니다.
Largest Contentful Paint (LCP):
LCP는 가장 큰 콘텐츠가 사용자에게 렌더링되기까지 걸리는 시간을 측정합니다. 주로 이미지나 텍스트 블록과 같이 뷰포트 내에서 가장 큰 콘텐츠를 의미합니다. LCP가 2.5초 이하인 것이 좋습니다.
First Input Delay (FID):
FID는 사용자가 페이지와 상호 작용하고자 할 때, 브라우저가 해당 상호 작용에 대한 응답으로 얼마나 빨리 반응하는지를 측정합니다. 예를 들어, 버튼 클릭과 같은 사용자 입력에 대한 브라우저의 응답 시간을 의미합니다. FID는 100밀리초 이하인 것이 좋습니다.
Cumulative Layout Shift (CLS):
CLS는 페이지의 레이아웃이 얼마나 불안정하게 변경되는지를 측정합니다. 예를 들어, 로딩 중인 이미지가 레이아웃을 밀거나 변경하는 경우 불안정한 레이아웃 변경으로 간주됩니다. CLS는 0.1 이하인 것이 좋습니다.
Lighthouse :
웹 애플리케이션의 성능, 접근성, 최적화 수준 등을 평가하여 개선할 수 있는 지표들을 제공합니다. 개발자들이 웹 사이트의 품질을 쉽게 파악하고, 사용자 경험을 향상시키기 위해 널리 사용되는 도구 중 하나입니다. Lighthouse는 다음과 같은 주요 성능 평가 항목들을 제공합니다.
성능 (Performance):
웹 페이지의 로딩 속도와 렌더링 성능 등을 평가합니다. Largest Contentful Paint (LCP), First Contentful Paint (FCP), Speed Index 등의 지표를 제공하여 웹 페이지의 로딩 속도를 측정합니다.
접근성 (Accessibility): 웹 페이지의 접근성을 평가합니다. 웹 접근성 지침을 준수하고 있으며, 장애를 가진 사용자들도 웹 사이트를 이용할 수 있도록 보장하는지 확인합니다.
최적화 (Best Practices): 웹 개발의 모범 사례를 따르고 있는지 평가합니다. 웹 사이트의 코드와 구조가 최신 표준을 준수하고 있으며, 보안과 관련된 적절한 설정들을 가지고 있는지 확인합니다.
SEO: 검색 엔진 최적화를 평가합니다. 웹 사이트의 컨텐츠가 검색 엔진에서 쉽게 찾을 수 있도록 적절한 메타 데이터를 포함하고 있는지 평가합니다.
테스트
유닛테스트 : 단위 테스트(Unit Test)는 하나의 모듈을 기준으로 독립적으로 진행되는 가장 작은 단위의 테스트이다. 여기서 모듈은 애플리케이션에서 작동하는 하나의 기능 또는 메소드로 이해할 수 있다. 예를 들어 웹 애플리케이션에서 로그인 메소드에 대한 독립적인 테스트가 1개의 유닛테스트가 될 수 있다. 즉, 유닛 테스트는 애플리케이션을 구성하는 하나의 기능이 올바르게 동작하는지를 독립적으로 테스트하는 것으로, "어떤 기능이 실행되면 어떤 결과가 나온다" 정도로 테스트를 진행한다.
통합테스트 : 모듈을 통합하는 과정에서 모듈 간의 호환성을 확인하기 위해 수행되는 테스트이다. 일반적으로 애플리케이션은 여러 개의 모듈들로 구성이 되고, 모듈들끼리 메세지를 주고 받으면서(함수 호출) 기능을 수행한다. 그렇기에 통합된 모듈들이 올바르게 연계되어 동작하는지 검증이 필요한데, 이러한 목적으로 진행되는 테스트가 통합 테스트이다. 그렇기에 통합 테스트는 독립적인 기능에 대한 테스트가 아니라 웹 페이지로부터 API를 호출하여 올바르게 동작하는 지를 확인하는 것이다.
E2E테스트 : 개발물을 사용자 관점에서 테스트 하는 방법이다. 페이지에서 원하는 텍스트가 제대로 출력이 되었는지, 버튼을 클릭 했을 때 올바른 동작을 수행하는 지 등을 테스트한다. 모든 애플리케이션은 다양한 시스템, DB와 연결되고 통합되어있다. 따라서 앱의 Workflow는 복잡해졌다. 그래서 이러한 앱의 올바른 작동을 사용자 관점에서 확인할 수요가 늘어났다. E2E테스트는 다양한 앱의 의존관계가 정확히 작동하는지 확인한다. 또한 정확한 정보가 다양한 시스템 컴포넌트 사이에서 전달하는지 체크할 수 있다.
리액트 테스트에 사용되는 도구들
Jest: Jest는 페이스북에서 만든 테스트 프레임워크로, 주로 리액트 애플리케이션의 유닛 테스트를 위해 사용됩니다. 기본적으로 자바스크립트 테스트를 지원하며, Babel을 사용하여 ES6+ 문법을 지원합니다. Snapshot 테스팅 기능을 제공하여 컴포넌트의 렌더 결과를 스냅샷으로 저장하고, 이후 변경 사항을 감지하는데 활용할 수 있습니다.
React Testing Library: React Testing Library는 사용자 관점에서 리액트 컴포넌트를 테스트하는 데 중점을 둔 라이브러리입니다. 실제 DOM을 조작하고 상호 작용하는 방식으로 컴포넌트를 테스트하며, 사용자가 어떻게 컴포넌트를 사용하는지에 집중합니다. 가독성이 높으며, 테스트 코드가 실제 사용자 경험과 유사해질 수 있습니다.
Cypress: Cypress는 리액트 애플리케이션의 End-to-End(E2E) 테스트를 위한 도구입니다. 실제 브라우저에서 동작하면서 애플리케이션의 동작을 시뮬레이트하고 검증할 수 있습니다. DOM 조작, 네트워크 요청, 탐색 등을 지원하며, 디버깅과 시간 여행 기능을 제공하여 테스트를 용이하게 만듭니다.
이외에도 다양한 리액트 테스트 도구들이 존재하며, 프로젝트의 요구사항과 테스트 유형에 따라 적절한 도구를 선택하는 것이 중요합니다. 일반적으로 Jest와 React Testing Library를 함께 사용하는 것이 좋은 선택이며, End-to-End 테스트가 필요한 경우에는 Cypress를 추가적으로 고려할 수 있습니다.
최적화
CDN(Content Distributed Network) : 일반적으로 웹 사이트의 정적 컨텐츠(이미지, CSS 파일, JavaScript 파일 등)은 원래 서버에서 전 세계 사용자에게 제공됩니다. 하지만 사용자가 웹 사이트에 접속할 때, 서버와 사용자 사이의 물리적 거리와 인터넷 트래픽 혼잡 등의 이유로 로딩 시간이 느려지는 문제가 발생할 수 있습니다. 이러한 문제를 해결하기 위해 CDN이 사용됩니다. CDN은 여러 개의 전 세계적으로 분산된 서버를 가지고 있습니다. 이 서버들은 웹 사이트의 정적 콘텐츠를 복제하고, 사용자가 해당 콘텐츠를 요청할 때 가장 가까운 서버에서 콘텐츠를 제공합니다. 이로 인해 웹 사이트의 로딩 속도가 개선되고, 더 빠르게 컨텐츠를 제공할 수 있습니다.
Web Vitals : 사용자 경험을 측정하고 평가하는 웹 성능 지표들의 모음입니다. 이러한 지표들은 웹 개발자들과 웹 사이트 운영자들이 웹 애플리케이션을 최적화하고, 사용자 경험을 향상시키는 데 도움이 됩니다. 웹 비탈은 다음과 같은 주요 지표들로 구성됩니다.
Largest Contentful Paint (LCP): LCP는 가장 큰 콘텐츠가 사용자에게 렌더링되기까지 걸리는 시간을 측정합니다. 주로 이미지나 텍스트 블록과 같이 뷰포트 내에서 가장 큰 콘텐츠를 의미합니다. LCP가 2.5초 이하인 것이 좋습니다.
First Input Delay (FID): FID는 사용자가 페이지와 상호 작용하고자 할 때, 브라우저가 해당 상호 작용에 대한 응답으로 얼마나 빨리 반응하는지를 측정합니다. 예를 들어, 버튼 클릭과 같은 사용자 입력에 대한 브라우저의 응답 시간을 의미합니다. FID는 100밀리초 이하인 것이 좋습니다.
Cumulative Layout Shift (CLS): CLS는 페이지의 레이아웃이 얼마나 불안정하게 변경되는지를 측정합니다. 예를 들어, 로딩 중인 이미지가 레이아웃을 밀거나 변경하는 경우 불안정한 레이아웃 변경으로 간주됩니다. CLS는 0.1 이하인 것이 좋습니다.
Lighthouse : 웹 애플리케이션의 성능, 접근성, 최적화 수준 등을 평가하여 개선할 수 있는 지표들을 제공합니다. 개발자들이 웹 사이트의 품질을 쉽게 파악하고, 사용자 경험을 향상시키기 위해 널리 사용되는 도구 중 하나입니다. Lighthouse는 다음과 같은 주요 성능 평가 항목들을 제공합니다.
성능 (Performance): 웹 페이지의 로딩 속도와 렌더링 성능 등을 평가합니다. Largest Contentful Paint (LCP), First Contentful Paint (FCP), Speed Index 등의 지표를 제공하여 웹 페이지의 로딩 속도를 측정합니다.
접근성 (Accessibility): 웹 페이지의 접근성을 평가합니다. 웹 접근성 지침을 준수하고 있으며, 장애를 가진 사용자들도 웹 사이트를 이용할 수 있도록 보장하는지 확인합니다.
최적화 (Best Practices): 웹 개발의 모범 사례를 따르고 있는지 평가합니다. 웹 사이트의 코드와 구조가 최신 표준을 준수하고 있으며, 보안과 관련된 적절한 설정들을 가지고 있는지 확인합니다.
SEO: 검색 엔진 최적화를 평가합니다. 웹 사이트의 컨텐츠가 검색 엔진에서 쉽게 찾을 수 있도록 적절한 메타 데이터를 포함하고 있는지 평가합니다.