CORE JS 모듈

모듈 소개

개발하는 애플리케이션의 크기가 커지면 언젠간 파일을 여러개로 분리해야함

이때 분리된 파일 각각을 모듈이라고 부르는데 모듈은 대개 클래스 하나 혹은

특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성

 

모듈이란

모듈은 단지 파일 하나에 불과, 스크립트 하나는 모듈 하나

모듈에 특수한 지시자 export import를 적용하면

다른모듈을 불러와 불러온 모듈에 있는 함수를 호출하는것같은 기능공유 가능

• export 지시자를 변수나 함수 앞에 붙이면 외부 모듈에서 해당 변수나 함수에 접근할 수 있음(모듈 내보내기).
• import 지시자를 사용하면 외부 모듈의 기능을 가져올 수 있음(모듈 가져오기).

 

모듈의 핵심기능

엄격모드로 실행됨

모듈 레벨 스코프

- 모듈은 자신만의 스코프가 있따 모듈내부에서 정의한 변수나 함수는 다른 스크립트에서 접근할 수 없음

단 한 번만 평가됨

- 모듈은 최초 호출 시 단 한 번만 실행됨, 실행 후 결과는 이 모듈을 가져가련느 모든 모듈에 내보내짐

 

 

모듈 내보내고 가져오기

선언부 앞에 export 붙이기

변수나 함수, 클래스를 선언할 때 맨 앞에 export를 붙이면 내보내기가능

클래스나 함수를 내보낼 떈 세미콜론 붙이지말기 ! 

// 배열 내보내기
export let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

// 상수 내보내기
export const MODULES_BECAME_STANDARD_YEAR = 2015;

// 클래스 내보내기
export class User {
  constructor(name) {
    this.name = name;
  }
}

 

선언부와 떨어진 곳에 export 붙이기

선언부와 export가 떨어져있어도 내보내기 가능

// 📁 say.js
function sayHi(user) {
  alert(`Hello, ${user}!`);
}

function sayBye(user) {
  alert(`Bye, ${user}!`);
}

export {sayHi, sayBye}; // 두 함수를 내보냄, export문을 함수 선언부 위에 적어주는 것도 동일하게 동작

• 클래스, 함수 등의 선언부 앞에 export 붙여서 내보내기:
  • export [default] class/function/variable ...
• 이름 없는 개체 내보내기:
  • export {x [as y], ...}.
• 다시 내보내기:
  • export {x [as y], ...} from "module"
  • export * from "module" (default export는 다시 내보내 지지 않음)
  • export {default [as y]} from "module" (default export를 다시 내보냄)

 

import*

가져고싶다면 아래와 같이 목록을 만들어 import {...}안에 적어두면 됨

// 📁 main.js
import {sayHi, sayBye} from './say.js';

sayHi('John'); // Hello, John!
sayBye('John'); // Bye, John!

• named export 가져오기:
  • import {x [as y], ...} from "mod"
• default export 가져오기:
  • import x from "mod"
  • import {default as x} from "mod"
• 한 번에 가져오기:
  • import * as obj from "mod"
• 모듈을 가져오긴 하지만(코드는 실행됨), 변수에 할당하지 않기:
  • import "mod"