리액트는 가상 DOM을 바탕으로 useEffect, useCallback, useMemo 등의 hook을 통해서 빠른 렌더링을 지원하며 인기를 끌었다. 그러나 최근에는 다양한 프레임워크 및 라이브러리가 나오고 있기 때문에, 리액트에서 벗어나서 효율적인 렌더링을 하는 방법에 대해서 고민해볼 필요가 있다. 프론트엔드 개발자가 고민해봐야하는 측면에는 어떤 것이 있는가?
1. 코드 최적화
가상 우선적으로 불필요하거나 중복된 코드를 제거하고 경량화된 HTML, CSS, JavaScript를 작성하여 코드를 최적화한다. 또한 JS와 CSS 파일의 경우 압축하고 미니파이하는 방법도 있다.
2. 브라우저 캐싱
이미지, 스타일시트, 스크립트 등의 정적 파일을 브라우저 캐싱을 통해 저장하고, 브라우저가 중복된 요청을 하지 않도록 만든다.
3. 레이지 로딩
이미지, 비디오 및 기타 미디오 요소를 필요한 시점에 로드하도록 레이지 로딩(Lazy Loading)을 구현한다.
4. 번들링
웹팩 또는 Parcel과 같은 도구를 사용하여 여러 JavaScript 파일을 번들링하여 요청 수를 최소화한다.
5. 코드 스플리팅
코드 스플리팅(Code Splitting)을 통해 애플리케이션을 여러 번들로 나누어 초기 로딩 시간을 최적화한다.
6. 이미지 최적화
이미지를 최적화하여 용량을 줄이고, 웹P나 JPEG 2000과 같은 더 효율적인 이미지 형식을 사용한다.
7. 서버 사이드 렌더링(SSR)
서버 사이드 렌더링을 사용하여 초기 페이지 로딩 성능을 향상시킨다.
8. 코드 스프린트 최적화
자바스크립트 코드를 비동기로 실행하여 렌더링을 차단하지 않도록 한다.
9. 웹 압축
GZIP 또는 Brotli와 같은 웹 서버에서 지원하는 압축 알고리즘을 사용하여 데이터 전송을 최적화한다.
10. HTTP/2 사용
웹 서버와 클라이언트 모두가 HTTP/2를 지원하도록 설정하여 다중 요청 및 스트림을 활용한다.
11. 브라우저 DevTools 활용
브라우저의 개발자 도구를 사용하여 페이지의 성능을 분석하고 병목 현상을 해결한다.
12. 웹 성능 모니터링
웹 성능 모니터링 도구를 사용하여 페이지 로딩 시간과 성능을 지속적으로 모니터링하고 최적화 작업을 진행한다.
Minify, Minification
불필요한 공백, 들여쓰기, 줄바꿈 등을 제거하여 파일 크기를 줄임
프로덕션 환경에서 주석을 제거하거나 간소화함
변수 이름 축약(변수명과 함수명에 따른 데이터 크기가 감소)
프로덕션 환경에서 최적화된 코드를 생성하기 위해 미니 파이션 도구를 사용
UglifyJS: 변수 이름 축약, 불필요한 공백 제거 등을 수행
Terser: UglifyJS의 후속 버전, JS 압축하는데 사용, ES6+ 문법 지원
Cssnano: CSS 코드를 압축하고 최적화하는 라이브러리
html-minifier: HTML 코드를 압축하고 최적화하는 라이브러리(주석 제거, 공백 제거, 태그 축약 등)
Webpack: 모듈 번들러, JS, CSS, HTTP 최적화 플러그인 및 로더 제공
Gulp: 워크플로우 자동화 도구, 다양한 플러그인을 사용하여 최적화
Grunt: JS 기반 워크플로우 자동화 도구, 태스크를 정의하고 다양한 플러그인을 사용하여 코드 최적화 작업을 수행
Babel: JavaScript 코드를 변환하고 최신 JavaScript 문법을 이전 버전으로 변환하는데 사용, 코드 최적화 작업과 함께 사용 가능
PurgeCSS: 사용하지 않는 CSS 스타일을 제거하여 CSS 파일 크기를 줄이는데 사용
SVGO: SVG 이미지 최적화 도구, SVG 파일 크기를 최소화하고 불필요한 요소를 제거함
브라우저 캐싱
웹서버에서 HTTP 헤더를 사용하여 캐싱을 구성
Expires 헤더에 특정 날짜까지 자산을 캐싱하도록 설정, Cache-Control 헤더의 max-age 지시문을 사용하여 캐싱 시간을 설정
파일이 업데이트되면 파일이름에 버전 번호 혹은 해시 값을 추가하여 이전 캐시파일을 사용하지 않도록함
레이지 로딩
페이지 로딩 시간을 단축하여 빠른 초기 로딩 속도를 보여주며, 모든 자원을 처음에 다운받지 않기 때문에 대역폭을 절약, 자원 낭비 방지
img 태그의 loading 속성을 lazy로 추가
Intersection Observer API를 통해 뷰포트에 진입할 때 자원을 로드
웹팩을 통해 코드 스플리팅을 수행하고 자원을 레이지 로딩
번들링
여러 개의 파일을 하나의 파일로 묶어주어 HTTP의 요청 수가 줄어 로딩 속도 개선 모듈로 구성하여 개발 및 유지 관리 용이 코드를 최적화하고 압축하여 불필요한 공백 및 주석을 제거
코드 스플리팅
JS 코드를 작은 조각으로 분할하여 필요한 코드만 로드하도록 하는 방법 필요한 코드만 로드하여 초기 페이지 로딩 속도가 향상되며, 번들 크기가 줄어들어 대역폭을 절약하고 로딩 시간을 단축, 성능 최적화. 코드를 모듈로 구성하여 유지 보수 및 개발 프로세스를 간편하게 만듦
웹팩 설정 파일에서 optimization.splitChunks 속성을 사용, 번들링할 지점을 명시적으로 지정, 웹팩을 사용하여 프로젝트를 빌드
윈도윙
요소 중 일부만 화면에 렌더링하고, 사용자가 스크롤하거나 다른 방식으로 페이지를 탐색할 때 동적으로 콘텐츠를 로드하거나 업데이트 하는 방법으로, 불필요한 렌더링을 피하고 렌더링 성능을 향상시킬 수 있음
가시 영역 렌더링/ 가상 리스트 또는 가상화된 스크롤(실제로는 새로운 아이템을 받아옴)/ 무한 스크롤/ 레이지 로딩
'코딩테스트' 카테고리의 다른 글
| 백준 14939번 불 끄기 자바스크립트 (2) | 2024.07.14 |
|---|---|
| 백준 2239번 정사각형의 개수 자바스크립트 (0) | 2024.07.07 |
| 백준 1540번 정사각형의 개수 자바스크립트 (0) | 2024.06.30 |