10 - 2. Module System

10 - 2. Module System

모듈 시스템

• HTML에서 Script의 로드 시점을 조율한다면 웹 브라우저 내 DOM의 로드 속도를 향상 시키는 것이 가능하다

  • 성능에서 고려해야할 것 두가지

    • 다운로드 = Fetch

    • 실행 = execute

      • 두가지가 있다: defer , async

        

      • defer: 지연 스크팁트

        • 나중에 실행한다
        • DOM의 모든 element에 접근할 수 있고, 실행 순서도 보장하기에 가장 범용적으로 사용된다
        • 스크립트 파일끼리의 의존성이 있는 경우에도 사용이 용이하다
        • 순서를 보장한다
          • HTML에 추가된 (Script가 추가된) 순서대로 실행한다
            • 크기나 먼저 도착한 Script 순서 상관없이!

      • async : 비동기 스크립트

        • 다운로드 시작 (fetch)하자마자 바로 실행된다
        • 실행 순서를 비보장한다 = 자본주의!
          • 먼저온 Script가 먼저 실행된다
        • DOM 의존성이 낮을 때 선택한다
          • ex.) 방문자 수 카운터, 광고 관련 script 와 같이 독립적인 역할을 하는 Third Party Scripts에 적합하다

      • parse (HTML Parsing)은 어떤 DOM이 있는지 인지하는 과정이다

        

ESM (ECMAScript Modules)

• 브라우저에서 import 와 export 를 사용하게 해주는 모듈이다

  • 완벽하게 지원하지 않아 Webpack같은 “모듈 번들러”도 함께 사용해야한다

• 비동기 import를 지원한다

  • Top-level await를 지원한다
    • 어느 시점에서 비동기로 가져올지 명시가 가능함
    • await: 비동기 작업을 동기적으로 사용할때 수행하는 키워드이다
  • 비동기 import: 디스크 (네트워크)에서 데이터를 비동기로 읽어온 후 (파싱을 먼저 진행한다)
    • 정적 분석을 진행한다
      • 코드 자체를 분석하여 어떤 이슈 (= error)가 있는지 확인한다
      • 먼저 파싱을 하면 보안에 좋다!

• Named Export의 예시: 고정된 명칭

export const sum = (x, y) => x + y
export const minus = (x, y) => x - y

import **{** sum, minus **}** from './util.mjs'
console.log(sum(2, 4))

• Default Export의 예시: 명칭 변경 가능!

export default (x, y) => x + y

import ssam from './util.mjs'
console.log(ssam(2, 4))

const sum = (x, y) => x + y
export default sum

import ssam from './util.mjs'
console.log(ssam(2, 4));