• 함수 하나하나 같이 작은 단위로 테스트하는 것
• 일반적으로 Class나 Method를 테스트하는 범위로 정해지며, 가장 핵심적인 테스트
• 빈번히 일어나는 개발 단계에서의 버그를 잡아주고, 설계 단계에서 더욱 명확하게 메서드를 나눌 수 있음
통합 테스트
• 서로 다른 시스템들이 상호작용이 잘 이루어지는지 테스트 하는것
• Unit test와 달리 개발자가 변경할 수 없는 부분 (ex. 외부 라이브러리, db)까지 묶어서 검증할 때 사용되는 테스트
E2E 테스트
• 사용자가 실제 프로그램을 사용하는 상황을 테스트하는 것( End to End )
• 비즈니스 쪽에 초점을 두어 실제 시나리오대로 잘 동작하는지 테스트 하는 것
• Acceptance test(인수테스트)와 같은 의미로 사용
2. 리액트 테스트에 사용되는 도구들을 비교하여 설명해주세요
React Testing Library
• Facebook에서는 React Testing Library 사용을 권장
• 사용자가 컴포넌트를 사용하는 것처럼 테스트를 작성할 수 있도록 설계
• Behavior Driven Test(행위 주도 테스트) 방법론이 대두 되면서 함께 주목 받기 시작한 테스팅 라이브러리
• <h2> 태그가 <h3> 태그로 바뀌었을 때 Implementation Driven Test 방법론으로 작성된 테스트는 깨지지만, Behavior Driven Test 방밥론으로 작성된 테스트는 깨지지 않음
• 애플리케이션 입장에서 봤을 때는 구현의 디테일이 바뀐 것이지만, 사용자 입장에서는 제목 이라는 텍스트가 화면있다는 사살은 변함이 없기 때문
Enzyme
• React v16 이하에서 React 컴포넌트의 출력을 쉽게 검증하고 조작하고 탐색할 수 있음
• RTL이 등장하기 전에는 Airbnb에서 만든 Enzyme이라는 테스팅 라이브러리가 많이 사용
• Enzyme은 Implementation Driven Test 방법론을 따르는 테스트를 작성하기에 적합
• Enzyme은 실제 브라우저 DOM이 아닌, React가 만들어내는 가상 DOM을 기준으로 테스트를 작성
• 테스트 대상 React 컴포넌트에 어떤 prop이 넘어가고, 현재 state이 어떻게 되는지에 대해서 검증하기 용이
최적화
1. CDN(Content Distributed Network)에 대해 설명해주세요
• 콘텐츠 전송 네트워크(CDN)는 데이터 사용량이 많은 애플리케이션의 웹 페이지 로드 속도를 높이는 상호 연결된 서버 네트워크
• 사용자가 웹 사이트를 방문할 때 해당 웹 사이트 서버의 데이터는 사용자의 컴퓨터에 도달하기 위해 인터넷을 통해 이동. 사용자가 해당 서버에서 멀리 떨어져 있는 경우 동영상 또는 웹 사이트 이미지와 같은 대용량 파일을 로드하는 데 시간이 오래 걸림. 대신 웹 사이트 콘텐츠는 지리적으로 사용자와 가까운 CDN 서버에 저장되며 컴퓨터에 훨씬 빨리 도달
2. Web Vitals에 대해 설명해주세요
• 훌륭한 사용자 경험을 제공하는 데 필수라고 생각하는 품질 지표에 대한 통합적 지침을 제시하는 Google 이니셔티브
• Web Vitals 이니셔티브는 전망을 단순화하고, 사이트에서 가장 중요한 메트릭인 Core Web Vitals에 초점을 맞추도록 지원
Largest Contentful Paint(최대 콘텐츠풀 페인트, LCP)
• 로딩 성능을 측정
• 우수한 사용자 경험을 제공하려면 페이지가 처음으로 로딩된 후 2.5초 이내에 LCP가 발생해야 함
First Input Delay(최초 입력 지연, FID)
• 상호 작용을 측정
• 우수한 사용자 경험을 제공하려면 페이지의 FID가 100밀리초 이하여야 함
Cumulative Layout Shift(누적 레이아웃 시프트, CLS)
• 시각적 안정성을 측정
• 우수한 사용자 경험을 제공하려면 페이지에서 0.1 이하의 CLS를 유지해야 함
3. Lighthouse에 대해 설명해주세요
• Lighthouse는 구글에서 개발한, 웹 페이지의 품질을 개선할 수 있는 오픈 소스 형태의 자동화 도구
• 일반 퍼블릭 웹 페이지 또는 인증이 필요한 페이지 등 모든 웹 페이지에 실행할 수 있음
• Lighthouse는 사이트의 성능, 접근성, SEO 등에 대한 전반적인 진단을 해줌
LightHouse 각 카테고리가 측정하는 내용
Performance : 웹 페이지의 로딩 속도 등 실제 성능을 측정
Best practices : Best practices를 따라 개발되었는지 확인
Accessibility : 접근성 확인. 폰트 사이즈, 메뉴간 간격 등을 측정
Progressive Web App (PWA) : 웹과 네이티브 앱의 기능 모두의 이점을 가지도록 만들어진 서비스인지 체크
SEO : Search Engine Optimization의 약자로 검색 엔진 수집 최적화 측정
테스트
1. 유닛테스트 vs 통합테스트 vs E2E테스트를 비교하여 설명해주세요
유닛 테스트
• 함수 하나하나 같이 작은 단위로 테스트하는 것 • 일반적으로 Class나 Method를 테스트하는 범위로 정해지며, 가장 핵심적인 테스트 • 빈번히 일어나는 개발 단계에서의 버그를 잡아주고, 설계 단계에서 더욱 명확하게 메서드를 나눌 수 있음
통합 테스트
• 서로 다른 시스템들이 상호작용이 잘 이루어지는지 테스트 하는것 • Unit test와 달리 개발자가 변경할 수 없는 부분 (ex. 외부 라이브러리, db)까지 묶어서 검증할 때 사용되는 테스트
E2E 테스트
• 사용자가 실제 프로그램을 사용하는 상황을 테스트하는 것( End to End ) • 비즈니스 쪽에 초점을 두어 실제 시나리오대로 잘 동작하는지 테스트 하는 것 • Acceptance test(인수테스트)와 같은 의미로 사용
2. 리액트 테스트에 사용되는 도구들을 비교하여 설명해주세요
React Testing Library
• Facebook에서는 React Testing Library 사용을 권장 • 사용자가 컴포넌트를 사용하는 것처럼 테스트를 작성할 수 있도록 설계 •
Behavior Driven Test(행위 주도 테스트) 방법론이 대두 되면서 함께 주목 받기 시작한 테스팅 라이브러리 •<h2>태그가<h3>태그로 바뀌었을 때Implementation Driven Test 방법론으로 작성된 테스트는 깨지지만,Behavior Driven Test 방밥론으로 작성된 테스트는 깨지지 않음 • 애플리케이션 입장에서 봤을 때는 구현의 디테일이 바뀐 것이지만, 사용자 입장에서는 제목 이라는 텍스트가 화면있다는 사살은 변함이 없기 때문Enzyme
• React v16 이하에서 React 컴포넌트의 출력을 쉽게 검증하고 조작하고 탐색할 수 있음 • RTL이 등장하기 전에는 Airbnb에서 만든 Enzyme이라는 테스팅 라이브러리가 많이 사용 •
Enzyme은Implementation Driven Test 방법론을 따르는 테스트를 작성하기에 적합 •Enzyme은 실제 브라우저 DOM이 아닌, React가 만들어내는 가상 DOM을 기준으로 테스트를 작성 • 테스트 대상 React 컴포넌트에 어떤 prop이 넘어가고, 현재 state이 어떻게 되는지에 대해서 검증하기 용이최적화
1. CDN(Content Distributed Network)에 대해 설명해주세요
•
콘텐츠 전송 네트워크(CDN)는 데이터 사용량이 많은 애플리케이션의 웹 페이지 로드 속도를 높이는 상호 연결된 서버 네트워크 • 사용자가 웹 사이트를 방문할 때 해당 웹 사이트 서버의 데이터는 사용자의 컴퓨터에 도달하기 위해 인터넷을 통해 이동. 사용자가 해당 서버에서 멀리 떨어져 있는 경우 동영상 또는 웹 사이트 이미지와 같은 대용량 파일을 로드하는 데 시간이 오래 걸림. 대신 웹 사이트 콘텐츠는 지리적으로 사용자와 가까운CDN 서버에 저장되며 컴퓨터에 훨씬 빨리 도달2. Web Vitals에 대해 설명해주세요
• 훌륭한 사용자 경험을 제공하는 데 필수라고 생각하는 품질 지표에 대한 통합적 지침을 제시하는 Google 이니셔티브 •
Web Vitals이니셔티브는 전망을 단순화하고, 사이트에서 가장 중요한 메트릭인Core Web Vitals에 초점을 맞추도록 지원Largest Contentful Paint(최대 콘텐츠풀 페인트, LCP)
• 로딩 성능을 측정 • 우수한 사용자 경험을 제공하려면 페이지가 처음으로 로딩된 후 2.5초 이내에 LCP가 발생해야 함
First Input Delay(최초 입력 지연, FID)
• 상호 작용을 측정 • 우수한 사용자 경험을 제공하려면 페이지의 FID가 100밀리초 이하여야 함
Cumulative Layout Shift(누적 레이아웃 시프트, CLS)
• 시각적 안정성을 측정 • 우수한 사용자 경험을 제공하려면 페이지에서 0.1 이하의 CLS를 유지해야 함
3. Lighthouse에 대해 설명해주세요
•
Lighthouse는 구글에서 개발한, 웹 페이지의 품질을 개선할 수 있는 오픈 소스 형태의 자동화 도구 • 일반 퍼블릭 웹 페이지 또는 인증이 필요한 페이지 등 모든 웹 페이지에 실행할 수 있음 •Lighthouse는사이트의 성능,접근성,SEO등에 대한 전반적인 진단을 해줌LightHouse 각 카테고리가 측정하는 내용
Performance: 웹 페이지의 로딩 속도 등 실제 성능을 측정Best practices: Best practices를 따라 개발되었는지 확인Accessibility: 접근성 확인. 폰트 사이즈, 메뉴간 간격 등을 측정Progressive Web App (PWA): 웹과 네이티브 앱의 기능 모두의 이점을 가지도록 만들어진 서비스인지 체크SEO: Search Engine Optimization의 약자로 검색 엔진 수집 최적화 측정