작성자 : 배광식

검수자 : 장기효, 배광식

Import, Export

module

• 애플리케이션을 구성하는 개별적 요소
• 캡슐화하고 필요한 API를 외부에 노출 (재사용 가능) export
• 다른 코드에서 로드하여 사용 import
• 개발효율성, 유지보수성 향상

ES6 이전 client-side 자바스크립트

• 파일마다 독립적인 scope를 갖지 않고 하나의 전역 객체에 바인딩
• 전역변수의 중복 등 문제가 발생

export

• 모듈은 기본적으로 해당 모듈 내부에서만 참조할 수 있기 때문에 export를 이용해서 외부에서 사용

var, let, const, function, class export가능

// utils1.js
export const name = 'jimmy';

export function sum(x, y) {
    return x + y;
}

export class Circle {
    constructor(radius) {
        this.radius = radius;
    }
}

객체로 구성하여 export

// utils2.js
const name = 'jimmy';

function sum(x, y) {
    return x + y;
}

class Circle {
    constructor(radius) {
        this.radius = radius;
    }
}

export { name, sum, Circle };

import

중괄호 {}를 사용하여 모듈을 import

• export, import의 모듈명이 같아야 한다.

// index1.js
import { name, sum, Circle } from './utils1';

console.log(name); // jimmy
console.log(sum(1, 2)); // 3
console.log(new Circle(10)); // Circle { radius: 10 }

이름 변경 (별칭 사용)

// index2.js
import { name as NM, sum as SM, Circle as CI } from './utils2';

console.log(NM); // jimmy
console.log(SM(1, 2)); // 3
console.log(new CI(10)); // Circle { radius: 10 }

export default

• 하나의 export default만 사용가능, 함수명은 생략가능
• export와 다른점은 import때 { }를 쓰지 않고 모듈명을 임의로 지정할 수 있음
• var, let, const 변수는 사용 X

// utils3.js
export function sum(x, y) {
    return x + y;
}
export default function(x, y) {
    return x + y;
}

임의의 이름으로 import

// index3.js
import isum from './utils3' // export default
import { sum } from './utils3' // export

console.log(isum(1, 2)); // 3
console.log(sum(1, 4)); // 5

babel

ES6 -> ES5 이하의 버전으로 트랜스파일링

• package.json 파일 생성

• 로컬에 babel cli 설치

• 로컬에 babel env preset 설치 (여러 플러그인이나 설정을 미리 설정)

$ npm init -y (--yes: 디폴트 설정으로 package.json파일 생성)
$ npm i babel-cli --save-dev
$ npm i babel-preset-env --save-dev

• .babelrc.json파일 생성

{
    "presets": ["env"]
}

• package.json script add

{
    ......
    "scripts": {
        ......
        "build": "babel . --ignore ./node_modules -d ./dist"
    }
    ......
}

• 실행

$ npm run build