search

jasonkang14 / wanted_preonboarding_frontend_august

15 stars 1 forks source link

[사전과제] 프리온보딩 프론트엔드 챌린지 #151

Open blcklamb opened 1 year ago

blcklamb commented 1 year ago

테스트

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

유닛테스트

통합 테스트

E2E 테스트

프론트엔드 테스트에는 위 세 가지 테스트의 조합으로 구성되어 있다. 각 테스트는 코드 퀄리티, 컴포넌트 간의 기능성, UX를 보증하는 데에 주 목적을 가지고 있다.

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

Jest

주로 쓰이는 React 테스트 프레임워크.

React Testing Library

테스트 모범 사례를 장려하도록 설계된 경량화된 사용자 중심 테스트 라이브러리

Enzyme

React용 테스트 유틸리티 라이브러리

어떤 툴을 쓰는지는 테스트 철학, 팀 선호도, 애플리케이션 별 테스트 필요도에 따라 달라진다. 많은 개발자들은 단순함과 견고함을 따져 Jest + React Testing Library 조합을 선호한다고 한다.

최적화

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

웹 콘텐츠를 보다 효율적으로 제공하고 프론트엔드 최적화를 위해 전 세계에 전략적으로 위치한 서버의 분산 네트워크

작동 방식

유저가 웹 사이트에 접근했을 때, 웹 사이트가 호스트된 기존 서버가 아니라 CDN에 있는 가장 가까운 엣지 서버가 요청이 라우트된다. 엣지 서버는 유저와 지리적으로 더 가까운데, 이는 물리적인 거리를 줄여 데이터 전송에 필요한 네트워크 이동 시간도 줄일 수 있다. 엣지 서버는 이미지, CSS, JavaScript 파일과 같은 웹 사이트의 정적 asset은 물론, CDN 설정으로 동적으로 생성된 콘텐츠를 캐싱할 수 있다. 따라서 동일한 콘텐츠에 대해 이후 사용자 요청은 가까운 엣지 서버에서 제공되므로 로드 시간이 빨라지고 원본 서버 로드가 줄어든다. 또한 CDN은 데이터 압축, HTTP/2 및 TCP 최적화와 같은 기술을 사용하여 콘텐츠 전송 속도를 더욱 향상시킨다.

장점

Web Vitals에 대해 설명해주세요

유저 참여 및 만족도에 직접적인 영향을 미치는 웹의 UX 필수적인 퍼포먼스 수치를 측정하는 기준

LCP(Largest Contentful Paint)

가장 큰 콘텐츠(주로 이미지, 비디오, 텍스트 블록)가 완전 렌더링되어 사용자에게 보이기까지 걸리는 시간

  • LCP 최적화 방법
  • 효율적인 이미지 포맷을 사용하고, 크기를 줄이기 위해 이미지 압축
  • 중요한 콘텐츠의 경우 빨리 렌더링될 수 있도록 우선순위 적용
  • 서버 응답 시간을 최적화하고 빠른 웹 호스팅 서비스 이용

FID(First Input Delay)

첫 유저 상호작용과 브라우저의 응답 간의 시간

  • FID 최적화 방법
  • 코드 최적화 및 장시간 태스크 제거를 통해 JavaScript 실행 시간을 최소화
  • JavaScript 재컴파일 최소화 위해 브라우저 캐시를 사용
  • 웹 작업자(web worker)를 사용하여 메인 스레드에서 무거운 작업을 오프로드하는 것을 고려

CLS(Cumulative Layout Shift)

예기치 않은 레이아웃 변화와 같은, 로드 단계에서 웹 페이지의 시각적 안정성 측정

  • CLS 최적화 방법
  • 로드하는 동안 크기가 변경되지 않도록 미디어 요소에 대한 명시적 크기 설정
  • 레이아웃 변경을 피하기 위해 광고 및 동적으로 삽입된 콘텐츠를 위한 공간 확보
  • 의도치 않은 레이아웃 변경 방지 위해 CSS 전환 및 애니메이션 사용 주의

그 외

Google Search Console과 PageSpeed Insights와 같은 툴로 계산 가능. Web Vital을 최적화하면서 웹 사이트를 빠르고 응답성이 뛰어나며 사용자 친화적으로 만들 수 있다. 이는 검색 엔진 순위를 높이고 사용자 참여 또한 높일 수 있다.

Lighthouse에 대해 설명해주세요

웹 페이지의 퀄리티와 퍼포먼스를 평가할 수 있는 오픈 소스 툴

작동 방식

Google Chrome의 Chrome DevTools에서 브라우저 확장프로그램으로서 작동한다. Chrome DevTools > 상단 탭에서 더보기를 누르면 Lighthouse를 확인할 수 있다. 검사를 시작하면 Lighthouse가 웹 페이지를 로드하고 페이지 로드 경험을 시뮬레이션한다. 그런 다음 성능, 접근성, 모범 사례 및 SEO와 관련된 데이터 및 지표를 수집한다. Lighthouse는 검사가 끝난 후 페이지의 성능 및 사용자 경험을 개선하기 위한 자세한 정보와 제안이 포함된 보고서를 생성한다.

주요 지표

활용 방안

개발자에게 웹 사이트 성능, 접근 성 및 전반적인 사용자 경험을 향상시키기 위한 통찰과 제안을 제공할 수 있는 강력한 도구이다. 개발자는 Lighthouse를 활용하여 웹사이트를 미세 조정하고 더 나은 성능을 달성하며 사용자에게 더 나은 브라우징 경험을 제공할 수 있다.