테스트, 최적화

이 앱이, 코드들이 제대로 동작을 하고 있는 것인가?

 

대부분 들어가는 비용 대비 돌아오는 효과가 적다고 생각하여 테스트를 작성하지 않는다.

예시로 어떠한 간단한 컴포넌트가 제대로 렌더링이 되어 동작한다는 것을 브라우저에서 확인해야 한다면, 그러한 것들을테스트 코드로 작성했을 때, 브라우저에서 확인하지 않고도 확신을 얻을 수 있을까?

---

// 테스트

TDD란?

TDD(Test Driven Development)의 약자로 '테스트 주도 개발' 이라고 한다.TDD와 일반적인 개발방식의 가장 큰 차이점은 테스트 코드를 작성한 뒤에 실제 코드를 작성한다는 것이다.디자인(설계) 단계에서 프로그래밍 목적을 반드시 미리 정의해야만 하고, 무엇보다 테스트해야 할지 미리 정의 해야한다.

 

테스트 코드를 작성하는 도중 발생하는 예외 사항은 테스트 케이스에 추가하고 설계를 개선한다.이후 테스트가 통과된 코드만을 코드 개발 단계에서 실제 코드로 작성한다.

 

이러한 반복적인 단계까 진행되면서 자연스럽게 버그를 줄인다.

---

// TDD의 종류

단위 테스트 vs 통합 테스트 vs E2E 테스트

 

단위 테스트 (Unit Test)

가장 작은 단위의 코드를 테스트하는 기법으로 해당 부분만 독립적으로 테스트하여 어떤 코드를 리팩토링하여도 빠르게 문제 여부를 확인할 수 있다. 테스팅에 대한 시간과 비용을 절감할 수 있고, 새로운 기능 추가 시 수시로 빠르게 테스트 할 수 있다.

어느 부분이 문제인지 빠르게 파악할 수 있지만 전체적인 플로우가 정상임을 보장히자 않기 때문에 이점을 유의해야 한다.

 

FIRST라는 5가지 규칙을 따르면 조금 더 깨끗한 테스트 코드를 만들 수 있다.

1. Fast : 테스트는 빠르게 동작하여 자주 돌릴 수 있어야한다.

2. Independent : 각각의 테스트는 독립적이며 서로 의존해서는 안된다.

3. Repeatable : 어느 환경에서도 반복 가능해야 한다.

4. Self-Validating : 테스트는 성공 또는 실패로 bool값 으로 결과를 내어 자체적으로 검증 되어야 한다.

5. Timely : 테스트는 적시에 즉, 테스트하려는 실제 코드를 구현하기 직전에 구현해야 한다.

 

 

통합 테스트 (Integration Test)

단위 테스트보다 더 큰 동작을 달성하기 위해 여러 모듈들을 모아 의도대로 작동하는지 확인하는 테스트이다.

두 가지 이상의 요소가 함께 상효작용 할 때 개발자가 의도한 대로 동작하는지 테스트하는 기법이다.

 

단위 테스트에서 발견하기 어려운 버그를 찾을 수 있다는 장점이 있지만 단위 테스트보다 더 많은 코드를 테스트하기 때문에 신뢰성이 떨어질 수 있으며 어디서 에러가 발생했는지 확인하기 쉽지 않아 유지보수하기 힘들다는 점도 있다.

 

 

 

E2E 테스트 (End to End Test)

애플리케이션의 흐름을 처음부터 끝까지 테스트하는 것을 의미하며 실제 사용자 관점에서 테스트를 진행한다.

유닛 테스트나 통합 테스트는 모듈의 무결성을 증멸할 수 있는 강력한 테스트이지만, 모듈의 무결성이 애플리케이션 동작의 무결성까지는 증명해 줄 수 없다. 그래서 실제 사용자의 시나리오를 테스트함으로써 애플리케이션 동작을 테스트하여 애플리케이션의 무결성을 증명한다.

 

사용자의 시나리오를 검증하다 보니 다른 테스트 보다 많은 시간이 소요된다.

뿐만아니라 유닛 테스트나 통합 테스트 같은 가벼운 테스트들도 테스트코드 관리가 쉽지 않은데, 사용자의 동작을 테스트하는 E2E 테스트를 수정하고 관리하는 일은 상당히 어려운 일이다.

 

