모듈

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

하지만 es6에서는 모듈이란 시스템이 도입되어 각 js파일을 하나의 모듈(부품) 단위로 작성하고 관리할 수 있게 되었습니다. 즉 여러개의 모듈(부품)단위로 개발을 하고 이 모듈들을 모아 결합시켜 하나의 서비스를 담당할 수 있게 된것입니다.

이렇게 모듈 단위로 작성된 코드(함수,변수등)는 필요한 다른 모듈에서 import 해오거나 현재 코드를 export시켜서 내보낼 수 있습니다. 또한 모듈단위로 개발된 js파일은 의존성파일이라고도 불립니다.

뭔가 좋아보이긴 하는데... 좋아 보인다고 무작정 따라 쓰는 건 좋지 못하겠죠. 그럼 모듈 단위로 코드를 관리할 때의 장점은 뭐가 있을까요?

모듈단위 개발의 장점

모듈로 관리 했을 때의 장점을 이해하려면 모듈로 관리하지 않았을 때의 단점이 무엇인가를 생각해보시면 됩니다.

es5방식으로 개발을 했을때의 가장 큰 문제점은 의 중복입니다. 모든 변수와 함수가 하나의 글로벌 네임스페이스 내부에 존재하여 변수명이나 함수명 간의 충돌이 발생할 수 있는 것이죠.

이를 모듈단위로 변경하게 되면 각 모듈별로 네임스페이스를 가지므로 이를 방지할 수 있습니다.

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

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

모듈 문법

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

export / import

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

//현재 파일(sayHi.js)에서 sayHi함수 내보내기
function sayHi(){

}
const abc = "aaaa";
export {sayHi}
export {abc}

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

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

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'

as 문법

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

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

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시 정확한 변수명을 입력할 필요 없이 내 마음대로 변경해도 상관 없습니다.

참고사이트

모듈 소개iliakan

JavaScript modules - JavaScript | MDN