# Lazy loading

40개의 포스트

[JS] - BUG: `Can't' find variable: IntersectionObserver`

IntersectionObserver 사용할 때 주의해야 할 부분!

2023년 5월 12일
·
0개의 댓글
·
post-thumbnail

React Module Federation를 이용한 Lazy Loading 예제 (TypeScript)

React Module Federation을 이용한 Lazy Loading 예제를 통해 이를 더욱 자세히 알아보겠습니다.Host 애플리케이션에서는 다음과 같이 webpack.config.js 파일을 설정합니다.위의 설정에서 name은 현재 애플리케이션의 이름을, rem

2023년 3월 28일
·
0개의 댓글
·
post-thumbnail

React Module Federation를 이용한 Lazy Loading

이 문서에서는 React Module Federation이 무엇인지와 함께, 이를 이용한 Lazy Loading 예제를 설명합니다.React Module Federation은 웹에서 다양한 JavaScript 모듈들을 독립적으로 개발하고, 이를 하나의 애플리케이션으로

2023년 3월 28일
·
0개의 댓글
·
post-thumbnail

장바구니 탐색 API 리팩토링 (N+1 문제 해결)

관련 ERD 구조와 기능 설명장바구니 조회 관련 ERD 장바구니 탐색 API는 고객에게 상품 정보와 이미지까지 보여줄 필요가 있기 때문에 현재 로그인한 유저의 Profileid를 이용해 Cart, Product, ProductImage 정보를 가져와야한다. 이때 Ca

2023년 3월 10일
·
0개의 댓글
·
post-thumbnail

[Spring Data JPA] fetch join에서 Lazy Loading이 작동하지 않는 문제

Spring Data JPA를 사용하다 보면 fetch = FetchType.LAZY을 설정했음에도 불구하고 Lazy Loading이 적용되지 않는 상황이 발생 할 수 있다. 이 포스팅에서는 해당 문제가 발생하는 경우 2가지를 적어놔 이 글을 본 다른이가 나처럼 개고생

2023년 3월 9일
·
0개의 댓글
·
post-thumbnail

React Suspense와 lazy Loading

Suspense로 선언적인 loading상태 처리와, lazy loading을 적용해 프로젝트에서 초기 로드시간을 감소시킨 부분

2023년 3월 8일
·
0개의 댓글
·
post-thumbnail

스트림이 게으르기 때문에 얻을 수 있는 장점!!

모던 자바 인 액션 5장을 읽으면서 filter는 쇼트셔킷을 지원하지 않는다는 것에 놀라웠다.나는 기본적으로 모든 스트림이 쇼트셔킷을 지원하는 걸로 알고 있었기 때문이다.그래서 내가 쇼트셔킷으로 잘못 알고 있던 루프퓨전과 쇼트셔킷에 대해 알아보기로 했다. 스트림 파

2023년 3월 8일
·
0개의 댓글
·
post-thumbnail

React의 선언형 에러처리(Error Boundary)

Error Boundary의 기본적인 사용법

2023년 3월 7일
·
0개의 댓글
·
post-thumbnail

[Frontend] Lazy Loading, Suspense 그리고 SSR

Suspense, lazy loading을 통한 성능 개선 및 React18에서 SSR에 대한 기능 추가에 관련된 글입니다.

2023년 2월 26일
·
0개의 댓글
·
post-thumbnail

웹 앱의 번들 크기 줄이기

CommonJS 등의 모듈은 트리쉐이킹이 안됨.∴ 번들 분석 진행 → 큰 크기의 종속성이 ESM 변형 패키지를 제공하는지 확인하여 교체.

2023년 2월 5일
·
0개의 댓글
·
post-thumbnail

[번역] HTML에서 이미지 최적화하기

CSS의 background-image가 아니라 HTML에 이미지를 넣어야 하는 최적화 관점에서의 이유

2023년 2월 4일
·
0개의 댓글
·
post-thumbnail

[Kakao Cloud School] 13번째 회고록

교육과정 13주차가 지났습니다. Spring Security 실습을 마치고 Linux와 Docker에 대해서 배우게 되었습니다. 교육과정 속에서 꾸준히 공부하는 것이 쉽지 않음을 매번 느낍니다. 하지만 도태되지 않기 위해서 공부를 게을리 하지 않을 것입니다.

2023년 1월 28일
·
0개의 댓글
·
post-thumbnail

Django, N+1 쿼리 문제

쿼리 한번으로 N건의 데이터를 가져왔을때, 원하는 데이털르 얻기위해 N건의 데이터를 가져온 데이터 수만큼 반복해서 2차적으로 쿼리를 수행하는 문제이다.코드

2023년 1월 21일
·
0개의 댓글
·
post-thumbnail

Code splitting시 주의해야할 점(side effect)

어떤 환경이던 Code splitting을 해서 Dynamic하게 import를 진행 때에 주의해야 할 점이 있다. Next.JS의 dynamic을 사용하여 예를들어 설명해보겠다.일반적으로 dynamic import는 위와 같은 상황에 사용하게된다.실제로 이를 dev

2023년 1월 13일
·
0개의 댓글
·

React.lazy()에 관하여...

동적 import를 통해 컴포넌트를 손쉽게 javascript 청크로 분리 할 수 있도록 해주는 메서드

2023년 1월 5일
·
0개의 댓글
·
post-thumbnail

[코드로 배우는 스프링부트 웹 프로젝트] - 연관관계(3) : 조인(Join)연산, Lazy Loading

백엔드, 특히 데이터베이스 부분을 작업할 때 빼놓을 수 없는 개념, 그리고 가장 중요한 개념은 조인 연산이라고 생각합니다.저도 대략 2년전부터 프로젝트로 계속 백엔드를 맡다보니 조인 연산을 많이 접해보긴 했지만 정리해두지 않으면 잊어버리기 쉬운 개념이라 이번 기회에 정

2023년 1월 3일
·
0개의 댓글
·
post-thumbnail

Lazy Loading & Eager Loading

쿼리 요청 방식

2022년 12월 20일
·
0개의 댓글
·

Vue-router 지연된 로딩

번들러를 이용한 앱 제작 시, JavaScript 번들이 매우 크다면 페이지 로딩 시간에 영향을 미칠 수 있다.각 라우트의 컴포넌트를 별도의 단위로 분할하고 경로를 방문할 때 로드하는 것이 효율적일 것이다.Vue의 <span style="background-col

2022년 12월 11일
·
0개의 댓글
·

django test코드 , lazy-loading

TestCase : unittest 프레임 워크의 테스트 조직의 기본 단위Fixture : 테스트를 진행할때 필요한 테스트용 데이터 혹은 설정 등을 이야기 한다. 주로 테스트 가 실행되기 전이나 후에 생긴다.assertion : unittest에서 테스트 하는 부분이

2022년 7월 22일
·
0개의 댓글
·

코드 스플리팅 (code splitting)

코드 스플리팅이란?우리가 js로 개발하게 되면, 따로 코드를 분리하지 않는 이상..하나의 파일에 모든 로직이나 코드들이 들어가있게 된다.한 두개면 상관 없겠지만 점차 규모가 커질수록 js 파일 용량도 커질 것이고,특히 SPA(싱글 페이지 어플리케이션)의 장점이 하나의

2022년 6월 26일
·
0개의 댓글
·