[자바스크립트] - 모듈화(export, import)

1. 모듈화를 공부하게 된 계기

졸업작품을 하면서 데이터를 내보내고 받아야 하는 상황이 생겼다. 지금까지는 데이터의 범위를 하나의 파일에서 구현을 했다면 이번에는 파일(A)에서 파일(B)로 넘나들어야 하는 상황이 생긴 것이다. 물론 결론부터 말씀드리자면 모듈화를 통해 해결 할 수 없는 문제였다. export와 import는 같은 HTML파일 안에서 등록된 javascript파일에서만 주고 받을 수 있다는 결론을 알았다. 나는 다른 HTML끼리 데이터를 주고받아야 했기 때문에 해당 사항이 없었다.. 

하지만 이 기회에 모듈화에 대해 좀 알게 되어서 정리 하고자 블로그에 글을 올린다. (잘못된 정보가 있다면 알려주시면 감사하겠습니다!)

2023.04.01 - [졸업작품] - [작품] - REST API를 사용해서 동적 페이지 만들기

[작품] - REST API를 사용해서 동적 페이지 만들기

-> 모듈화를 쓸려다가 실패한 경험

---

👉 2. 모듈화란?

모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용이 가능한 코드 조각을 말한다. 일반적으로 모듈은 기능을 지군으로 파일 단위로 분리하는데, 이때 모듈이 성립하려면 모듈은 자신만의 파일 스코프를 가질 수 있어야 한다.

또 자신만의 파일 스코프를 갖는 모듈의 모든 자산은 캡슐화되어 다른 모듈에서 접근할 수 없다. 즉, 모듈은 개별적 존재다.

ES6 이전까지는  AMD, CommonJS, UMD를 사용해서 모듈 시스템을 사용하고 있었는데 이후 버전이 바뀌면서 ES6에서는 자바스크립트에서도 작동하는 모듈 기능을 추가했다. 현재는 IE를 제외한 대부분의 브라우저에서는 ES6 모듈을 사용할 수 있다.

 

1️⃣ export란?

분리된 모듈은 사용되지 않으면 존재의 의미가 없다. 모듈은 애플리케이션이나 다른 모듈에 의해 재사용되어야 의미가 있다. 따라서 모듈은 공개가 필요한 자산에 한정하여 명시적으로 공개가 가능하다. 이를 export라 한다.

 

2️⃣ import란?

expor된 모듈의 자산은 다른 모듈에서 재사용할 수 있다. 모듈 사용자는 모듈이 공개한자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할 수 있다. 이를 import라 한다.

---

👉 3. 모듈화 하는 방법

export 방법

export 하는 방법에는 named export, default export 두 가지 방법이 존재한다.

 

1️⃣ named export

 

복수의 함수가 있는 라이브러리 형태의 모듈 

 

    1. 선언부 앞에 export 붙이기

export const number = 1;		//상수 내보내기
export const array = [1,2,3];		//배열 내보내기
export function Hello(x){		//함수 내보내기
	return x*x; 
}
export class Person{			//클래스 내보내기
	constructor(name){
    	this.name = name;
    }
}

   2. export 할 대상을 하나의 객체로 구성하여 한번에 보내기

const number = 1;
const array = [1,2,3];		
function Hello(x){		
	return x*x; 
}
class Person{		
	constructor(name){
    	this.name = name;
    }
}
// 변수, 배열, 함수, 클래스를 하나의 객체로 구성하여 내보내기
export {number, array, Hello, Person};

   3. 먼저 정의된 이름을 다른 별칭으로 변경해서 내보내기

let var4;
export { var4 as var5 } //import 할 때는 var5로 import 해야 된다.

 

2️⃣ default export

 

개체 하나만 선언되어 있는 모듈이다. 어처피 개체 하나만 export 하기 때문에 개체엔 이름이 없어도 된다.

   

    1.  기본적인 방법

1번째 방법
export default class User {
  constructor(name) {
    this.name = name;
  }
}

2번째 방법
class User{
  constructor(name){
    this.name = name;
  }
}
export { User as default };
// 1번째 방법과 2번째 방법은 동일하다.

 

import 방법

1. 다른 모듈이 export한 식별자 이름으로 import하는 방법

import { number, array, Hello, Person } from './lib.js';

console.log(number);		// 1
console.log(array);		// [1,2,3,4]
console.log(Hello(2));		// 4
console.log(new Person("Jo"));	// Person { name: "Jo" }

2. 식별자 이름을 변경하여 import 하는 방법

import { number as Num, array as Ar } from './lib.js';

console.log(Num);		// 1
console.log(Ar);		// [1,2,3,4]

3. 한번에 모듈을 불러오는 방법

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

console.log(lib.number);		// 1
console.log(lib.array);			// [1,2,3,4]
console.log(lib.Hello(2));		// 4
console.log(new lib.Person("Jo"));	// Person { name: "Jo" }

4. default export 한 모듈을 가져오는 방법

import User from './user.js';		// {User}가 아닌 User로 클래스를 가져왔다.

New User("Jo");

default export된 모듈을 import 할 때는 중괄호없이 모듈을 가져올 수 있다.

-> named export 한 모듈을 가져오려면 중괄호가 필요하고, default export 한 모듈을 가져오려면 중괄호가 필요하지 않다. 또 named export는 가져올 때 동일한 이름을 써야 하지만 default export는 가져올 때 개발자가 원하는 대로 이름을 지정해 줄 수 있다.

---

그 외의 공부하다 배운 것들..

1. 모듈(export,import)를 사용할 때는 사용되는 파일 모두에 type="module"을 써줘야 에러가 안난다.

2. type = "module"로 설정된 파일들은 모듈로써만 작동한다. (일반 함수는 실행이 안됨)

3. 이래도 오류가 난다면 package.json 파일에서 type = "module"을 써준다.

4. 다른 HTML파일에서는 export랑 import하는 것이 제한된다. (내가 할려했던 기능...)