📌 챌린지 목표
✓ 리액트에서 변수를 효율적으로 관리하는 법 알아보기
✓ 테스트 코드를 활용해서 기능이 예상대로 작용하는지 확인해보기
✓ 최적화를 통해 사용자 경험을 개선하는 방법 찾아보기

원티드 8월 프리온보딩 챌린지는 리액트 리팩토링 실전 가이드!
최근 리팩토링에 대한 이야기를 아는 친구와 나누었기에 더 관심이 갔는데..
열심히 참여해보도록 해야겠다

테스트

프로덕트의 안정적인 운영을 위해 필요

Unit VS. Integration VS. E2E

이상적인 테스트 개수 비율은 70/20/10

	단위	통합	E2E
시간	<	<	<
비용	<	<	<
테스트 대상	특정 모듈	여러 모듈	애플리케이션
테스트 목적	개발자의 의도	개발자의 의도	사용자의 동작

단위(Unit) 테스트

소스 코드의 특정 모듈(ex: 함수) 단위가 의도된 대로 동작하는지 검증하는 절차

• 참/거짓 판단
• 어느 부분이 문제인지 빠르게 파악할 수 있음
• 애플리케이션의 전체적인 플로우가 정상임을 보장하지는 않음

Sociable 테스트

의존성이 있는 코드와 함께 테스트

Solitary 테스트

모듈에 의해 실행되는 코드를 테스트 더블로 대체해 테스트

테스트 더블
테스트를 위해 사용되는 모의 객체/코드

통합(Integration) 테스트

여러 모듈이 합쳐진 하나의 기능을 테스트하는 것

• 모듈 간의 연결에서 발생하는 에러 검증 가능

Broad 테스트

의존성이 있는 모든 모듈이 연결된 상태를 테스트

Narrow 테스트

연결된 모듈을 테스트 더블로 대체하여 테스트

E2E(End To End) 테스트

애플리케이션의 흐름을 사용자 관점에서 처음부터 끝까지 테스트하는 것 (DB 및 여러 인프라가 갖추어진 상태)

• API 응답, GUI를 통해 화면에 컴포넌트가 실제로 렌더링되는 모든 과정까지 테스트
• 비용이 많이 드는 만큼 꼭 필요한 테스트만 수행할 필요가 있음
• 실제 사용자의 시나리오를 테스트함으로써, 애플리케이션의 무결성 증명 가능

장점

• 테스트 시나리오를 작하면서, 전체적인 프로젝트 흐름 파악 도움
• 다른 동료의 코드를 수정할 때 부담이 덜함 (사이드 이펙트를 잡아줌)

단점

• QA팀의 하위 호환
  • QA팀의 업무와 일치하여, QA팀은 고려했으나 개발팀이 생각치 못한 시나리오에서는 계속 버그가 발생할 수 있으며 중복되는 테스트가 발생해 효율성에 대해 의문이 들 수 있음
• 네트워크 딜레이 등 랜덤 변수로 인해 생기는 실패가 있음
• 실패 격리성이 떨어짐
• 테스트 코드 관리의 어려움
• 테스트 속도
  • 병렬 테스트로 일부 보완 가능

리액트 테스트에 사용할 수 있는 도구들

• Jest*
• React Testing Library*
• Mocha
• Enzyme
• Cypress
• Playwright
• testcafe
• nightwatch

최적화

CDN(Content Delivery/Distributed Network)

데이터 사용량이 많은 애플리케이션의 웹 페이지 로드 속도를 높이는 상호 연결된 서버 네트워크

• 대기 시간/네트워크 설계로 인해 발생하는 통신 지연 줄이기 위함
• 클라이언트와 웹 사이트 서버 간 중간 서버(CDN 서버)를 두어 효율성을 높임
  • 클라이언트-서버 통신 일부를 관리

장점

• 페이지 로드 시간 단축
• 대역폭 비용 절감
• 콘텐츠 가용성 재고
• 웹사이트 보안 강화

Web Vitals

웹에서 우수한 사용자 경험을 제공하는 데 파악해야 할 필수적인 품질 신호(지표)

최대 콘텐츠풀 페인트 (Largest Contentful Paint, LCP)

로딩 성능 측정

• 처음 로딩 후 2.5초 이내 LCP가 발생해야 우수

최초 입력 지연 (First Input Delay, FID)

상호 작용 측정

• 100밀리초 이하여야 우수

누적 레이아웃 시프트(Cumulative Layout Shift, CLS)

시각적 안정성 측정

• 0.1 이하여야 우수

Lighthouse

구글에서 개발한, 웹페이지의 품질을 개선할 수 있는 오픈 소스 형태의 자동화 도구

카테고리

• Performance : 웹 페이지 로딩 속도 등 실제 성능 측정
• Best Practices : Best Practice를 따라 개발되었는지 확인
• Accessibility : 접근성 확인 (폰트 사이즈, 메뉴 간 간격 등)
• Progressive Web App (PWA) : 웹과 네이티브 앱 기능 모두의 이점을 가지도록 만든 서비스인지 확인
• SEO : 검색 엔진 수집 최적화 측정

지표

• FP(First Paint) : 빈 화면에서 무언가 처음으로 그려지기 시작하는 첫 순간
• First Contentful Paint(FCP) : 텍스트나 이미지가 그려지는 첫 순간
• First Meaningful Paint(FMP) : 사용자에게 의미있는 콘텐츠가 그려지기 시작하는 첫 순간
• TTI (Time To Interactive) : 자바스크립트 초기 실행이 완료되어 사용자가 직접 행동을 취할 수 있는 순간
  외에도 다양하게 존재

참고

테스트

E2E 테스트 도입 경험기
[개발인턴] 테스트 방식에 대한 적절성 및 고민 (with TDD)
[Testing] 2. 프론트엔드, 어떻게 테스트 할 것인가
모던 프론트엔드 테스트 전략 — 1편(Testing Overview)*

최적화

CDN이란 무엇인가요*
Web Vitals*
[웹] Web Vital - FID, CLS, FCP*
Lighthoust 지표
Lighthouse로 웹 성능 측정하고 개선하기*