3. 모듈시스템

humanoid robots module

1. Module

ES5에서 자바스크립트를 사용하여 개발을 진행할 때 하나의 서비스에 필요한 모든 기능은 하나의 js파일로 작성하였습니다. 즉 해당 서비스를 담당하는 js파일은 하나 였습니다.

ES6에서는 모듈(module) 시스템이 도입되어 각 js 파일을 하나의 "모듈"(부품)처럼 정의하고 관리할 수 있게 되었습니다.

즉, 서비스를 개발할 때 여러 기능을 모듈(부품)단위로 개발을 하고 필요한 기능을 결합하여 서비스를 완성시킬 수 있게 되었습니다.

이렇게 모듈 단위로 작성된 코드(함수,변수등)는 필요한 다른 모듈에서 import 해오거나 현재 코드를 export시켜서 내보낼 수 있습니다.

2. 모듈단위 개발의 장점

1) 변수명 충돌 문제 해결

ES5 방식에서는 모든 변수와 함수가 전역 공간(Global Scope)에 정의되어야 했습니다. 이로 인해 서로 다른 파일 간에 변수명이 충돌하거나, 기존 값을 덮어쓰는 문제가 자주 발생했습니다. ES6 모듈 시스템에서는 각 모듈이 자신만의 스코프(Scope)를 가지므로 이러한 충돌 문제를 방지할 수 있습니다.

2) 재사용성 증대

다음으로는 코드의 재사용성이 es5방식에 비해 크게 상승했습니다.

es5방식에서 필요한 모든 코드를 하나의 js에 몰아두고 사용해야 했던 반면, 코드를 조각 내어 필요한 위치에 추가하는 모듈방식의 개발은 유지보수성 및 재사용성을 크게 증가시킬 수 있습니다.

하지만 모듈단위 설계가 필요없는 간단한 어플리케이션에서는 필요 없는 개념일 수 있습니다.

3. 모듈 문법

모듈은 플랫폼별 가져오기/내보내기 방법이 상이할 수 있습니다. 이번 장에서는 es표준모듈(esm) 사용방법에 대해서 알아보도록 하겠습니다.

1) export

모듈에서 export는 내보내기의 기능을 가집니다. 즉 내가 만든 기능을 외부 모듈로 내보내기 할때 사용합니다. export 문법은 다음과 같습니다. export {함수명/변수명}

//현재 파일(sayHi.js)에서 sayHi함수 내보내기
function sayHi(){
    console.log('안녕하세요')
}
const abc = "module";
export {sayHi}
export {abc}

// main.js
import { sayHi, abc } from './sayHi.js';

sayHi();            // '안녕하세요'
console.log(abc);   // 'module'

혹은 함수나 변수를 선언과 동시에 export 시킬 수 있습니다.

export const fn1 = a => console.log(a);
export function fn2(b) {
    console.log(b);
}

2) import

모듈에서 import 지시어는 다른 외부 모듈의 기능을 가져오겠다 라는 의미를 가집니다. import 문법은 다음과 같이 사용합니다. import {이름} from '모듈파일경로'

아래 코드예씨를 확인해 봅시다.

//main.html
<script type='module' src='./sayHi.js'></script>
<script type='module'>
import {sayHi} from './sayHi.js' 
sayHi();
</script>

import해올 기능들이 많은 경우 {}안에 이어서 제시하시면 됩니다.

import {sayHi, abc, fn1, fn2} from './sayHi.js'

3) as 문법

만약 다른 모듈에서 동일한 변수명으로 export한 기능을 겹치지 않게 가져오려면 어떻게 해야할까요? 정답은 as문법을 통해 가져올 변수명을 변경해주시면 됩니다. 다음과 같이요.

import {fn1 as renamed} from './sayHi.js'

4) default 문법

모듈당 한 개의 변수를 default 내보내기 시킬 수 있습니다. default문법을 사용한 export/default에는 {}를 생략 가능합니다.

// js
export default abc;

// html
import abc from 'sayHi.js';

import aaaaaa from 'sayHi.js'

// abc와 aaaaaa는 같음.

위 예시처럼 사용해도 되고, default문법은 파일당 1개씩 만 사용 가능하므로 import시 정확한 변수명을 입력할 필요 없이 내 마음대로 변경해도 상관 없습니다.