본문 바로가기

코딩도 합니다/JS

[자바스크립트 js] 모듈 복습 및 활용 / 직전 게시물 정리



  1. 선언문 export

export const title = 'Module';

 

 

 

 

  2. 선언된 변수나 함수를 코드 블록으로 묶어서 export

const printer = (value) => {
  console.log(value);
};

const arrPrinter = (arr) => {
  arr.forEach((el, i) => {
    console.log(`${i + 1}. ${el}`);
  })
};

export { printer, arrPrinter };

 

 

 

 

  3. as 키워드로 이름을 변경해서 export

const printer = (value) => {
  console.log(value);
};

const arrPrinter = (arr) => {
  arr.forEach((el, i) => {
    console.log(`${i + 1}. ${el}`);
  })
};

export { printer as namedPrinter, arrPrinter };

 

 

 

 

  4. default 키워드로 표현식을 export

const title = 'Module';

export default title;

 

4-1. default 키워드로 여러 대상을 객체 값으로 모아서 export

const title = 'Module';

const printer = (value) => {
  console.log(value);
};

const arrPrinter = (arr) => {
  arr.forEach((el, i) => {
    console.log(`${i + 1}. ${el}`);
  })
};

export default { title, printer, arrPrinter };

 

 

 

 

  5. import 키워드 이후에 중괄호 사용하기
: 모듈 파일에서 export하는 항목들을 선택적으로 불러오기

import { title, data } from './modules.js';

 

5-1. as 키워드 사용해서 import

import { title as moduleTitle, data } from './modules.js';

 

 

 

 

  6. 와일드카드 문자 *로 export돈 항목둘을 모두 import

import * as modules from './modules.js';

 

 

 

 

  7. default export된 대상을 import

import { defult as modules } from './modules.js';

 

7-1. default 된 내용을 축약형으로 import

import modules from './modules.js';

 

7-2. default로 가져온 여러 내용을 사용

  • 여러 개의 기능으로 나누어진 모듈을 import한 다음 다시 export하는 모듈 파일을 만들 수 있다.
  • 비슷한 특징을 가진 여러 모듈 파일들을 다시 하나의 모듈파일로 만들 수 있어서 파일 관리에 유용하다.
// (modules.js)
import module1 from './sub-module1.js';
import module2 from './sub-module2.js';
import module3 from './sub-module3.js';

export { module1, module2, module3 };
// index.js
import { module1, module2, module3 } from 'modules.js';

 

728x90