E2E 테스트는 어플리케이션의 전체적인 흐름을 테스트한다고 생각하면 좋을 것 같다.

---

React Test에 주로 사용되는 도구들.

 

Jest 

는 javascript 테스트 프레임워크로 CRA에 기본 내장되어 있다. React와 함께 사용하기에 매우 편리하며, 주로 단위 테스트와 통합 테스트에 적합하다.

 

React Testing Library는 React 컴포넌트를 테스트하기 위한 라이브러리다. 비동기 처리 테스트, 렌더링과 상태변경 테스트 등 유용하게 사용될 수 있어 단위테스트나 통합테스트에 적합하다.

 

Enzyme는 React 컴포넌트를 테스트하기 위한 도구이다. 컴포넌트의 렌더링, 상태접근, 이벤트 시뮬레이션 등을 제고하여 보다 쉽게 테스트할 수 있도록 도와준다.

 

Cypress와 Puppeteer는 E2E테스트를 위해 사용되는 도구이다. 브라우저와 상호작용하여 사용자 인터페이스를 시뮬레이션하고 테스트하는데 적합하다.

 

---

// 최적화

 

CDN(Content Distributed Network)이란?

 

지리적으로 분산된 서버들을 연결한 네트워크로서 웹 컨텐츠의 복사본을 사용자에 가까운 곳에 두거나 동적 컨텐츠의 전달을 활성화하여 웹 성능 및 속도를 향상할 수 있게 하는 것을 말한다.

 

일반적으로 웹 서버는 특정 위치에 위치하고, 사용자들은 이 웹서버에 직접 요청을 보내서 컨텐츠를 가져오게 된다. 이렇게 직접 서버에 요청을 보내면 물리적 거리에 의한 지연 또는 서버 부하가 증가할 수 있을 것이다.

CDN은 이러한 문제를 해결하기 위해 여러개의 서버들로 컨텐츠를 분산 시킨다.

 

예시로 한국에 웹사이트가 있다. 미국에 거주하는 누군가 이 웹사이트에 액세스할 경우, CDN은 한국에 있는 원래 서버가 아니라 미국에 있는 에지서버, 즉 사용자에게 더 가까운서버에서 해당 웹 페이지를 서비스한다.

---

Web Vitals란?

 

사용자 경험을 측정하고 평가하는 데 사용되는 지표들의 모음을 뜻한다.

웹 페이지의 로딩속도, 상호작용 대기시간, 시각적 안정성 등을 평가하는 세 가지 핵심 지표로 구성되어 있다.

 

• LCP(Largest Contentfull Paint)
  인식되는 로드 속도를 측정하는 항목으로 주요 콘텐츠가 로드되었을 가능성 높은시점에 로드타임 라인에 표시한다.
• FID(First Input Delay)
  응답성을 측정하는 항목으로 사용자가 페이지와 처음 상호작용하려고 할 때 느끼는 경험을 정량화 한다.
• CLS(Cumulative Layout Shift)
  시각적 안정성을 측정하는 항목으로, 눈에 보이는 페이지 콘텐츠의 예기치 않은 레이아웃 변화량을 정령화한다.

---

Lighthouse란?

 

웹 성능 측정 도구로 웹 사이트의 성능, 접근성, 사용자 경험등 다양한 측면을 평가하여 개선점을 제시하는데 사용된다. 웹 개발자들이 상용자 경험을 최적화하고 웹 사이트의 성능을 향상시키는데 도움을 준다.

 

웹 페이지의 로딩속도, 페이지 구성, 컨텐츠를 렌더링하는데 걸리는 시간 등 성능과 관련된 치표를 측정한다.

HTTPS 사용 여부, 쿠키의 보안 설정 등과 같은 보안 관련 사항도 평가한다.

SEO(검색 엔진 최적화)를 평가하여 검색 엔진에서 웹 사이트를 더 잘 인덱싱하고 노출시킬 수 있는 방법을 제시한다.

 

 

나도 라이트하우스를 직접 사용해본 경험이 있다. 성능 측정 결과를 쭉 나열하여 보여주고 문제점을 어떠한 방식으로 해결해 나아가면 좋은지 알려주어 주니어 개발자들도 쉽게 웹 사이트의 성능을 개선해 나아갈 수 있다.