[Javascript] 모듈 Module

Programming/Javascript

[Javascript] 모듈 Module

Bam_t 2021. 10. 5. 16:13

728x90

ES2015가 등장하면서 자바스크립트에서도 모듈 기능을 지원하기 시작했습니다.

1. 모듈

모듈이란 특정 기능을 가진 함수나 변수들을 모아둔 것을 말합니다. 예를 들면 수학적 계산을 하는 함수들을 모아둔다 던가, 문자열과 관련한 다양한 기능들을 모아두고 모듈이라고 할 수 있습니다. 이렇게 비슷한 기능을 가진 함수와 변수들을 모아두었기 때문에 한 프로그램에서 뿐만이 아니라 다른 프로그램에서도 이용할 수 있는 기능의 모임이 될 수도 있습니다. 그렇기에 모듈은 함수처럼 하나당 한 파일을 만들기 보다는 비슷한 기능끼리 여러개를 모아서 하나의 파일을 구성합니다.

2. 모듈 만들어보기

간단하게 덧셈, 뺄셈을 하는 모듈을 만들어보겠습니다.

우선 html 파일인데, <script>태그의 속성에 type="module"을 사용해서 모듈을 사용하겠다고 알려야합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ModuleTest</title>
</head>
<body>
<script type="module" src='../js/index.js'></script>
</body>
</html>

다음은 모듈입니다. 간단하게 덧셈만을 하는 모듈을 만들었습니다. 여기서 눈여겨 봐야할 점은 앞에 붙은 export 키워드 입니다. export는 모듈 외부에서 이용하겠다고 알리는 키워드입니다. 그래서 모듈 내부에서만 이용할 함수나 변수 앞에는 export를 붙이지 않아도 되지만, 모듈 외부에서 이용하게 될 기능들 앞에는 export 키워드를 붙여야지만 외부에서 해당 함수나 변수에 접근할 수 있습니다.

export const add = (num1, num2) => {
    return num1 + num2;
}

이제 모듈을 실제로 사용해볼 차례입니다. 모듈을 사용하기 위해 JAVA 처럼 import 구문을 이용합니다. import 뒤에 모듈에서 가져올 함수/변수명을 적고 from 경로를 적으면 됩니다.

import {사용할 모듈의 함수/변수} from '모듈이 존재하는 경로';

import {add} from '../lib/arithmeticOperation.js';

const num1 = 10;
const num2 = 4;

console.log(add(10, 4));

마지막으로 모듈에 빼기 기능인 sub를 추가해보겠습니다.

export const add = (num1, num2) => {
    return num1 + num2;
}

export const sub = (num1, num2) => {
    return num1 - num2;
}

import {add, sub} from '../lib/arithmeticOperation.js';

const num1 = 10;
const num2 = 4;

console.log(add(10, 4));
console.log(sub(10, 4));

3. import~as

import문에는 as라는 구문도 존재합니다. as의 실제 영어 용법처럼 이름을 바꿔서 이용하는데 사용이 가능합니다.

import {add as a, sub as s} from '../lib/arithmeticOperation.js';

const num1 = 10;
const num2 = 4;

console.log(a(10, 4));
console.log(s(10, 4));

반대로 모듈측에서 내보낼 때 as를 사용해서 이름을 변경할 수도 있습니다.

export const add = (num1, num2) => {
    return num1 + num2;
}

export const sub = (num1, num2) => {
    return num1 - num2;
}

export {add as a, sub as s};

import {a, s} from '../lib/arithmeticOperation.js';

const num1 = 10;
const num2 = 4;

console.log(a(10, 4));
console.log(s(10, 4));

또 다른 용법으로는 가져올 것이 많은 경우 import * as와 같은 형식으로 객체형식으로 가져올 수도 있습니다.

import * as Op from '../lib/arithmeticOperation.js';

const num1 = 10;
const num2 = 4;

console.log(Op.add(10, 4));
console.log(Op.sub(10, 4));

이것이 자바스크립트의 모듈 사용법입니다. 여담으로 리액트에서는 이 import 구문으로 모듈을 이용하지만 node에서는 require와 exports라는 것을 이용해서 다른 방식으로 모듈을 가져오기 때문에 이점도 유의해야합니다.

참조

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import

import - JavaScript | MDN

정적 import 문은 다른 모듈에서 내보낸 바인딩을 가져올 때 사용합니다.

developer.mozilla.org

728x90