모듈화 정리

1. 스크립트를 모듈화 할 땐 "웹 서버"가 필요하다

모듈화된 스크립트는 자동으로 잠김 처리 되는데,

해당 스크립트가 있는 프로젝트 폴더를 웹 서버로 구동하지 않으면 작동이 안 된다.

이유는 여기 나와있는데 나중에 다시 정리하자...ㅋ

https://www.udemy.com/course/javascript-zw/learn/lecture/30292140#overview

 

아무튼 그래서 serve.js 라는 간편한 웹 서버 구축용 라이브러리를 npm으로 설치하여 사용했다.

 

JS 모듈 프로젝트:

modules-01-starting-project.zip

4.76MB

 

 

2. 하나의 모듈에서 export된 여러 가지 객체들 한 번에 불러와서 사용하기

export const myName = 'Max';
export function greet() { ... }

만약 하나의 모듈에서 이렇게 2개 이상의 객체를 내보내고 있다면,

다른 모듈에서는 이렇게 불러와서 사용할 수 있다.

import * as personData from './file.js';

 

 

3. 동적 모듈 import 하기

기존의 정적 모듈 import 방식은 페이지가 로드될 때 미리 불러와져서 안정성을 제공한다는 장점이 있지만,

사용 빈도가 낮은 모듈까지 정적으로 불러오면 리소스 낭비를 하게 된다.

예를 들어 툴팁 UI 같은 경우, ProjectList처럼 안정적으로 미리 불러올 필요가 없이

툴팁이 필요할 때만 제공되면 된다. (툴팁은 gnb처럼 자주 쓰이는 기능이 아니므로)

이럴 때 모듈을 동적으로 import하면 리소스 관리를 더 효율적으로 할 수 있다.

 

동적 모듈 import 방법을 코드로 알아보자.

// Tooltip 모듈 정적 import
import { Tooltip } from "../App/Tooltip.js";

// ...

const tooltipText = projectElement.dataset.extraInfo;
const tooltip = new Tooltip(
  () => {
    this.hasActiveTooltip = false;
  },
  tooltipText,
  this.id
);
tooltip.attach();
this.hasActiveTooltip = true;

// Tooltip 모듈 동적 import
// import { Tooltip } from "../App/Tooltip.js";

// ...

const tooltipText = projectElement.dataset.extraInfo;
import("./Tooltip.js").then((module) => {  // 동적 import
  const tooltip = new module.Tooltip(
    () => {
      this.hasActiveTooltip = false;
    },
    tooltipText,
    this.id
  );
  tooltip.attach();
  this.hasActiveTooltip = true;
});