전체 글46 React.lazy 와 Suspense로 성능개선! 현재 진행중인 프로젝트에서 로그인 페이지를 lightHouse로 분석해보니 아래와 같은 결과가 나왔다. 사용하고 있지 않는 자바스크립트를 같이 불러오고 있어서 페이지 로딩시간이 긴거같아서 이 부분을 개선해 보려고 한다. 🤔 왜 React.lazy를 생각했는지 react로 만들어지는 앱을 빌드하면 보통 js 파일이 index 파일 하나로 통합빌드가 이뤄지는데 최초 앱 렌더링시 당장 보여지지 않는 컴포넌트를 모두 불러와서 최초 로딩 속도를 지연시키는 원인이 되기도 한다. 이것을 코드 분활을 통해서 당장 사용할 컴포넌트만 불러오도록 개선을 해야하는데 어디선가 블로그에서 봤던 React.lazy를 이용해보려고한다. React.lazy는 리액트에서 제공하는 내장기능으로 필요에 따라 컴포넌트를 불러오도록 동작해주기.. 2023. 7. 29. 이미지 최적화를 통한 웹 성능 개선 🤔 이미지 최적화 왜 필요할까? 진행하던 프로젝트의 성능을 분석하다 보니 lightHouse 결과 웹 성능이 대체로 60-70점 언저리인것을 발견했다. 성능 저하의 원인에는 여러 원인이 있지만 그 중 이미지를 집중적으로 먼저 개선해보려 한다! 이미지 최적화에 들어가기 전 먼저 현재 우리 사이트에 이미지 관련 어떤 문제가 있는지 살펴보기 위해 Network 를 통해 트래픽 속도를 측정해보니 아래와 같은 문제점들을 발견했다. 불러오는 이미지의 수가 많음 매페이지 공통으로 사용하는 이미지 매번 불러옴 압축이 적은 이미지 유형 다른 문제도 있지만 위 문제점들로 인해 로딩속도가 저하되는거 같은데 페이지 로딩 시간은 웹 성능을 최적화 하는데 있어 중요한 부분중 하나이다. 페이지 로딩에서 100밀리 초만 지연되더라도.. 2023. 7. 20. [React] 무한 스크롤 기능 구현 무한스크롤은 특정 페이지의 하단에 닿았을때 API가 호출되며 콘텐츠가 끊기지 않고 계속 로드되는 사용자 경험 방식이다. 🤔 페이지네이션도 있는데 왜 무한스크롤인가? 2가지의 이유가 있는데 첫번째는 허들을 줄이기 위해서이다. 사용자가 클릭을 하는 하나의 액션도 허들이라고 보는데 동작하는것을 줄임으로써 액션을 하나 줄일수 있다는 생각을 했다. 두번째 이유는 사용자가 상품을 더 많이 접하게 하기 위해서이다. 사용자가 제일 처음 접하는 메인페이지에서 더 많은 양의 정보를 사용자에게 보여주어야 구매를 할 수 있는 확률이 올라간다고 생각했다. 클릭후 다시 상단으로 올라가 렌더링 하는 시간 보다는 계속적으로 데이터를 불러오는 것이 사용자에게 더 많은 양의 정보를 줄수 있을거라 생각했다. ✅ 나중에 볼지도 모르니 정리.. 2023. 6. 4. [React] Carousel 기능 구현 위 쇼핑몰 메인페이지 기능구현 중 상단 이벤트 배너를 Carousel 기능으로 구현하려고 한다!🧐 📍Carousel 의 사전적인 의미는 회전목마로, 회전목마가 빙빙 도는 것처럼 이미지나 텍스트의 슬라이드를 가로로 슬라이드시켜 여러 개를 표시하는 컴포넌트이다. 실은 Carousel 을 편하게 만들 수 있는 라이브러리는 많지만 여러가지 기능이 들어가 있어 React공부에 많이 도움이 될거 같아 라이브러리를 쓰지 않고 직접 하나하나 코드를 짜보려고 한다 (그래서 탈도 많고 에러도 많고 나도 울 예정) ✅ 나중에 볼지도 모르니 정리해 놓는 Carousel 라이브러리 https://swiperjs.com/demos Swiper Demos Swiper is the most modern free mobile touc.. 2023. 5. 31. 이전 1 2 3 4 ··· 12 다음
