테스트

---

유닛테스트 vs 통합테스트 vs E2E테스트를 비교하여 설명해주세요

1. 유닛테스트

• 개별 코드 유닛을 테스트하는 것으로, 코드의 가장 작은 단위를 테스트합니다. 주로 함수, 메서드 또는 모듈 단위로 테스트를 수행합니다.
• 의존성을 최소화하여 각각의 코드 단위를 격리하여 테스트하고, 다른 외부 요소들 ( DB,네트워크 ) 가 포함되지 않아야 한다.
• 통합 테스트, E2E 테스트와 비교하자면 가장 작은 단위로 테스트 하기 때문에 테스트의 양이 가장 적고 효율적이다. 다만 프로젝트 구조가 명확하지 않고, 단일 유닛의 기능이 자주 변경된다면 테스트 효율이 떨어질 수 있다.
  * 의존성(Dependencides): 여러가지 의미를 가지고 있지만 보통 한 모듈이 어떤 용도에 의해 다른 모듈에 불러와져서 사용되는 것을 의미

2. 통합테스트

• 두 개 이상의 모듈이 실제로 연결되는 상태를 확인해보는 테스트
• 모듈 간 연결을 통해 발생하는 오류를 검증
• 유닛 테스트에 비해 광범위하게 테스트할 수 있어서 리팩토링에 쉽게 깨지지 않는게 장점

3. E2E테스트

• End-to-End 테스트는 프로덕트를 사용자 관점에서 테스트 하는 방법
• DB,네트워크 등 여러 인프라가 갖추어진 상태에서 테스트
• 유저의 입장을 예상해서 시나리오를 작성하며 그에 맞춘 테스트를 진행하기 때문에, 전체 테스트 시간이 비교적 오래 걸리고 많은 테스트가 필요
• 다양한 앱의 의존관계가 정확히 작동하는 지 확인하며, 다양한 시스템 컴포넌트에 정확한 정보가 전달되는지 체크할 수 있음

리액트 테스트에 사용되는 도구들을 비교하여 설명해주세요

1. Jest

• Meta에서 만들어진 JavaScript 기반의 테스트용 프레임워크
• 프론트엔드 뿐만 아니라 node 환경에서 테스팅 가능
• 모킹, 스냅샷 테스팅, 코드 커버리지 등 다양한 기능을 내장하고 있어 많은 개발자들이 사용

2. React Testing Library (RTL)

• RTL은 엄밀히 따지자면 test runner는 아니지만 test runner를 위한 공간(virtual DOM)을 제공
• 테스트가 필요한 react 컴포넌트를 렌더링하는 역할
• 세부적인 구현보다 실제 사용자가 사용하는 부분만 테스트하여 잘 깨지지 않는 테스트를 만듦

최적화

---

CDN(Content Distributed Network)에 대해 설명해주세요

• 콘텐츠를 효율적으로 전달하기 위해 여러 노드를 가진 네트워크에 데이터를 저장하여 제공하는 시스템 또는 여러 장소에 걸쳐 분산된 서버들의 그룹

• CDN은 서버와 사용자 사이의 물리적인 거리를 줄여 콘텐츠 로딩에 소요되는 시간을 최소화한다. 그리고 각 지역에 캐시 서버를 분산 배치해, 근접한 사용자의 요청에 원본 서버가 아닌 캐시 서버가 콘텐츠를 전달함

• CDN은 Bootstrap,jQuery와 같은 라이브러리들의 Stylesheet 나 JavaScript 파일(정적 asset)을 전송하는데 널리 쓰인다.

• CDN의 장점

  • 인터넷 서비스 사용자(ISP/Internet Service Provider)에 직접 연결되어 데이터를 전송하기 때문에 콘텐츠 병목 현상(서버의 과부하)를 방지
  • 사용자가 거주하는 곳과 가까운 곳에 설치되기 때문에 물리적 거리로 인한 속도저하를 막음
  • CDN 서비스는 검증받은 최신 인증 방식을 채택하기 때문에 해당 서비스를 이용하는 것만으로도 보안등급이 올라감

• CDN의 단점

  • Cache 서버가 많이 없거나 성능이 안정적이지 않으면 CDN 서버에 문제가 발생했을 때 데이터를 불러올 수 없음.(*SPOF/ 단일 장애점 문제 : 한 지점이 중단되면 전체 시스템이 중단되는 현상)
  • 특정 국가나 지역만을 타깃으로 웹 서비스를 운영한다면 CDN 서비스를 활용할 필요가 없다. 오히려 불필요한 연결 지점(노드)만 늘어나서 웹 서비스 성능 저하의 원인이 될 수 있음.

Web Vitals에 대해 설명해주세요

• 2021년 5월 구글이 SEO를 향상시키기 위해 발표한 웹 페이지 품질 수치 기준. 구글에서는 하단에 설명할 3가지 요소를 합쳐서 'Core Web Vitals'라고 언급
• 크게 로딩 시간(loading performance), 상호작용(interactivity), 시각적 안정성(visual stability) 이 3가지 요소로 나뉜다.
• 로딩 시간: Largest Contentful Paint(최대 콘텐츠풀 페인트, LCP)/사용자가 URL을 요청한 시점부터 표시 영역의 가장 큰 시각 콘텐츠 요소를 렌더링을 마치는 데 걸리는 시간을 의미한다. 좋은 사용자 경험을 제공하려면 웹 페이지를 처음 로딩할 때 2.5초 이내에 LCP가 발생해야 한다.
• 상호작용: First Input Delay(최초 입력 지연, FID)/웹 페이지 사용자가 상호 작용을 했을 때 다음 행동을 하는 데 걸리는 시간을 의미한다. 단위는 ms(밀리세컨드)를 사용하며 100ms 이하는 좋음, 300ms 이하는 개선 필요, 300ms 초과는 상태가 나쁘다고 판단한다.
• 시각적 안정성: Cumulative Layout Shift(누적 레이아웃 시프트, CLS)/웹 페이지가 로딩하는 단계에서 레이아웃이 변경되는 정도를 의미한다.최적의 사용자 경험을 제공하려면 0.1 이하가 나타나야 하며 0.25 이하는 개선 필요, 0.25 초과는 나쁜 상태라고 볼 수 있다.

Lighthouse에 대해 설명해주세요

• 구글이 웹 페이지의 품질을 개선시키기 위해 만든 오픈 소스 기반의 퍼포먼스 측정 도구
• Chrome 브라우저 내 개발자도구(Developer Tools)에 내장되어 있어서 별도로 설치할 필요없이 단축키 F12나 '오른쪽 마우스 버튼 클릭-"검사" 항목 클릭-개발자 도구-Lighthouse 탭'을 통해 이용 가능
• 웹 페이지의 성능을 측정할 때 사용되는 기준
  • Performance: 웹 페이지의 로딩 속도 등 실제 성능 측정
  • Progressive Web App: PWA로 부르며, 웹과 네이티브 앱(모바일 전용 앱)의 기능 모두의 이점을 가지도록 만들어진 서비스인지 체크
  • Best Practices: Best Practices를 따라 개발되었는지 체크
  • Accessibility: 접근성/보통 폰트 사이즈, 메뉴간 간격 등을 측정한다.
  • SEO: Search Engine Optimization/검색 엔진 수집 최적화