[JavaScript] Module

모듈은 필요한 걸 가져다 쓰기만 하면 되는 거 같기도 하고, 깊게 파면 내 생각보다 복잡한 거 같아서 미뤄왔다. 그래도 아무 생각 없이 중괄호 쓰고 그냥 가져오고 하는 것보다 알고 쓰는 게 좋을 거 같아서 정리했다.

 

// 모듈(Module)이란 특정 데이터들의 집합(파일)
// 모듈 가져오기(import), 모듈 내보내기(export)
// 가져오기(import) 선언은 모듈의 최상위 수준에서만 사용 가능

export const hello = function () {
  console.log('Hello world!');
}

// import { hello } from './module.js';

// 기본 내보내기, 이름이 지정되어 있지 않으므로 임의의 이름을 지어 가져올 수 있음

export default 4564864532
// import number (임의의 이름) from './module.js';

// 이름 내보내기, 중괄호로 import 해주면 됨
export const str = "Hello world!";
export const arr = [];
export const func = () => {};
// // import number (임의의 이름), { str, arr, func } from './module.js';

// * 와일드카드, 여러 개의 개념을 한 번에 지정, 즉 모든 것을 의미

// as, 이름이 마음에 들지 않을 때 사용하면 원하는 이름을 지정할 수 있음
// import arr as Array from './module.js';

// 모듈 동적으로 가져오기
// 가져오기는 모듈의 최상단에서만 선언 가능
// import 함수를 이용하면 중간에 가져올 수 있음

setTimeout(()=>{
  console.log(import('./Object.js')).then(abc=>{
    console.log(abc);
  })
}, 1000);
// async, await로 코드 짤 수도 있음

// 가져오자마자 내보내기
// export from

// 한 번에 가져다 쓸 수 있으므로 자주 쓰임
// mdn 설명: 부모 모듈이 자식 모듈을 가져와서 다시 내보낼 수도 있습니다. 즉, 여러 개의 모듈을 모아놓을 하나의 모듈을 만들 수 있습니다.

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Modules#a_background_on_modules

JavaScript modules - JavaScript | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/export

export - JavaScript | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import

import - JavaScript | MDN

 

읽어보면 좋을 것 같다.