728x90 반응형 지연 로딩2 [React] 지연 로딩(Lazy Loading)으로 최적화하기 안녕하세요. J4J입니다. 이번 포스팅은 지연 로딩으로 최적화하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 지연 로딩이란? 지연 로딩이라고 하는 것은 말 그대로 로딩을 바로 하지 않고 지연시켰다가 로딩을 나중에 해준다는 뜻입니다. 간단한 예시로 더 자세하게 말씀드리겠습니다. 예를 들어 한 페이지에 많은 양의 사진이 사용된다고 가정해보겠습니다. 요즘 만들어지는 사진들은 용량이 크기 때문에 화면을 처음 로드할 때 많은 양의 사진을 한 번에 로드를 하는 것은 서비스의 속도를 늦추는 요인이 될 수 있습니다. 심지어 이렇게 로드되는 많은 사진들이 한 화면에 전부 보이는 일은 드뭅니다. 그럼 만약 페이지를 로드할 때 페이지에서 사용되는 모든 사진을 한 번에 로드하는 것이 아니라 실제 화면에 보이는 사진들만 .. 2021. 8. 18. [React] 코드 스플릿팅(Code Splitting)으로 최적화하기 안녕하세요. J4J입니다. 이번 포스팅은 코드 스플릿팅으로 최적화하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 코드 스플릿팅이란? 코드 스플릿팅이라고 하는 것은 webpack, rollup, browserify와 같은 모듈 번들러를 이용하여 만들어진 하나의 번들 파일을 여러 개의 번들 파일로 나누는 것을 의미합니다. 그리고 하나의 번들 파일을 여러 개의 번들 파일로 나누는 이유는 더 빠른 속도로 화면을 로드하기 위해서입니다. 모듈 번들러를 사용하게 된 이유부터 간단히 언급을 해보자면 브라우저에서 호출하는 파일의 개수를 줄여 부하가 발생되는 것을 방지하기 위해 번들러를 사용하고 있습니다. 하지만 프로젝트의 규모가 커짐과 동시에 번들링 되는 파일의 크기도 점점 커지게 되고 이것은 결국 url을 입력하.. 2021. 8. 16. 이전 1 다음 728x90 반응형
