# Lazy loading
Webpack Chunk 로딩 시 경로 지정
Webpack Chunk 구성에서 Lazy Loading 활용 시 분할된 번들의 구성을 불러올 때 경로(주소)를 지정해야 할 경우 Webpack config에서 output.publicPath로 지정할 수 있습니다.하지만 이 값이 동적으로 변경될 수 있거나...
Webpack Chunk가 global에 노출하는 변수 충돌
Webpack 번들 구성 시 splitChunks 또는 Lazy Loading 등으로 결과물이 분할되고 임의 또는 자동으로 불러올 때 Webpack에서 Global(window)에 노출한 변수를 통해 감지합니다.
스크롤을 내리면 새로운 컨텐츠 불러오기(lazy loading)
youtube api를 이용해서 유튜브 검색 결과를AJAX를 통해 받는 작업을 하고 있다.그런데 검색 결과를 한번에 엄청나게 가져온다면 웹에 크나큰 부담이될 것이고 그렇게 할 필요도 없다.초기에 10개의 검색결과만 불러오고 스크롤을 아래로 끝까지 내리면새로운 10개를
Intersection Observer를 활용한 Lazy Rendering - TypeScript
부스트 캠프에서 가계부 서비스를 개발하며 겪었던 난관 중 하나를 해결하는 과정에 대해 공유하고자 합니다. 프로젝트를 진행하며, 한 달간의 거래내역 페이지에서 거래내역 data의 양이 많을 때 랜더링 속도가 매우 느린 것을 관찰하였고 이를 개선하고자 무한스크롤을 구현하려
Image Lazy Loading
오늘은 등 운동을 조지고 자기 전에 lazy loading을 구현하는 2가지 방법을 정리해보려고 합니다. 방법은 아래와 같습니다.scroll eventIntersection Observer먼저 html파일 구조를 확인하세요.index.htmlwindow 객체에 스크롤
Lazy Loading & Caching in ORM
PyCon Korea에서 좋은 영상이 하나 올라왔다.Django ORM(QuerySet)에 대한 내용이다.주니어들이 ORM을 공부하면서 놓치기 쉽거나 몰랐던 내용이 많아공부하는데 정말 도움이 많이 되었다.ORM의 특징에 대해 다뤄보려고 한다.
[React] 코드 분할
리액트에서의 코드 분할에 대해 알아보겠습니다. 유저가 처음 웹 페이지에 접속했을때 빌드된 main.js 파일을 로드한다고 생각해봅시다. 만약 프로젝트의 규모가 커진다면 main.js 파일의 크기 또한 커질 것이고 이를 로드하는데 많은 시간이 걸리므로 사용자 경험의 퀄리
React - Intersection Observer API를 이용한 lazy loading
이번에 1차 프로젝트를 하면서 가장 해보고 싶었던 Image Lazy Loading을 구현해봤다. 처음에는 라이브러리를 사용하려고 했으나 멘토 종택님께서 Intersection Observer API라는것을 알려주셔서 한 번 적용해봤다. 이게 없었다면 아마 하루종일 scroll 수치 계산을 하고 있었지 않을까 생각한다. 그만큼 간단하게 lazy loadin...
.png?w=120)
Intersection Observer API
안녕하세요 Marcus입니다. 요즘 벨로그에 Lazy-loading관련된 글이 많이 올라와서 관심있게보다가 Intersection Observer와 React Hooks를 이용해서 Lazy-loading과 Infinity Scroll을 구현해봤습니다. 시리즈로 진행
필요한 시점에 필요한 리소스 가져오기 : Lazy loading
프로그래머스 2020 Dev-Matching : 웹 프론트엔드 과제 복기 https://github.com/woohyeonjo/ilovecat