Javascript 에 Module 알아요?

Front-end study/Javascript

Javascript 에 Module 알아요?

develo_j 2023. 3. 13. 19:16

# Do you know module in javascript?

Javascript 와 Typescript 에서 사용할 수 있는

module은 파일 안의 코드를 모듈화 하는 것이다.

Module 을 알면 React, Typescript 코드를 볼 때 어색하지 않다.

한 모듈은 한 파일 안에 작성된 코드를 말한다.

따로 모듈화하지 않으면 작성된 코드는 모두 global scope에 들어간다.

만약 2 ~ 3개의 파일에서 같은 이름의 함수를 구현한다면

test_script_01.js

getName() { ... }

test_script_02.js

getName() { ... }

test_script_03.js

getName() { ... }

getName 은 이름 충돌이 일어날 확률이 높고

앞으로 가져올 라이브러리에도 같은 이름의 함수가 포함될 확률이 있다.

모듈은 해당 자바스크립트 파일을

import 한 곳에서만 사용할 수 있도록 제한 한다.

코드로 보면...

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <title>Document</title>
        <script type="module" src="module_test1.js"></script>
        <script type="module" src="module_test2.js"></script>
    </head>

    <body>
        <h1>What is module?-_-</h1>
    </body>
</html>

위처럼 스크립트 태그에 type="module" 을 넣으면

모듈을 넣은 스크립트 즉,

module_test1.js

module_test2.js

파일들은 서로 바로 접근해서 서로의 함수 등을 사용할 수 없는 상태가 된다.

만약 서로 접근해서 사용하고 싶다면 아래와 같이 만들어 준다.

//module_test1.js

export default function plus(a, b) {
    return a + b;
}

//한 파일에서 export default는 한 번만 사용할 수 있다
export function minus() {
    return a - b;
}

export 는 다른 파일에서 사용할 수 있도록 만드는 것

//module_test2.js
import plus_func, {minus as minus_two} from './module_test1';

console.log(plus_func(2, 3));

import 는 다른 파일을 가져와서 사용하는 것

이 때 import하는 함수 이름은 위와 같이 원하는 대로 변경할 수 있다.

default 가 아닌 함수는 { ... } 안에 넣어서 import 하여 사용한다.

마찬가지로 import하는 함수 이름은 as 뒤에 원하는 대로 변경할 수 있다.

//module_test1.js

export const counter = 1;

export function plus(a, b) {
    return a + b;
}

export function minus(a, b) {
    return a - b;
}

default 없이 export 하고

//module_test2.js
import * as calc_module from './module_test1';

console.log(calc_module.counter);
console.log(calc_module.plus(2, 3));
console.log(calc_module.minus(2, 3));

모두 import 해서 변수, 함수 등을 사용할 수도 있다.

이처럼 모듈화를 이용하면

파일들 간에 중복되는 이름 충돌을 방지할 수 있고

모듈간 재사용성을 높여준다.