유닛 테스트
최소 단위의 코드를 테스트하여 개별 단위가 올바르게 작동하는지 확인합니다. 개별 유닛이 올바르게 동작하는지 확인하여 코드의 신뢰성과 안정성을 높일 수 있습니다.
통합 테스트
개별 컴포넌트나 단위들이 서로 상호작용하는 방식을 검증합니다. 각각의 유닛들이 상호작용하며 예상대로 작동하는지 확인하여 시스템의 안정성과 기능성을 보장합니다.
사용자 관점에서의 테스트
E2E 테스트
E2E 테스트는 소프트웨어의 전체적인 흐름을 사용자 관점에서 테스트합니다. 실제 사용자와 유사한 환경에서 애플리케이션의 전체 시나리오를 테스트합니다. 사용자 시나리오를 기반으로 애플리케이션이 예상대로 작동하는지 확인하여 사용자 경험을 보장합니다.
2. 리액트 테스트에 사용되는 도구들을 비교하여 설명해주세요.
유닛, 통합 테스트를 위한 테스트러너와 테스트 도구 모음
테스트러너 (Test Runner)
테스트러너은 테스트를 실행하는 주체로, 테스트 코드를 관리하고 테스트 환경에서 테스트들을 실행하는 역할을 합니다. 테스트 코드의 실행, 결과 수집 및 보고서 생성 등을 담당하여 테스트의 실행 과정을 관리합니다. Jest, Mocha, Jasmine, Karma 등이 있습니다.
테스트 도구 모음 (Test Tooling)
테스트 도구 모음은 테스트러너와는 조금 다른 개념으로, 테스트 코드 작성과 관련된 여러 가지 도구들을 모아놓은 집합입니다. 테스트 코드를 작성하고 실행하는 데에 사용되는 라이브러리, 프레임워크, 도우미 함수 등을 포함합니다. React Testing Library, Testing Library, Enzyme 등은 리액트 컴포넌트를 테스트하는 데에 사용됩니다.
E2E 테스트를 위한 도구
Cypress
Cypress는 웹 애플리케이션의 E2E 테스트를 위한 자동화 테스트 프레임워크입니다. 실제 브라우저 내에서 애플리케이션을 실행하며, DOM 조작과 네트워크 요청을 모니터링하여 테스트를 진행합니다. 강력한 디버깅 도구와 시각화 기능을 제공하여 테스트 실행을 보다 쉽게 관찰할 수 있습니다.
최적화
1. CDN(Content Distributed Network)에 대해 설명해주세요.
CDN이란?
콘텐츠 전송 네트워크(CDN)는 데이터 사용량이 많은 애플리케이션의 웹 페이지 로드 속도를 높이는 상호 연결된 서버 네트워크입니다. 사용자가 웹 사이트를 방문할 때 해당 웹 사이트 서버의 데이터는 사용자의 컴퓨터에 도달하기 위해 인터넷을 통해 이동해야 하는데, 사용자가 해당 서버에서 멀리 떨어져 있는 경우 동영상 또는 웹 사이트 이미지와 같은 대용량 파일을 로드하는 데 시간이 오래 걸립니다. 대신 웹 사이트 콘텐츠는 지리적으로 사용자와 가까운 CDN 서버에 저장되며 컴퓨터에 훨씬 빨리 도달할 수 있습니다.
CDN의 장점
페이지 로드 시간 단축 / 대역폭 비용 절감 / 콘텐츠 가용성 제고 / 웹 사이트 보안 강화
CDN의 작동방식
캐싱 : 오리진 서버가 정적 콘텐츠에 대하여 원격 방문자에게 응답을 보낼 때 해당 방문자와 지리적으로 가장 가까운 CDN POP에 응답 복사본을 보냅니다. CDN POP 서버는 복사본을 캐싱된 파일로 저장합니다. 다음에 해당 방문자 또는 해당 위치에 있는 다른 방문자가 동일한 요청을 하면, 오리진 서버가 아닌 캐싱 서버가 응답을 보냅니다.
동적 가속 : 동적 가속은 웹 애플리케이션과 클라이언트 사이의 중개 CDN 서버로 인해 발생하는 동적 웹 콘텐츠 요청에 대한 서버 응답 시간을 단축하는 것입니다. 사용자 요청이 있을 때마다 콘텐츠가 변경될 수 있기 때문에 동적 웹 콘텐츠에서는 캐싱이 제대로 작동하지 않습니다. CDN 서버는 모든 동적 요청에 대해 오리진 서버와 다시 연결해야 하지만 자신과 오리진 서버 간의 연결을 최적화하여 프로세스를 가속화합니다.
엣지 로직 계산 : 사용자 요청을 검사하고 캐싱 동작을 수정, 잘못된 사용자 요청을 확인하고 처리. 응답하기 전에 콘텐츠를 수정하거나 최적화.
2. Web Vitals에 대해 설명해주세요.
Core Web Vitals는 구글이 웹사이트 성능 최적화를 위해 중요하다고 판단한 세가지 지표를 의미합니다. 이 지표들은 사용자 경험과 밀접하게 관련이 있으며, 웹사이트의 속도, 안정성, 시각적 안정성 등과 같은 핵심 요소들을 측정합니다. 이에따라 개발자들이 성능 최적화를 위해 우선 순위를 결정할 수 있도록 돕는 역할을 합니다.
LCP : 'Largest Contentful Paint'. 사용자가 웹 페이지를 로드할 때 페이지의 가장 큰 콘텐츠 요소가 브라우저 화면에서 얼마나 빨리 렌더링되는지 측정하는 지표
FID : 'First Input Delay'. 사용자가 웹 페이지의 상호작용 요소를 클릭한 후, 실제로 브라우저에서 반응이 시작되기까지 걸리는 시간을 측정하는 지표.
CLS : 'Cumulative Layout Shift'. 웹 페이지에서 요소들의 이동이나 크기 조정 등 레이아웃이 예상치 못하게 변경되는 빈도와 양을 측정하는 지표.
3. Lighthouse에 대해 설명해주세요.
Lighthouse는 구글에서 제공하는 웹 페이지 품질 개선을 위한 오픈 소스로 자동화 도구입니다. 일반 퍼블릭 웹 페이지 또는 인증이 필요한 페이지 등 모든 웹 페이지에 실행할 수 있습니다.
테스트
1. 유닛테스트 vs 통합테스트 vs E2E테스트를 비교하여 설명해주세요.
개발자 관점에서의 테스트
유닛 테스트 최소 단위의 코드를 테스트하여 개별 단위가 올바르게 작동하는지 확인합니다. 개별 유닛이 올바르게 동작하는지 확인하여 코드의 신뢰성과 안정성을 높일 수 있습니다.
통합 테스트 개별 컴포넌트나 단위들이 서로 상호작용하는 방식을 검증합니다. 각각의 유닛들이 상호작용하며 예상대로 작동하는지 확인하여 시스템의 안정성과 기능성을 보장합니다.
사용자 관점에서의 테스트
E2E 테스트 E2E 테스트는 소프트웨어의 전체적인 흐름을 사용자 관점에서 테스트합니다. 실제 사용자와 유사한 환경에서 애플리케이션의 전체 시나리오를 테스트합니다. 사용자 시나리오를 기반으로 애플리케이션이 예상대로 작동하는지 확인하여 사용자 경험을 보장합니다.
2. 리액트 테스트에 사용되는 도구들을 비교하여 설명해주세요.
유닛, 통합 테스트를 위한 테스트러너와 테스트 도구 모음
테스트러너 (Test Runner) 테스트러너은 테스트를 실행하는 주체로, 테스트 코드를 관리하고 테스트 환경에서 테스트들을 실행하는 역할을 합니다. 테스트 코드의 실행, 결과 수집 및 보고서 생성 등을 담당하여 테스트의 실행 과정을 관리합니다. Jest, Mocha, Jasmine, Karma 등이 있습니다.
테스트 도구 모음 (Test Tooling) 테스트 도구 모음은 테스트러너와는 조금 다른 개념으로, 테스트 코드 작성과 관련된 여러 가지 도구들을 모아놓은 집합입니다. 테스트 코드를 작성하고 실행하는 데에 사용되는 라이브러리, 프레임워크, 도우미 함수 등을 포함합니다. React Testing Library, Testing Library, Enzyme 등은 리액트 컴포넌트를 테스트하는 데에 사용됩니다.
E2E 테스트를 위한 도구
Cypress Cypress는 웹 애플리케이션의 E2E 테스트를 위한 자동화 테스트 프레임워크입니다. 실제 브라우저 내에서 애플리케이션을 실행하며, DOM 조작과 네트워크 요청을 모니터링하여 테스트를 진행합니다. 강력한 디버깅 도구와 시각화 기능을 제공하여 테스트 실행을 보다 쉽게 관찰할 수 있습니다.
최적화
1. CDN(Content Distributed Network)에 대해 설명해주세요.
CDN이란? 콘텐츠 전송 네트워크(CDN)는 데이터 사용량이 많은 애플리케이션의 웹 페이지 로드 속도를 높이는 상호 연결된 서버 네트워크입니다. 사용자가 웹 사이트를 방문할 때 해당 웹 사이트 서버의 데이터는 사용자의 컴퓨터에 도달하기 위해 인터넷을 통해 이동해야 하는데, 사용자가 해당 서버에서 멀리 떨어져 있는 경우 동영상 또는 웹 사이트 이미지와 같은 대용량 파일을 로드하는 데 시간이 오래 걸립니다. 대신 웹 사이트 콘텐츠는 지리적으로 사용자와 가까운 CDN 서버에 저장되며 컴퓨터에 훨씬 빨리 도달할 수 있습니다.
CDN의 장점 페이지 로드 시간 단축 / 대역폭 비용 절감 / 콘텐츠 가용성 제고 / 웹 사이트 보안 강화
CDN의 작동방식 캐싱 : 오리진 서버가 정적 콘텐츠에 대하여 원격 방문자에게 응답을 보낼 때 해당 방문자와 지리적으로 가장 가까운 CDN POP에 응답 복사본을 보냅니다. CDN POP 서버는 복사본을 캐싱된 파일로 저장합니다. 다음에 해당 방문자 또는 해당 위치에 있는 다른 방문자가 동일한 요청을 하면, 오리진 서버가 아닌 캐싱 서버가 응답을 보냅니다.
동적 가속 : 동적 가속은 웹 애플리케이션과 클라이언트 사이의 중개 CDN 서버로 인해 발생하는 동적 웹 콘텐츠 요청에 대한 서버 응답 시간을 단축하는 것입니다. 사용자 요청이 있을 때마다 콘텐츠가 변경될 수 있기 때문에 동적 웹 콘텐츠에서는 캐싱이 제대로 작동하지 않습니다. CDN 서버는 모든 동적 요청에 대해 오리진 서버와 다시 연결해야 하지만 자신과 오리진 서버 간의 연결을 최적화하여 프로세스를 가속화합니다.
엣지 로직 계산 : 사용자 요청을 검사하고 캐싱 동작을 수정, 잘못된 사용자 요청을 확인하고 처리. 응답하기 전에 콘텐츠를 수정하거나 최적화.
2. Web Vitals에 대해 설명해주세요.
Core Web Vitals는 구글이 웹사이트 성능 최적화를 위해 중요하다고 판단한 세가지 지표를 의미합니다. 이 지표들은 사용자 경험과 밀접하게 관련이 있으며, 웹사이트의 속도, 안정성, 시각적 안정성 등과 같은 핵심 요소들을 측정합니다. 이에따라 개발자들이 성능 최적화를 위해 우선 순위를 결정할 수 있도록 돕는 역할을 합니다.
3. Lighthouse에 대해 설명해주세요.
Lighthouse는 구글에서 제공하는 웹 페이지 품질 개선을 위한 오픈 소스로 자동화 도구입니다. 일반 퍼블릭 웹 페이지 또는 인증이 필요한 페이지 등 모든 웹 페이지에 실행할 수 있습니다.
참고
https://gatsbybosungblogmain.gatsbyjs.io/tdd1/ https://ui.toast.com/fe-guide/ko_TEST#cypress https://tecoble.techcourse.co.kr/post/2021-05-25-unit-test-vs-integration-test-vs-acceptance-test/ https://aws.amazon.com/ko/what-is/cdn/ https://yozm.wishket.com/magazine/detail/2036/ https://hayeondev.gatsbyjs.io/230220-lighthouse/