Utils 모듈 만들기 (feat. import, export)

Javascript 모듈 만들기

파일별로 나누어진 util 함수들을 한번에 사용할 수 있는 utils 모듈을 만들고 싶어서 모듈을 만들 수 있는 방법들에 대해 알아봄.

(주의, 이 글에서는 모듈을 다루는 모든 방법에 대해서 자세히 다루지는 않습니다)

모듈로 만들 수 있는 방법은 아래와 같습니다.

• Browser 의 <srcipt> 태그

• ES6 Modules(ESM) 의 import

• CommonJS 의 require

• AMD 의 define - require

이것 이외에도 여러 방법이 존재하지만 오늘 다룰 방법은 import, export 입니다.

Import

다른 파일에서 모듈을 불러옴.

default export 만 가져오기

import name from "module-name";

named export 가져오기

import { print, fetch } from './utils';

named export 를 모두 가져오기

import * as util from './util';

별칭 사용하기 (새 이름)

import { member as alias } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";

default export, named export 섞어 쓰기

import defaultMember, { member [ , [...] ] } from "module-name";

import defaultMember, * as alias from "module-name";

Export

export 의 방식에는 두 가지 방법이 존재합니다.

named export

모듈 내에 여러개 존재할 수 있음.

변수 선언과 동시에 내보내도록 하거나

export let name1;
export const name2;
export var name3;
export function name4 () {/*...*/}
export class MyClass {/*...*/}

먼저 정의된 변수들을 모아서 내보낼 수 있음.

const var1;
let var2;
var var3;
​
export { var1, var2, var3 }

변수를 내보낼 때 다른 이름으로 내보낼 수 있음.

let var4;
export { var4 as var5 }     // import { var5 } ... 로 사용해야함.

default export

모듈 내에 하나만 존재할 수 있음.

export default expression;

export default function () {/*...*/}

export default function myFunction () {/*...*/}

export default class {/*...*/}

export default class MyClass {/*...*/}

export default function* () {/*...*/}

변수로 정의하면서 내보내는 방식은 사용할 수 없고,

// Uncaught SyntaxError: Unexpected token const
export default const test = /*...*/ 

여러 개를 묶어내보내는 방식은 가능하지만 default 가 하나만 존재해야함.

const myModule = {/*...*/}
const var1 = () => {}
export { myModule as default, var1 }

import - export 사용하기

import 와 export 를 한번에 하기.

패키지의 다른 모듈들을 한 데 모아 일관된 형태로 내보내거나 관리하고자 할 때 사용.

• ImageUtils.js 만들기

// src/utils/ImageUtils.js
export const getImageUrl = (s, size = null) => {
    //...
}

• NumberUtils.js 만들기

// src/utils/NumberUtils.js
export const formatSeconds = num => {
  //...
};
​

• Stringutils.js 만들기

// src/utils/Stringutils.js
export const formatString = (string, numlines) => {
  // ...
}

• utils 한데로 합치기 (index 에서 모듈의 내보내는 방식)

export * from './ImageUtils';
export * from './NumberUtils';
export * from './StringUtils';

• utils 로 접근해 사용하기

// src/index.js
import * as utils from './utils
utils.getImageUrl(/** ... **/);
utils.formatSeconds(/** ... **/);
utils.formatString(/** ... **/);

Barrel 방식 사용하기.

https://basarat.gitbooks.io/typescript/docs/tips/barrel.html

주의

export - from 을 처리하는 파일 스코프에 식별자를 바인딩 하지는 않기 때문에 export - from 사용 파일 내에서 export 된 것을 사용할 수는 없습니다.

export { formatSeconds } from './NumberUtils';
formatSeconds(123456); // Uncaught ReferenceError: add is not defined