[Javascript] 모듈 Module

16292 단어 모듈JavaScript자바스크립트JavaScript

모듈 Module

모듈(Module)은 특정 기능을 가진 함수나 변수들을 모아놓은 것을 의미합니다. 예를들면 다양한 정렬 기능이 포함된 함수들을 모듈로 모아놓고, 그 중에서 필요한 것만 쏙쏙 뽑아서 사용하는 것을 모듈이라고 할 수 있습니다.

모듈은 주로 비슷한 기능들, 혹은 하나의 기능만하는 함수/변수를 모아놓았기 때문에, 하나의 프로그램 뿐만 아니라 다른 프로그램에서 모듈만 가져온다면 이용할 수 있는 기능의 모임이라고 볼 수 있습니다. 그렇기 때문에 모듈을 잘 이용하면 코드가 잘 분리되고, 유지보수가 쉬워진다는 이점이 있습니다.

모듈 만들기 export

간단한 덧셈 뺄셈 모듈을 만들면서 학습해보겠습니다.
다음은 html문서인데, 여태까지 자바스크립트를 삽입하기 위해서는 <script>태그의 type속성에 text/javascript를 지정해주었던 것과 다르게, 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>

html문서의 준비가 끝나면 자바스크립트 모듈을 만들어볼 차례입니다. 함수나 변수 앞에 export 키워드를 붙이면 해당 함수, 변수를 모듈로 내보낼 준비가 완료됩니다.

// ./src/lib/arithmeticOperation.js
export const add = (num1, num2) => {
    return num1 + num2;
}

모듈로 내보내고 싶은 함수, 변수 앞에는 반드시 export키워드를 붙여야지, 외부에서 해당 함수, 변수에 접근할 수 있습니다.

모듈 접근하기 import

외부에서 모듈에 접근하기 위해서는 import를 이용합니다. 다시 한 번 강조하지만 export키워드가 붙은 함수, 변수에 대해서만 접근이 가능합니다.

import를 통해 다음과 같이 모듈에 접근합니다. 이때, 쉼표,로 여러개의 함수/변수를 가져올 수 있습니다.

import { 모듈 함수/변수 } from '모듈 경로';

그러면, 조금 전에 만들었던 모듈에 접근해보겠습니다.

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

const num1 = 10;
const num2 = 4;

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


모듈에 빼기 기능까지 추가해서 작성해보겠습니다.

//모듈 파일
export const add = (num1, num2) => num1 + num2;

export const sub = (num1, num2) => num1 - num2;
// js파일
import {add, sub} from '../lib/arithmeticOperation.js';

const num1 = 10;
const num2 = 4;

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

import ~ as

기본 용법

import에는 as를 통해 별칭(alias)을 부여해서 사용할 수 있는 용법도 있습니다. 별칭을 부여한다는 것은 모듈을 가져올 때 이름 중복을 피하거나, 편하게 사용하기 위해서 모듈의 이름을 변경하는 것 입니다. as를 통한 별칭 지정은 다음과 같습니다.

import {원래이름 as 별칭} from '경로';

방금 전의 모듈 코드에 별칭을 붙여서 사용해보겠습니다.

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};

마지막에 export와 as를 이용해서 별칭으로 내보내고 있습니다. 접근은 일반 모듈 접근하듯이 합니다. 다만 import시 내보낸 별칭을 사용해야 별칭을 이용할 수 있습니다.

//js 파일
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));
[수업과제] 카우치코딩 팀 프로젝트 리뷰 ⑦
Java 비트맵 정렬 사용 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage