JavaScript 재사용성을 고려한 Module 그리고 import, export (ES6)

JavaScript는 모두 알다시피 단순한 웹 사이트를 만들기 위한 보조적인 기능을 수행하기 만들어졌다. 그래서 다른 언어와 비교해 보았을 때 문제 되는 점들이 많았다. 그 중 제일 아쉬웠던 부분은 Module 기능을 지원하지 않는 것이었다. 왜 Module 기능을 지원하지 않은 것이 아쉬운 부분인지 한번 알아보자.

Module 이란 ?

구현 세부 사항을 캡슐화하고 공용으로 필요한 API를 노출시킨다. 즉, 다른 코드에서 쉽게 로드하고 사용할 수 있도록 재사용 가능한 코드 조각이다.

Module은 기능별로 분리되어 작성되므로 유지보수 및 효율성을 더 높일 수 있다.

Module의 특징은 ?

1. 코드 추상화

어느 특정한 Module에 기능을 위임하여 실제 구현의 복잡도를 이해할 필요가 없다.

2. 코드 캡슐화

공용으로 API를 노출 시키지 않음으로써 Module 내부에 코드를 숨길 수 있다.

3. 코드 재사용

똑같은 코드들을 하나의 Module에 위임한 후 불러오는 형태로 반복성을 줄일 수 있다.

4. 의존성 관리

코드를 재 작성하지 않아도 쉽게 의존성 변경이 가능하다.

* 의존성 - 프로그래밍에서 의존 관계는 new를 뜻한다.

JavaScript에서도 Module을 사용하자 !

ES6 에서 JavaScript에서도 동작하는 Module 기능을 추가하였다.

각각의 Module은 독립적인 파일 Scope를 가지고 있기 때문에 Module 안에 선언된 모든 것은 해당 모듈 내부에서만 사용 가능하다. 하지만 ES6에서는 모듈 내부가 아닌 외부에서도 사용 가능하게 export와 import 키워드를 제공한다.

export와 import, 두 개의 키워드를 사용해보자 !

Export

기본자료형, 함수, 클래스, 객체 등의 값을 내보낼 때 사용한다.

// 상수 내보내기

export const NUM = Math.sqrt(2);

// 함수 내보내기

export function square(x) {

return x * x;

}

// 클래스 내보내기

export class Chicken{

constructor(price) {

this.price = price;

}

}

여러 개를 한번에 묶어서 export 할 수도 있습니다.

export { NUM, square, Chicken }

Import

기본자료형, 함수, 클래스, 객체의 export 된 값을 받을 때 사용한다.

아래의 예제는 만약 위에 export 한 파일이 dataFactory.js 이며, 같은 폴더 안에 있다고 가정한 예제이다.

import {

NUM,

square,

Chicken

} from './dataFactory';

console.log(NUM); // 4

console.log(square(2)); // 4

console.log(new Chicken(20000)); // Chicken { price: 20000 }

이름을 변경하여 import 할 수도 있다. 이름 변경 시 as 를 사용한다.

import {

NUM as number,

square as squ,

Chicken as Chk

} from './dataFactory';

console.log(number); // 4

console.log(squ(2)); // 4

console.log(new Chk(20000)); // Chicken { price: 20000 }

하나의 이름으로 모두 import 하는 방식도 있다.

import * as dataFactory from './dataFactory';

console.log(dataFactory.NUM); // 4

console.log(dataFactory.square(2)); // 4

console.log(new dataFactory.Chicken(20000)); // Chicken { price: 20000 }

감사합니다.

오늘도 해피 코딩하세요 !