# lazyloading
[TIL] JPA에서의 OSIV, 안좋은 것인가?
팀원들과 JPA의 영속성 컨텍스트에 대해 얘기를 나누던 도중, OSIV를 듣게 되었다.연관 관계에서 fetch가 Lazy로 설정돼 있다면, 해당 메소드에서 연관 관계 엔티티를 조회할 시 트랜잭션 환경에서 진행되야 하는 것으로 알고 있다.그 이유는, 영속성 컨텍스트를 통
[프로젝트] ImagelazyLoading 적용
프로젝트가 어느정도 마무리 되고 시간적인 여유가 생겨 웹 성능 최적화를 위해 ImagelazyLoaidng을 적용해보았다. lazyLoading을 적용하면1) 해당 페이지의 모든 이미지를 처음에 다운로드 하지 않으므로 페이지를 빠르게 로드할 수 있을거고2) 페이지가 빠
React.lazy와 @loadbale/component의 차이점
리액트로 진행한 프로젝트을 라이트하우스로 돌려봤고 그 중 나온 권장 사항이 사용하지않는 자바스크립트 줄이기였다. 해당 글에서는 위의 이미지와 같이 리액트에서는 code-split을 추천했고 React.lazy()를 사용하기로 했다. 기존 코드수정된 코드이렇게 코드를
view에 스크롤이 중첩된다면 lazy loading을 어떻게 줄 수 있을까?
flutter에서 ui작업을 하다보면 SingleChildScrollView나 ListView와 같은 전체 위젯을 감싸서 페이지를 전체 스크롤링하는 경우들이 있다.ListView 위젯이 전체를 감싸고 위젯 내부에 child로 또 ListView.builder가 들어가는
Lazy Loading
지연 로딩(Lazy Loading)은 초기 로딩 시간을 줄이고 페이지 로딩 속도를 개선하기 위한 기술로, 리소스들을 실제로 사용하는 시점에 로딩하는 것을 이릅니다. 특히, 이미지 최적화에 가장 많이 사용되는 기법입니다. Lazy Loading을 사용하면 웹 페이지의 초
Lazy loading
✍️ 이미지 갤러리 페이지나, 리스트 페이지를 구현 할 때 첫 화면이 늦게 뜨는 것을 완화하고자 사용 하는 주된 기법이다. 플러그인, 스크롤 이벤트 함수를 사용 하는 방법도 있지만, 이번엔 API를 이용하는 방법에 대해 정리 해보았다.
[JPA] lazyLoading 및 조회 성능 최적화 ( XTOMany )
[JPA] lazyLoading 및 조회 성능 최적화 ( XTOMany )
N+1 이슈 - JPA EagerLoading과 LazyLoading 그리고 fetch Join
1) EagerLoading : 특정 엔티티를 조회할 때 연관된 모든 엔티티를 같이 로딩, 즉시 로딩이라고 합니다.즉시 로딩은 연관된 엔티티를 모두 가져온다는 장점이 있지만,실무에서 엔티티간의 관계가 복잡해질수록 조인으로 인한 성능 저하를 피할 수 없게 됩니다.JPA에
[javascript]IntersectionObserver를 활용한 스크롤 lazy loading
프로젝트를 진행하면서 API 콜을 통해 데이터들을 받아오는데 받아온 데이터를 화면에 보여주고 싶다. 그런데 한 번에 모든 데이터를 다 보여주는 것은 성능에 무리가 있다.(10000개를 한 번에? 렉 걸리겠죠) 그래서 있는 개념이 레이지 로딩이다.레이지 로딩(lazy l
SpringBoot with JPA 프로젝트(N:1) 2.@ManyToOne,Lazy loading
JPA에서 관계를 고민할 때는 FK쪽을 먼저 해석하면 편리하다 앞에서 만든 Board 와 Member의 관계는 N:1(다대일) 관계가 되므로@ManyToOne 어노테이션을 적용해야 한다 @ManyToOne : DB상에서 외래키의 관계로 연결된 엔티티 클래스에 설정한다B
[TIL] 9월 6일
OrderSheet 와 OrderHistory의 관계는 OneToOne 이고 지연로딩으로 설정해놨다. 위의 findWithOrderSheetByUserId() 를 호출하면 해당 쿼리 이후에 아래와 같이 orderHistory의 select 쿼리가 나간다...orderH
[TIL] Lazy Loading
레이지 로딩이란 웹사이트에서 DOM이 로드되고 나서 컨텐츠를 불러 올때 이미지와 같이 용량이 큰 파일들을 일부러 늦게 로드하는 기법을 말한다. 이미지가 적다면 크게 문제가되진 않겠지만 수십개 또는 수백개라면 레이지 로딩을 하지 않고서는 수백개를 다 불러들어와야만 사용자
프로그래머스 데브매칭 무한스크롤
깃허브 repository여러 방법 중 Intersection Observer API 사용loading 속성의 경우 width : 100% 적용 시 width,height가 없어 레이지 로딩 불가observeBottomOf.js : element의 아래 부분에 도달할
이미지 지연 로딩 구현하기 (feat. custom-directive vs component)
custom-directive와 component방식으로 구현하는 이미지 지연로딩에 대해 간단히 비교해보자