자바스크립트 + 리액트 디자인 패턴

55

Chapter 05_

최신 자바스크립트 문법과 기능

실행하기 전에 먼저 모듈을 다운로드하고 실행해야 합니다. 따라서 초기 페이지 로드 시 많

은 코드를 미리 로드해야 하므로 성능에 문제가 생길 수도 있습니다.

import {cakeFactory} from "/modules/cakeFactory.mjs";

// 미리 로드된 정적 가져오기

cakeFactory.oven.makeCupcake( "sprinkles" );

cakeFactory.oven.makeMuffin( "large" );

5.6

동적으로 모듈 가져오기

모듈을 초기에 모두 미리 로드하기보다는 필요한 시점에만 로드하는 것이 더 이로울 때가 있

습니다. 지연 로딩

Lazy

-

loading

모듈을 사용하면 필요한 시점에 로드할 수 있습니다. 예를 들어

사용자가 링크나 버튼을 클릭할 때 로드하게 만들 수 있어 초기 로딩 시간을 줄일 수 있습니

다. 이게 바로 동적 가져오기

dynamic

import

11

가 생겨난 이유입니다.

동적 가져오기는 함수와 비슷한 새로운 형태의 가져오기입니다.

import

(

url

)

는 요청된 모

듈의 네임스페이스 객체에 대한 프로미스

promise

객체를 반환합니다. 이 프로미스 객체는 모

듈 자체와 모든 모듈 의존성을 가져온 후, 인스턴스화

instantiate

하고 평가한 뒤에 만들어집니 ...