📌 챌린지 목표
✓ 리액트에서 변수를 효율적으로 관리하는 법 알아보기
✓ 테스트 코드를 활용해서 기능이 예상대로 작용하는지 확인해보기
✓ 최적화를 통해 사용자 경험을 개선하는 방법 찾아보기
원티드 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가 발생해야 우수
상호 작용 측정
누적 레이아웃 시프트(Cumulative Layout Shift, CLS)
시각적 안정성 측정
구글에서 개발한, 웹페이지의 품질을 개선할 수 있는 오픈 소스 형태의 자동화 도구
카테고리
- 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로 웹 성능 측정하고 개선하기*