# Lazy loading
[JS] - BUG: `Can't' find variable: IntersectionObserver`
IntersectionObserver 사용할 때 주의해야 할 부분!
React Module Federation를 이용한 Lazy Loading 예제 (TypeScript)
React Module Federation을 이용한 Lazy Loading 예제를 통해 이를 더욱 자세히 알아보겠습니다.Host 애플리케이션에서는 다음과 같이 webpack.config.js 파일을 설정합니다.위의 설정에서 name은 현재 애플리케이션의 이름을, rem
React Module Federation를 이용한 Lazy Loading
이 문서에서는 React Module Federation이 무엇인지와 함께, 이를 이용한 Lazy Loading 예제를 설명합니다.React Module Federation은 웹에서 다양한 JavaScript 모듈들을 독립적으로 개발하고, 이를 하나의 애플리케이션으로
장바구니 탐색 API 리팩토링 (N+1 문제 해결)
관련 ERD 구조와 기능 설명장바구니 조회 관련 ERD 장바구니 탐색 API는 고객에게 상품 정보와 이미지까지 보여줄 필요가 있기 때문에 현재 로그인한 유저의 Profileid를 이용해 Cart, Product, ProductImage 정보를 가져와야한다. 이때 Ca
[Spring Data JPA] fetch join에서 Lazy Loading이 작동하지 않는 문제
Spring Data JPA를 사용하다 보면 fetch = FetchType.LAZY을 설정했음에도 불구하고 Lazy Loading이 적용되지 않는 상황이 발생 할 수 있다. 이 포스팅에서는 해당 문제가 발생하는 경우 2가지를 적어놔 이 글을 본 다른이가 나처럼 개고생
React Suspense와 lazy Loading
Suspense로 선언적인 loading상태 처리와, lazy loading을 적용해 프로젝트에서 초기 로드시간을 감소시킨 부분
스트림이 게으르기 때문에 얻을 수 있는 장점!!
모던 자바 인 액션 5장을 읽으면서 filter는 쇼트셔킷을 지원하지 않는다는 것에 놀라웠다.나는 기본적으로 모든 스트림이 쇼트셔킷을 지원하는 걸로 알고 있었기 때문이다.그래서 내가 쇼트셔킷으로 잘못 알고 있던 루프퓨전과 쇼트셔킷에 대해 알아보기로 했다. 스트림 파
[Frontend] Lazy Loading, Suspense 그리고 SSR
Suspense, lazy loading을 통한 성능 개선 및 React18에서 SSR에 대한 기능 추가에 관련된 글입니다.
웹 앱의 번들 크기 줄이기
CommonJS 등의 모듈은 트리쉐이킹이 안됨.∴ 번들 분석 진행 → 큰 크기의 종속성이 ESM 변형 패키지를 제공하는지 확인하여 교체.
[Kakao Cloud School] 13번째 회고록
교육과정 13주차가 지났습니다. Spring Security 실습을 마치고 Linux와 Docker에 대해서 배우게 되었습니다. 교육과정 속에서 꾸준히 공부하는 것이 쉽지 않음을 매번 느낍니다. 하지만 도태되지 않기 위해서 공부를 게을리 하지 않을 것입니다.
Django, N+1 쿼리 문제
쿼리 한번으로 N건의 데이터를 가져왔을때, 원하는 데이털르 얻기위해 N건의 데이터를 가져온 데이터 수만큼 반복해서 2차적으로 쿼리를 수행하는 문제이다.코드
Code splitting시 주의해야할 점(side effect)
어떤 환경이던 Code splitting을 해서 Dynamic하게 import를 진행 때에 주의해야 할 점이 있다. Next.JS의 dynamic을 사용하여 예를들어 설명해보겠다.일반적으로 dynamic import는 위와 같은 상황에 사용하게된다.실제로 이를 dev
[코드로 배우는 스프링부트 웹 프로젝트] - 연관관계(3) : 조인(Join)연산, Lazy Loading
백엔드, 특히 데이터베이스 부분을 작업할 때 빼놓을 수 없는 개념, 그리고 가장 중요한 개념은 조인 연산이라고 생각합니다.저도 대략 2년전부터 프로젝트로 계속 백엔드를 맡다보니 조인 연산을 많이 접해보긴 했지만 정리해두지 않으면 잊어버리기 쉬운 개념이라 이번 기회에 정
Vue-router 지연된 로딩
번들러를 이용한 앱 제작 시, JavaScript 번들이 매우 크다면 페이지 로딩 시간에 영향을 미칠 수 있다.각 라우트의 컴포넌트를 별도의 단위로 분할하고 경로를 방문할 때 로드하는 것이 효율적일 것이다.Vue의 <span style="background-col
django test코드 , lazy-loading
TestCase : unittest 프레임 워크의 테스트 조직의 기본 단위Fixture : 테스트를 진행할때 필요한 테스트용 데이터 혹은 설정 등을 이야기 한다. 주로 테스트 가 실행되기 전이나 후에 생긴다.assertion : unittest에서 테스트 하는 부분이
코드 스플리팅 (code splitting)
코드 스플리팅이란?우리가 js로 개발하게 되면, 따로 코드를 분리하지 않는 이상..하나의 파일에 모든 로직이나 코드들이 들어가있게 된다.한 두개면 상관 없겠지만 점차 규모가 커질수록 js 파일 용량도 커질 것이고,특히 SPA(싱글 페이지 어플리케이션)의 장점이 하나의