[JS-FINAL] 12. 모듈

유데미 강의 JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정을 들으면서 자바스크립트를 다시 한 번 익히는 중이다. 계속되는 포스팅에서 강의를 듣고 미처 몰랐던 부분, 심화 이해가 필요한 부분에 대해 주제별로 간단하게 기록하겠다.

1. JS 모듈을 사용하는 이유

• script 태그 src로 가져오는 경우와는 달리 각 파일의 종속성을 지정할 수 있으므로 올바른 순서를 수동으로 관리할 필요가 없어진다.
• 재사용성을 높이고 변수간 충돌을 방지한다.

2. export, import

// 1.
// test.js
export const a = 1;
// app.js
import { a } from './test.js';

// 2.
// test.js
export const a = 1;
export const b = 2;
// app.js
import { a, b } from './test.js';
// 또는
import * as testAll from './test.js';
// testAll.a

// 3. default는 파일당 한 번만
// test.js
const a = 1;
export const b = 2;

export default a;
// app.js
import a from './test.js';
import {b} from './test.js';

// 4. 이름 바꾸기
// test.js
const a = 1;
export const b = 2;

export default a;
// app.js
import A from './test.js';// default export는 하나만 존재하기때문에 이름은 원하는대로 지정할 수 있다.
import {b as B} from './test.js';

3. 동적 import

• 페이지 로딩 속도를 최적화.
• import() 함수는 Promise를 반환.

import('./Tooltip.js').then((module) => {
      const tooltip = new module.Tooltip(
        () => (this.isOpenTooltip = false),
        tooltipText,
        this.id
      );
      tooltip.attach();
      this.isOpenTooltip = true;
    });

4. This

• JavaScript의 모듈은 고유한 범위를 갖기 때문에, 모듈 스코프의 최상위 수준에서 this를 참조하면 undefined를 반환한다.
• globalThis는 모든 JavaScript 환경에서 일관되게 작동하므로, 브라우저 환경이든 Node.js 환경이든 globalThis를 사용하면 항상 전역 객체에 접근한다. 브라우저 환경일 경우 globalThis는 window.

5. 모듈에서 내보내지 않은 코드

모듈에서 내보내지 않은 코드는 모듈이 다른 파일에서 처음으로 임포트될 때 한 번만 실행된다.