JavaScript) 모듈이란?

▤ 목차

 
 
일반적으로 js 코드를 별도의 파일로 작성후 <script src="경로명 및 파일명">으로 읽어서 사용한다.
위와 같은 파일을 사용하지 않고 모듈을 이용해 사용할 수 잇다.
 

✔ JS 모듈

스크립트의 크기가 커지면서 기능이 복잡해지면서 라이브러리를 만드어서 필요한 모듈을 언제든지 불러올 수 있도록 하거나 모듈로 쉽게 분리할 수 있는 방법이 있다.
작은 파일로 분리해서 관리할때 이 하나의 파일을 모듈이라고 한다.

유지보수성
기능들이 모여있다면 의존성을 낮추기때문에 기능을 수정하기 쉽다.

재사용성
모듈은 코드의 반복을 줄여 묶어둔 기능에 맞게 사용할 수 있다.

네임스페이스화
자바스크립트의 전역변수는 전역공간을 가진다. 코드가 길어질수록 네임 스페이스가 겹칠 가능성 이 높아진다. 모듈로 분리하면 모듈의 네임 스페이스를 갖기때문에 충돌이 줄어든다.

 

⌨ 특징

• <script type="module"></scritp>로 설정해서 해당 스크립트가 모듈인 것을 알려줘야한다.
• export : 외부 모듈에서 해당 변수나 함수에 접근할 수 있도록 한다.
• import : 외부 모듈의 기능을 가져와서 사용할 수 있다.
• 특정 모듈에서 불러온 모듈을 수정하면 다른 모듈에서 특정 모듈의 수정된 결과가 적용된다.

 

💻 코드로 보기

일반적으로 js 코드를 경로명을 작성해서 가져오는 방법이 있다.

//kbs.js
function kbsFunc(){
	console.log('KBS는 대한민국 대표방송');
}

<script type="text/javascript" src="js/kbs.js">
	kbsFunc(); //함수 호출
</script>

 

console

 
하나의 같은 기능을하는 모듈을 만들어 언제든 필요한 모듈을 불러오는 방법이 있다.
 

<script type="module">
...
</script>

 
이런 식으로 부를 수 있다.
 
 

👏 중요

내보내고 받아야하는데 이때 다양한 파일이나 형식을 내보내고 싶을 수 있다.
이제 각 파일이나 형식을 export / import 하는 방식을 알아보자.
 
 

---

 
 
 

✔ Export 와 Import 방법

 
 

📝 변수

🔷 export (js 파일)

export let user ='홍길동';

 

🔷 import (js 받는 파일)

import {user} from './js/js32module.js';
console.log(user);

 

결과

 
 
 
 

📝 json 형식

🔷 export (js 파일)

const name ='사과';
const price =5000;
export let msg ={name,price};

 

🔷 import (js 받는 파일)

import {msg} from './js/js32module.js';
console.log(msg.name, ' ', msg['price']);

 
 
 

 
 
 
 

📝 함수

🔷 export (js 파일)

export function hi(user){
	return `안녕? ${user}님`;
}
export let func = function add(a, b){
	return a+b;
}

 

🔷 import (js 받는 파일)

 

import {hi} from './js/js32module.js';
import {func} from './js/js32module.js';

console.log(hi('신기해'));
console.log(func(3,4));

 
 

 
 
 

---

함수 2개를 한번에 내보낼 수도 있다.
 

🔷 export (js 파일)

function f1(user){
	return `안녕? ${user}님`;
}
function f2(user){
	return `반가워 ${user}님`;
}
export{f1, f2}

 

🔷 import (js 받는 파일)

 

import {f1,f2} from './js/js32module.js';

console.log(f1('신기해'));
console.log(f2('하하호호'));

 

 
 
 

📝 default

default 함수는 1번만 내보낼 수 있다.
받는 사람 파일의 명을 보면 느끼겠지만, 변수명은 마음대로 정할 수 있다.
모듈(파일) 당 딱 한개의 default export만 있어야한다.

Only one default export allowed per module.

 
 
 

🔷 export (js 파일)

export default '졸려도 이겨내세요';

 

🔷 import (js 받는 파일)

import defau from './js/js32module.js'; //export할때 default는 한번만 사용할 수 있다.
console.log(defau);

 
 

 
 
 
 

📝 배열

🔷 export (js 파일)

export let months=['5월','6월','7월'];

 

🔷 import (js 받는 파일)

import {months} from './js/js32module.js'; 
console.log(months);
console.log(months[0]+' '+months[2]);

 
 

 
 
 

📝 상수

🔷 export (js 파일)

export const Cur_YEAR =2024;

 

🔷 import (js 받는 파일)

import {Cur_YEAR} from './js/js32module.js'; 
console.log(Cur_YEAR);

 
 

 

📝 클래스

🔷 export (js 파일)

export class HelloClass{
	constructor(msg){
		this.msg = msg;
	};
	run(){
		console.log(this.msg+' run 메서드 실행');
	};
}

 

🔷 import (js 받는 파일)

import {HelloClass} from './js/js32module.js'; 
let hello = new HelloClass('모듈 연습중');
console.log(hello);
hello.run();

 

 
 
 

📝 동적으로 함수 내보내기

🔷 export (js 파일)

export function haha(){
	alert('안녕');
}
export function yoyo(){
	alert('잘가');
}

 

🔷 import (js 받는 파일)

비동기로 처리해보자.
 

async function dyFunc(){
	let say = await import('./js/js32module.js');
	say.haha();
	say.yoyo();
}

dyFunc();

</script>
<button onclick="dyFunc()">비동기로 모듈 처리</button>

 
 

해당 버튼을 클릭하면 나오는 결과는 

 

---

 
 

😊정리

이렇게 정리하고 끝내려고 했지만 as 키워드는 없으면 아쉬울 것같아 정리해둔다.

👏 as

많은 변수와 함수를 불러오고 싶다면 모두 가져오는 방법도 있다.
이때 사용하는 방법이 import * as 작명이다.
 

import * as 모듈명 from '모듈 주소.js';

형식으로 가져오면 된다.

import * as myModule from './js/js32module.js';
console.log(myModule.f2('하하호호'));

 
as 키워드를 사용해서 데이터를 바꿔서 불러오거나 가져온 데이터를 바꿀 수 있다.
export as

function f1(user){
	return `안녕? ${user}님`;
}
function f2(user){
	return `반가워 ${user}님`;
}
export{f1 as hoho, f2 as haha}

위와 같이 내보내게되면 f1은 hoho로 바꾸어 보낼 수 있다.
 
 
import as

import {user as hi} from './js/js32module.js';
console.log(hi);

이름을 바꿔서 가져올 수 있다.