일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
Tags
- 깃
- JS
- 타입스크립트
- 정보처리기사
- git
- 코드공유
- 렛츠기릿자바스크립트
- 비전공자
- 웹디자인기능사
- 생활코딩
- JavaScript
- 웹디실기
- react
- 세로메뉴바
- 웹디자인기능사실기
- HTML
- github
- web
- 슬라이드전환
- 프론트엔드
- PROJECT
- 실기
- 연산자
- Supabase
- CSS
- 웹퍼블리셔
- 리액트
- 자바스크립트
- jQuery
- 코딩독학
Archives
- Today
- Total
목록suspense (1)
코딩하는라민

[React] React.lazy 코드 스플리팅으로 프로젝트 성능 개선하기 📌 React.lazy 함수를 사용하게 된 이유 리액트 프로젝트를 진행하면서 중간중간 Light House 를 이용해 성능 검사를 진행했다. 다른 점수는 항상 90점 이상으로 나왔는데 '성능' 점수만 항상 주황색으로 60~70점 정도가 나왔다. 이 6, 70점도 잘나온 편이었고 정말 성능이 좋지 않은 페이지의 경우에는 4, 50점대까지 나왔다. 성능 최적화는 코드를 작성하고 나서 수행해야 하기 때문에 일단 프로젝트에 집중했고, 추가적으로 성능 개선을 진행하였다. 📌 React.lazy 함수란? React.lazy() 는 동적으로 코드를 로드하고 렌더링할 수 있게 해주는 React의 기능 중 하나이다. 이 기능을 사용하면 일반적인 ..
Core/React
2023. 4. 18. 10:30