성능이 저하되면 사용자가 떠나고 매출이 감소한다. 페이지 표시 시간에 따른 이탈률페이지 표시 시간사용자 이탈률1초 -> 3초32% 증가1초 -> 5초90% 증가1초 -> 6초106% 증가1초 -> 10초123% 증가 이 통계는 사용자들이 웹 서비스의 성능에 얼마나 민감한지를 수치적으로 보여주고 있다.성능 최적화를 통해 빠르고 안정적인 서비스를 제공하면 사용자 만족도가 높아지고, 이는 가입률과 전환률 증가, 이탈률 감소로 이어져 결국 더 많은 수익 창출에 기여할 수 있다. 성능 최적화는 어떻게 이루어지는 것일까?웹 성능을 결정하는 요소는 2가지1. 로딩 성능서버에 있는 HTML, CSS 등 웹페이지에 필요한 리소스를 다운로드 할 때의 성능 ✅ 로딩 성능 개선방법👉 다운로드 해야할 리소스 수를 줄이거나 크..

회사 React 프로젝트 성능 최적화를 해보았다. 일단 처음 개발자 도구 Lighthouse를 이용해서 검사를 했다.일단 웹 접근성은 흐린눈하기로 했다... ㅠ 웹 접근성까지 챙기기는 시간이 없다... CRA 기반으로 만든 프로젝트라서 craco.config.js 파일에 Webpack 설정을 추가해주었다.Webpack Bundle Analyzer를 이용해서 눈으로 트리맵을 보면서 최적화가 잘되고 있는지 확인해보겠다.const CracoAlias = require("craco-alias");const TerserPlugin = require("terser-webpack-plugin");const CompressionPlugin = require("compression-webpack-plugin");cons..