Front/js

JavaScript) 모듈이란?

읽히는 블로그 2024. 7. 8. 12:01

▤ 목차

     
     
    일반적으로 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);

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