8편 pre Loading Component, Image 6편인가에서 Bundler의 특징으로 여러개의 파일을 하나로 압축해서 가져오는 것을 예방하기 위한 Code Splitting을 해주었다. 그래서 split된 파일을 필요할 때 가져오는 방식을 사용했습니다. 이번 글에서는 이러한 과정 속에 필요할 때가 아닌 현재 필요한 파일을 다 가져오는 로딩이 다 끝난 후 splitting 된 파일을 가져와 Cache에 담아두는 Pre loading을 해보겠습니다. Pre loading Component React를 Pre loading하기 위해서는 Pre Loading할 컴포넌트를 미리 import하면 된다. 1. React Component를 lazy로 불러올 수 있는 객체를 만들어줄 수 있는 함수를 만들어줍니..

7편 애니메이션 최적화 애니메이션 최적화에 대해서 알아보기 전에 브라우저가 어떻게 렌더링을 하는지 알아봐야 합니다. 애니메이션 작동 방법 애니메이션의 경우에는 이미지를 조합해서 나타낸다. 위와 같은 이미지들이 빠르게 순서대로 진행되며 만화와 같은 애니메이션으로 보이게 하는 것입니다. 그래서 일반적인 모니터의 경우에는 1초의 60FPS(1초에 이미지를 표현할 수 있는 개수)로 이미지를 표현할 수 있다. 요즘 비싼 모니터의 경우에는 144FPS까지 가능하다. 참고 영상 위의 동영상을 보면 알겠지만 1초에 얼마나 많은 이미지를 표현할 수 있냐에 따라서 애니메이션의 부드러움의 차이가 큰 것을 확인할 수 있다. 하지만 브라우저가 특정한 이유를 통해서 한번의 이미지를 표현할 수 있는 프레임이 작아진다면 30FPS,..

6편 Code Splitting 과 React lazy, Suspense 이전에 webpack을 통해서 비슷한 파일을 묶어서 하나의 파일로 만드는 것을 Bundling이라고 했다. 즉 js, css, html 각각을 하나의 파일로 묶어서 번들링 해준다. 물론 각각의 파일을 하나로 묶어주어서 여러 개의 파일을 가져올때 보다 훨씬 편해지겠지만 하나의 파일이 너무 용량이 커져버리면 오히려 가져오는데 더 오랜시간이 걸리고 힘들어진다. bundle-analyzer를 사용하면 이를 편하게 확인할 수 있다. webpack에 설정을 해줘야 하지만 필자는 현재 CRA를 통해서 만들었기 때문에 webpack 설정을 바꿀 수가 없어서 아래의 라이브러리를 사용하면 된다. www.npmjs.com/package/cra-bund..

5편 Performance 사용해서 오래걸리는 코드 찾아보기 크롬 관리자 도구 Performance Tab을 사용해서 오래 걸리는 코드를 찾아보고 Performance 탭을 어떻게 사용하는 건지 알아봅시다. Performance 탭은 페이지가 실행되면서 작업되는 태스크를 확인할 수 있는 크롬의 탭입니다. 사용하기 위해서는 관리자 탭에 Performance를 누른 다음에 새로고침 같이 보이는 것을 눌러주면 됩니다. 실행결과 Network: 네트워크의 경우에는 네트워크에서 일어나는 일들을 볼 수 있다. 예를 들어 사진을 받아오는 타임라인 이라던가 특정 파일을 받아오는 타임라인 등을 확인할 수 있다. 각 아티클 마다 이미지를 요청해서 가져온 것을 알 수 있다. Timing, Main Timing과 Main은 ..

이런 문제가 왜 생기는 걸까? 아래 사진을 보자 해당 이미지의 사이즈는 120 x 120 px이었지만 해당 이미지는 1200 x 1200px 이미지의 낭비가 발생했다. 즉 100배 사이즈가 큰 이미지를 가져 오기 때문에 이러한 이슈가 발생한 것이다. 강의에 따르면 레티나 디스플레이의 경우 하나의 픽셀에 더 많은 값들을 보여줄 수 있기 때문에 주로 원래 크기의 두배 정도가 적당하다고 한다. 일반적으로 우리는 프론트단을 구성하며 서버에 요청을 보내고 응답 값을 받게 되는데 그럴 경우 이미지의 사이즈를 줄이거나 변경하기 어려울 수 있다. 정적인 서버의 경우에는 변경이 가능하지만 그래서 이럴 때 주로 사용하는 경우는 CDN을 많이 사용한다. CDN(Contents Deilvery Network) 콘텐츠를 효율적..

특정 리액트 웹의 성능을 한번 평가해보겠습니다. 만약 자기의 리액트 앱이 너무 느린데 이유를 모르겠어? 왜 느리지 하는 경우가 있을 것입니다. 그래서 크롬에서는 느린 이유를 간편하고 쉽게 찾을 수 있는 기능을 크롬 검사기인 light house을 사용해보고 원인을 분석해볼 수 있습니다. 위의 크롬 검사기를 가보면 Light house가 존재하는 것을 볼 수 있습니다. 검사해볼 기기를 Mobile, Desktop 중 뭘 할건지 선택해서 Generate Report를 눌러서 검사를 진행할 수 있습니다. 왼쪽과 같이 새로고침이 진행이 되면서 완전히 로드되면 해당 웹페이지의 점수를 볼 수 있습니다. 저 성능의 경우 100점 만점 중 75점 인거며 측정 항목을 통해서 이런 점수가 나온 것이 아래의 시간초를 보며 ..