Refactoring

Refactoring 태스크 관리와 실행

• Ref

문제 인지 능력

코드 문제 추적방법

• 이슈 관리 도구 사용
• 여러 팀이 볼 수 있다는 걸 전제로 작성
  • (디자인팀, 개발팀, 사업팀...)

예시

• 테스트 커버리지

  • 제품의 안정성
  • 기존 기능을 잘 동작시키면서 새로운 기능을 추가할 수 있는 근간

• 테스트 커버리지를 높이고자 하는 태스크 예시

태스크 명 : 테스트 커버리지 향상
작성일 : 2020-07-07 08:19 AM
태그 : 리팩터링, 테스트
태스크 내용 :
제품 XXX의 테스트 커버리지를 향상 시켜 제품 전체의 안정성을 높입니다.
현재 제품 테스트 커버리지
- 전체 함수 149개 중 57개 테스트
- 컴포넌트 26개 중 12개 테스트
문제점:
낮은 테스트 커버리지로 인해 향후 기능을 추가했을 때
기존 코드에서 발생할 수 있는 문제를 명확히 파악할 수 없습니다.
이로 인해 새로운 기능을 추가하는 데 불필요한 검증 과정이 필요합니다.
해결 방안:
전체 함수의 80% 이상 커버리지를 유지하고,
컴포넌트는 100% 커버리지를 가져가고자 합니다.
기대:
테스트 커버리지를 높여서 불필요한 검증 과정을 줄이고,
새로운 기능을 추가할 때 태스크 처리 속도를 향상시킬 수 있으리라 생각합니다.
예상 소요 기간:
태스크를 더 잘게 쪼개봐야해서 우선 5일로 잡아보겠습니다.
(Agile 그룹이라면 난이도로 쪼개도 무관)

• 태스크의 크기
  • 업무의 크기를 알 수 있도록 큰 태스크 부터 관리하는 것을 추천
  • 실제로 작업할 때에는 더 작은 단위로 쪼개는 것을 추천

실행하기

• 개발 팀 내부에의 협의를 먼저 이끌어 내자

앞서

• 개발팀과 제품팀의 우선순위가 다른 경우
  • 난이도를 정한 후에 우선순위를 결정한다.
  • 서로의 언어로 컨텍스트를 설득
    • 리팩토링의 제품의 영향도

프론트엔드 성능 체크 리스트

• Ref 원본에 달린 상세 링크를 필요할 때 읽어보자!

HTML

HTML 압축, 주석, 공백, 줄바꿈 제거

• 페이지 로드 속도 증가
• 사용자의 다운로드 시간 줄임

불필요한 속성 제거

HTML5는 기본으로 지원함. type="text/javascript type="text/css"

CSS 태그를 자바스크립트 태그 앞에 두기

브라우저 렌더링 속도를 높이는 병렬 다운로드가 가능함.

iframe 최소화

CSS

CSS 압축, 주석, 공백, 줄바꿈 제거

CSS 파일을 하나로 합치기

Non-blocking

CSS가 DOM의 로드를 방해하면 안된다.

<link rel="preload" href="global.min.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="global.min.css"></noscript>

CSS 파일은 페이지 로드와 렌더링을 지연시킬수 있으므로, preload를 통해 브라우저가 페이지의 콘텐츠를 보여주기 전에 CSS파일을 로드한다.

rel="preload" as="style"

CSS 클래스 이름의 길이

HTML CSS 파일에 결과적으로 영향을 줄 수 있다.

웹사이트를 여러 컴포넌트로 분리하면 클래스와 클래스의 길이를 줄이는데 도움이 된다.

• 테스트

별로 차이는 안난다.

사용되지 않은 CSS

파일크기를 줄일수 있고, 로딩 속도 향상

CSS 크리티컬

서버요청을 줄여 웹페이지의 렌더링 속도를 높인다.

페이지의 보이는 부분을 렌더링할 때 사용되는 CSS 를 수집하고, CSS 호출전, <style/> 사이에 한줄로 임베디드 된다.

외부 또는 인라인 CSS를 body 안에 두지 않기

HTTP/2 에서는 유효하지 않는다.

• 디자인에서 콘텐츠를 분리하는 좋은 관행
• 코드의 유지보수 향상
• 사이트 접근성 향상
• HTML 페이지 파일크기와 로딩시간을 줄인다.

스타일시트 복잡도 분석

중복 CSS 선택자를 제거한다.

CSS 파일 분석하고 복잡성을 해결하면 CSS파일을 브라우저가 더 빨리 읽어 들일 수 있다.

CSS 전처리기를 사용

Font

웹폰트 포맷

웹프로젝트 또는 어플리케이션에서 WOFF2 포맷 사용

폰트에 WOFF2 를 제공하거나 Font Squirrel 을 통해 필요한 포맷을 생성 가능

폰트를 더 빨리 로드하기 위해 preconnect 사용

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

브라우저는 DNS 서버를 찾고, 리소스 수집이 끝나기 전, 조회가 완료될 때까지 대기해야 한다.

prefetches preconnect 는 브라우저가 미리 DNS 정보를 확인하고, 서버에 대한 TCP 연결을 허용합니다.

웹폰트 크기가 300kb 를 넘기지 안도록 한다.

