Optimization(최적화)

최적화는 다양한 맥락에서 세부적인 차이를 가진 단어이지만, 보편적으로 "가능한 적은 리소스를 소모하면서 빠르게 원하는 결과를 얻을 수 있도록 개선하는 것"을 의미한다. 최적화를 통해 얻을 수 있는 이점은 여러가지이지만 사용자 이탈률 감소, 사용자 전환률 증가, UX향상이 가장 눈에 띄는 이점이다.

 

최적화는 HTML 기본 구조에서부터 시작해서 React.js까지 개발에 사용되는 모든 프로세스에 적용될 수 있다.

 

HTML에서의 최적화

1. DOM 트리를 가능한 한 가볍게 만들기 : 자식 요소가 많고, 트리의 복잡도가 높을수록 연산해야 할 요소가 많아진다.
2. 인라인 스타일 피하기 : 각 요소에 인라인 스타일을 넣을수록 렌더링에 불리하다.

CSS에서의 최적화

1. 사용하지 않는 CSS 스타일 제거 : CSSOM트리를 형성할 때에 불필요한 CSS스타일이 많아질수록 렌더링에 불리하다.
2. 간결한 셀렉터 사용하기\

리소스 로딩 최적화

1. 파싱되는 위치 <script/>에 따라 DOM 트리 생성이 중단/재시작이 결정된다. 이를 고려하여 코드를 설계해야 한다.

브라우저 이미지 최적화

1. 브라우저에서 미디어파일이 차지하는 비율은 51%가 넘어간다. 그러므로 이미지 용량을 줄이거나 요청의 수를 줄여 최적화에 빠르게 기여할 수 있다.
2. 이미지 스프라이트 만들어 놓고 저장해놓기
3. 아이콘 폰트 사용하기 : 이미지 파일이지만, 코드 자체에서 처리할 수 있기에 효율적! (ex.fontAwesome)
4. WebP 또는 AVIF 이미지 포맷 사용하기
5. CDN 사용하기 (ex.CloudFront 등)

캐시(Cache) 관리

클라이언트는 사용자의 요청이 있을 때마다 서버에 요청을 보내고 응답을 받는다.

하지만, 그 때마다 동일한 대용량의 파일을 주고 받는다면 불필요한 자원 소모가 심해질 것이다.

 

이를 관리하기 위해 각기 브라우저는 캐시 저장공간을 제공하고 있다.

캐시 저장공간의 특징은 다음과 같다.

1. 캐시는 브라우저에 의해 관리되는 저장공간으로, 이미지 / 스크립트 / 스타일 시트 및 리소스를 저장하여 관리한다.
2. 캐시는 브라우저에 의해 메모리 혹은 로컬 디스크에서 할당하여 사용한다.
3. 캐시는 기본적으로 브라우저가 정한 유효시간이 있다. (chrome : 5min) 하지만, 개발자가 필요에 따라 유효시간을 정할 수 있다.

 

캐시 검증 헤더

캐시 검증 헤더는 캐시에 저장된 데이터와 서버의 데이터가 동일한지 확인하기 위한 정보를 담은 응답 헤더이다.

이에 사용되는 메서드는 다음과 같다.

Last-Modified : 데이터가 마지막으로 수정된 시점을 의미하는 응답 헤더로, 조건부 요청 헤더인 If-Modified-Since 와 묶어서 사용
Etag : 데이터의 버전을 의미하는 응답 헤더로, 조건부 요청 헤더인 If-None-Match 와 묶어서 사용

 

조건부 요청 헤더

조번부 요청 헤더는 캐시 데이터와 서버의 데이터가 동일할 경우 재사용을 할 수 있도록 요청하는 헤더이다.

이에 사용되는 대표적인 메서드는 다음과 같다.

If-Modified-Since : 캐시된 리소스의 Last-Modified(마지막 수정) 값 이후에 서버 리소스가 수정되었는지 확인하고, 수정되지 않았다면 캐시된 리소스를 사용한다.
If-None-Match : 캐시된 리소스의 Etag(데이터 버전) 값과 현재 서버 리소스의 ETag 값이 같은지 확인하고, 같으면 캐시된 리소스를 사용한다.

 

axios.get('url/image.jpg', {
  headers: {
    'If-Modified-Since': 'Wed, 01 Dec 2021 12:00:00 GMT', // 이미 캐시된 파일의 수정 시간
    'If-None-Match': '123456789' // 이미 캐시된 파일의 ETag
  }
})
.then(res => {
  if (res.status === 304) { // Not Modified 상태 코드
    console.log('캐시 사용');
    // 이미 캐시된 파일 사용
  } else if (res.status === 200) { // OK 상태 코드
    console.log('캐시 갱신');
    // 새로운 파일 다운로드 및 캐시 갱신
  }
})
.catch(error => {
  console.error('오류 발생:', error);
});