원티드 프리온보딩
Elice AI Track을 마치고 취업 준비를 시작하면서 아직 스스로의 역량이 한참 부족하다고 느끼는 와중에, 프로젝트를 함께 했던 동기가 원티드 프리온보딩에 참가 중이라고 알려주어 8월부터 시작하게 되었다.
취업을 준비 중인 개발자 신입들에게 실무적 측면에서나 개발 역량 측면에서 도움이 많이 되는 강의라고 생각하여 취업이 되고난 후에도 지속적으로 참가할 의향도 있다.
이제 9월 사전과제를 진행해야 되는데, 우선 벨로그 활성화 겸 8월 사전과제가 굉장히 도움이 많이 되었다고 느껴서 복습하고자 한다.
유닛테스트 vs 통합테스트 vs E2E테스트
유닛 테스트(Unit Test)는 소스 코드의 특정 모듈이 의도된 대로 작동하는지 검증하는 절차, 통합 테스트(Integration Tset)는 여러 모듈이 합쳐진 하나의 기능을 검증하는 절차, E2E 테스트(End to End Test)는 애플리케이션을 사용자 관점에서 처음부터 끝까지 검증하는 절차이다.
즉, 가장 작은 단위의 테스트가 유닛 테스트이며, 가장 큰 단위의 테스트가 E2E 테스트라고 볼 수 있다.
유닛 테스트에서 각 테스트 케이스는 서로 독립된 상태를 유지해야 한다. 가장 작은 단위의 테스트이기 때문에 디버깅 및 리팩토링이 쉽고, 유닛 자체의 불확실성을 최소화 함으로써 모듈 간 통합을 용이하게 해준다.
통합 테스트를 통해 다양한 모듈과 구성 요소의 통합이 원활히 작동하는지 확인하고 사용자의 요구 사항에 충족하는지 여부를 확인한다. 이 과정에서 DB, 플랫폼 및 환경 등을 포함한 더 많은 리소스를 처리해야할 가능성이 높기 때문에 경험과 기술적 전문성, 프로젝트의 목표에 대한 이해를 필요로 한다. 각 부분들(모듈)을 통합하는 방식에 따라 하향식 기법(Top-Down), 상향식 기법(Bottom-up), 샌드위치 기법(Sandwich, 상향+하향), 빅뱅 기법(BigBang, 한 번에 모두 통합) 등으로 나뉘어 진다.
E2E 테스트는 주로 프로젝트의 가장 마지막에 수행하며 사용자에게 직접적으로 노출되는 GUI를 통해 시나리오, 기능 테스트 등을 확인한다. 종단(Endpoint) 테스트를 통과하면, 기능상 문제는 없다는 것이므로 다른 모든 테스트를 진행할 여유가 없더라도 E2E 테스트는 진행하는 것이 좋다. 유닛 테스트와 통합 테스트는 모듈의 무결성을 증명할 수 있지만, 모듈의 무결성이 애플리케이션 동작의 무결성까지 증명해줄 수 없기 때문이다.
리액트 테스트에 사용되는 도구들을 비교
Jest는 사용자 친화적인 UI와 별도의 확장이나 설치가 필요 없는 편의성으로 현재 가장 많은 사용자를 보유하고 있는 테스트 도구라고 할 수 있다. Mocking과 Snapshot, Code Coverage 등을 지원하며 특히 복잡한 모듈에서 Mock을 사용할 때도 네트워크 요청을 생성하는 것이 아닌 테스트 도구에서 동기적으로 처리함으로써 빠른 테스팅이 가능하게 한다.
mocha는 20년대 이전 가장 많은 사용자를 보유했던 테스트 도구이다. Jest와 달리 오직 테스트 기능만 지원하기 때문에 다른 기능은 별도의 Third-party를 통해 확장해서 사용해야 한다. Jest에 비해 편의성은 떨어지지만, 높은 자유성과 확장성이 장점이라고 볼 수 있다.
AVA는 병렬 테스트를 지원하는 가장 가벼운 테스트 도구이다. 복잡한 API 없는 간단한 구조와 Assertions으로 Snapshot 등의 많은 기능을 제공하며 Node와 구분되어 병렬적으로 처리되는 테스팅은 빠른 속도를 보여준다.
tape는 가장 low-level 의 테스트 도구이다. 최소한의 구조로 되어있어 AVA 보다 가벼우며 별도의 CLI 필요없이 오직 Javascript 만으로 실행된다. 사용자가 온전히 테스트 환경을 제어할 수 있도록 각 테스트는 모듈화되며 상태를 공유하는 기능은 제공하지 않는다.
CDN(Content Distributed Network)이란
CDN(Content Distributed Network, 콘텐츠 전송 네트워크)은 ‘지리적으로 분산된 서버들을 연결한 네트워크’를 의미하며 콘텐츠를 효율적으로 전달하기 위해 여러 노드를 가진 네트워크에 데이터를 저장하여 제공하는 시스템이다.
기존에는 Host Server에 직접 접근해야 컨텐츠를 이용할 수 있었기 때문에 사용자가 많아지면 트래픽이 Host Server로 집중 됨에 따라 병목 현상이 발생하여 사용자는 로딩 시간이 길어지고, 호스트는 트래픽 처리가 지연되는 만큼 비용도 증가하게 된다.
하지만 각 지역에 존재하는 CDN Node에 컨텐츠를 미리 저장해두고 사용자에게 가장 가까운 Node에 요청을 보내게 된다면 각 지역의 CDN Node들로 트래픽이 분산되어 로딩 시간도 줄어들고, 트래픽 처리 시간이 짧아짐에 따라 호스트의 비용도 감소하게 된다.
즉, CDN Server는 Host Server와 비교하여 사용자와의 거리가 더 가깝다. 각 CDN Server는 Host Server에 있던 컨텐츠 일부의 복사본을 저장하거나 Caching 함으로써 컨텐츠와 사용자 간의 거리를 단축하여 UX를 개선하고 ICP(Internet Content Provider)의 비용을 절감한다.
Web Vitals 이란
구글의 Chrome팀에서 21년 5월에 제시한 웹에서 훌륭한 사용자 경험을 제공하는데 필수라고 생각하는 품질 지표이다. Core Web Vitals는 크게 3가지 요소로 나뉘며, 로딩 시간(Loading Performance), 상호작용(Interactivity), 시각적 안정성(Visual Stability)이다.
로딩 성능을 측정하는 LCP(Largest Contentful Pain, 콘텐츠가 포함된 최대 페인트)는 사용자가 페이지에 접속했을 때(URL을 요청한 시점부터) 페이지 내에서 가장 큰 콘텐츠 요소를 렌더링하는 데 걸린 시간을 의미한다. Largest Contentful, 즉 가장 큰 요소는 보통 이미지나 동영상이다. 구글은 LCP를 2.5s 이내를 권장한다.
FID(First Input Delay, 첫 입력 지연)는 사용자가 페이지의 링크를 클릭하거나 버튼을 클릭하는 등의 상호작용을 처음했을 때부터 브라우저가 이에 반응할 때까지의 시간을 의미한다. 구글은 FID 100ms 이내를 권장한다.
CLS(Cumulative Layout Shift,누적 레이아웃 변경)는 어떤 콘텐츠를 읽다가 링크를 클릭하려고 한 순간, 갑자기 광고나 다른 요소가 나오며 원하지 않은 요소를 클릭하는 속임수를 방지하기 위한 척도다. 구글은 0.1 미만을 권장한다.
레이아웃에 변화를 주는 광고나 쿠키 배너, 크기가 지정되지 않은 이미지, 동적으로 삽입되는 콘텐츠, FOIT(Flash of invisible text) 방식의 웹 폰트나 FOUT(Flash of unstyled text) 방식의 웹 폰트 사용을 자제해야 한다. CLS를 개선하기 위해서는 이미지와 동영상에 size 속성을 부여하고, 기존 콘텐츠 위에 콘텐츠를 삽입하지 말아야 한다.
Core Web Vitals는 세 가지 요소 모두에 대해 백분위 중 75%를 기준으로 충족하면 된다고 본다. 하지만 FID를 측정할 때에는 모든 사용자가 페이지와 상호작용 하지 않고, 모든 웹페이지가 상호작용 요소를 넣는 것이 아니므로 95~99번째 백분위를 확인하는 것을 추천한다. Core Web Vitals를 측정하는 도구로는 Chrome User Experience Report, PageSpeed Insights, Search Console(Core Web Vitals Report) 등이 있다.
Light house 란
구글에서 2018년 5월에 개발한 웹 페이지 품질을 개선할 수 있는 오픈 소스의 자동화 도구이다. 일반 Public 웹페이지 또는 인증이 필요한 페이지 등 모든 페이지에 실행할 수 있으며 사이트의 성능, 접근성, SEO(Search Engine Optimization)검색 엔진 수집 최적화 측정) 등에 대한 전반적인 진단을 제공한다.
Google Chrome Webstore에서 Lighthouse 설치 후, 개발자도구를 켜서 lighthouse – generate report를 통해 확인할 수 있으며 성능 검사가 완료되면 카테고리별 (performance, accessibility, best practices, SEO, PWA) 점수, 계산 방식, 최적화 방안등이 노출됩니다. 해당 결과는 Lighthouse 탭에서 바로 확인할 수 있고, json 등으로 저장해서 Lighthouse Report Viewer 사이트에서 이전 결과들을 다시 확인 할 수 있다.