플래시 또는 보이지 않은 텍스트 방지

웹폰트가 로드될 때까지 투명한 텍스트를 사용하지 마세요

FOIT Flash of Invisible Text

• 브라우저가 웹 서버에서 글꼴을 요청하면 글꼴이 다운로드 될 때까지 해당 글꼴을 호출하는 스타일 요소가 숨겨진다.

FOUT Flash of Unstyled Text

• 시스템 글꼴에서 처음 렌더링 되고, 서버에서 글꼴이 로드된 후에 사용자 지정 서체로 교환된다.

CSS 문서에서 참조할 수 있다.

Images

이미지 최적화

사용자에게 영향을 미치지 않는 선에서 압축되어야 한다.

• 가능하면 작은이미지 대신 CSS3 효과(?)를 사용한다.
• 이미지에 인코딩된 텍스트 대신 폰트를 사용
• SVG 사용
• 툴을 사용하고 압축 레벨을 85 미만

이미지 형식

웹 사이트를 느리게 만들지 않는 이미지 형식 사용

백터 이미지 > 래스터/비트맵

SVG 백터 이미지는 다른 이미지보다 작고, 반응성이 뛰어나며 완벽하게 크기가 변할 수 있다. 그리고 css 에 수정되거나 움직일 수 있다.

이미지 크기

최종적으로 나타나는 이미지 크기를 안다면 img에 width 와 height 속성을 명시

이 속성이 없다면, 이미지를 로드하는 동안 페이지를 로딩하는 도중에 레이아웃이 변하는 현상이 발생한다.

Base64 이미지 지양

결과적으로 작은 이미지를 얻을 수 있지만, 최고의 방법은 아니다

Lazy loading

• 현재 페이지의 반응 시간을 개선
• 사용자에게 필요하지 않은 이미지를 로딩하지 않을 수 있다.

반응형 이미지

디스플레이 크기에 맞는 이미지 사용

작은 디바이스에는 뷰포트보다 큰 이미지가 필요하지 않는다.

• 서로 다른 크기의 이미지를 여러 버전으로 제공하자
• srcset picture 를 사용해 각 이미지의 여러버전을 제공할 수 있다.

JavaScript

JS 압축

JavaScript 를 body 중간에 두지 않기

DOM 이 구성되는 과정을 방해한다.

async 또는 defer 속성과 함께 사용하여 DOM로딩을 막지 않도록 한다.

Non-blocking 자바스크립트

비동기적으로 로드하기 위한 async defer 를 사용

최적화와 JS 라이브러리 업데이트

프로젝트에는 라이브러리가 필요하다. 이를 최신버전으로 업데이트 하고 불필요한 메소드 들이 자바스크립트 코드를 압도하지 않도록함.

대부분의 새로운 버전은 최적화 되고 보안 패치가 적용된다.

단순한 기능을 위해 바닐라 자바스크립트를 지향한다.

npm-check 가 라이브러리를 업그레이드할 수 있다.

디펜던시 크기 제한

외부 라이브러리 중, 똑같은 기능을 하지만 더 가벼운 라이브러리를 찾을 수 있다.

Moment.js(16KB)는 굉장하지만, 많은 메소드들을 사용하지 않을것임 Day.js(2KB) 가 만들어진 이유

npm trends 다운로드 수를 비교할 수 있다.

Bundlephobia 통해 디펜던시의 크기를 알 수 있다.

JavaScript 프로파일링

자바스크립트 파일의 성능 문제 체크

자바스크립트의 복잡도는 런타임 성능을 떨어뜨릴 수 있다.

크롬 개발자 도구의 타임라인 툴을 이용해 스크립트 이벤트를 테스트하고 너무 오랜 시간을 소모하는 이벤트를 찾아낸다.

Server

웹 페이지 크기 < 1500KB

(이상적인 크기 < 500KB) 페이지의 크기 + 리소스

최상의 사용자 경험을 제공하려면 타겟 사용자, 네트워크 연결, 디바이스에 따라 총 킬로바이트 수를 줄여야 한다.

페이지 로드 시간 < 3 초

첫 번째 바이트시간(TTFB) < 1.3초

브라우저가 데이터를 받기 전까지 대기하는 시간을 최대한 줄인다.

쿠키 크기

쿠키를 사용한다면 각 쿠키가 4096 바이트 미만이고, 도메인 네임이 20개 이상의 쿠키를 가지지 못한다.

사용자의 응답 시간에 미치는 영향을 최소화 하기 위해서느 쿠키의 크기를 최대한 줄이자

HTTP 요청 최소

항상 모든 파일의 요청이 웹사이트나 어플리케이션에 필수적인지 확인한다.

CDN을 통한 asset 제공

전 세계에 콘텐츠를 더 빠르게 제공할 수 있다.

동일한 프로토콜에서 파일 제공

웹 사이트에서 https 를 사용하지 않도록 하고? http를 이용하는 소스에서 파일을 가져오세요

연결 가능한 파일 제공

404 파일을 요청하지 말기

올바른 HTTP 캐시 헤더 설정

브라우저와 서버 사이 비용이 큰 왕복을 피하도록 HTTP 헤더를 설정한다

GZIP/ Brotli 압축 활성화

리액트 성능 최적화

https://reactjs.org/docs/optimizing-performance.html