[JavaScript] 자바스크립트 처리 파일 분할하기 (ES 모듈)

263_자바스크립트 처리 파일 분할하기 (ES 모듈)

[적용]

• 처리에 따라 파일을 분할하고 싶을 때

---

[내용]

ES 모듈은 여러 자바스크립트의 파일을 의존 관계에 따라 불러오는 작업을 한다.

규모가 큰 프로그램이 하나의 자바스크립트 파일만을 사용하게 되면

기능별 구조의 파악과 분류가 복잡하고 어려워 버그의 원인이 되기도 한다.

 

JavaScript      

class MyClass1 {
  // 10줄의 코드
}

class MyClass2 {
  // 10줄의 코드
}

new MyClass1();
new MyClass2();

 

ES 모듈을 사용하면 처리에 따라 자바스크립트 파일의 분할이 가능하다. 

내보내는 모듈은 export를, 가져오는 모듈은 import를 사용한다.

https://stonefree.tistory.com/452

[JavaScript] 자바스크립트에서 모듈 내보내기 (export)

https://stonefree.tistory.com/453

[JavaScript] 자바스크립트에서 모듈 가져오기 (import)

 

MyClass1과 MyClass2로 문자열을 가져와 #log 요소 내부에 출력하는 샘플을 확인해 보자.

JavaScript                                                                                                                                                       MyClass1.js

export class MyClass1 {
  myMethod() {
    return 'MyClass1 메소드가 실행되었습니다.';
  }
}

JavaScript                                                                                                                                                       MyClass2.js

export class MyClass2 {
  myMethod2() {
    return 'MyClass2 메소드가 실행되었습니다.';
  }
}

JavaScript                                                                                                                                                         main.js

// MyClass1.js 가져오기
import { MyClass1 } from './MyClass1.js';
// MyClass2.js 가져오기
import { MyClass2 } from './MyClass2.js';

// MyClass1 메소드로 문자열 가져오기
const message1 = new MyClass1().myMethod1();
// MyClass2 메소드로 문자열 가져오기
const message2 = new MyClass2().myMethod2();

// #log 요소에 출력
const log = document.querySelector('#log');
log.innerHTML += `<p>${message1}</p>`;
log.innerHTML += `<p>${message2}</p>`;

 

ES 모듈의 사용은 HTML script 태그에 type="module" 속성을 사용한다.

 

HTML                                                                                                                                                              index.html

<script type="module" sec="main.js" defer></script>
...생략...
<div id="log"></div>

 

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김