1. Module
- JavaScript를 기반으로 한 다양한 프레임워크와 인터페이스들이 등장하면서, JavaScript만으로 완전한 어플리케이션을 만드는 것이 가능해졌다. 이에 따라 자연스레 코드의 양은 늘어나고 파일들을 기능이나 역할 단위로 나누기 위해 module이 도입되었다.
- 이 포스팅에선 JavaScript를 모듈화하여 사용하기 위해 export / import 하는 과정, 이를 html에서 불러와 사용하는 법을 다룰 것이다.
- export > import > module
- 모듈로써 사용하고자 하는 함수나 변수의 선언부 앞에 export를 적어준다.
( export function a() {}, export const a = "example" ) - export로 선언된 함수를 사용하고자 하는 .js 파일에서 import해준다. 특정 함수나 변수만을 가져올 때에는 함수명(변수명)을, 파일 전체를 가져올 때는 *(asterisk) 를 사용한다.
( import { a } from "example.js", import * from "example.js" ) - .html 파일에서 모듈들을 import해온 파일의 스크립트를 type="module"로 불러온다.
( <script type="module" src="./example.js"></script> )
- 모듈로써 사용하고자 하는 함수나 변수의 선언부 앞에 export를 적어준다.
- 간단하게 * (asterisk)를 사용해 가져오면 되는 걸 왜 굳이 하나씩 적어서 가져올까?
- 첫번쨰로는 당연히 간결하고 명시적이라는 것이다. example.a()로 사용할 것이냐, a()로 사용할 것이냐, 당연히 후자다.
- 웹팩(WebPack), 파슬(Parcel), 롤업(Rollup)과 같은 번들러들은 로딩 속도를 높이기 위해 모듈들을 한데 모으는 번들링과 최적화를 수행하고, 이 과정에서 사용하지 않는 리소스가 삭제되기도 한다. 실제 사용되는 함수가 무엇인지 파악해, 그렇지 않은 함수는 최종 번들링 결과물에 포함하지 않는데, 이 과정에서 불필요한 코드를 제거하여 빌드 결과물의 크기를 줄인다. 이런 최적화 과정을 'Dead code Elimination' 또는 'Tree-Shaking' 이라 한다.
2. Module 예제
예제 1) import / export 기본 꼴
// modules.js
export function print(input) {
console.log(input);
}
export function popup(input) {
alert(input);
}
// main.js
import { print, popup } from "./modules.js";
print("function print imported");
popup("function popup imported");
// index.html
<head></head>
<body>
<script type="module" src="./main.js"></script>
</body>
예제 2) as 를 활용한 함수명 변경
// modules.js
export function alertFunc(input) {
alert(input + "님, 환영합니다.");
}
export function promFunc() {
const input = prompt("이름을 입력해주세요.");
return input;
}
export function printConsole(input) {
console.log(input + "님이 입장하셨습니다.");
}
// main.js
import {
alertFunc as sayHello,
promFunc as getName,
printConsole as log,
} from "./modules.js";
let userName = getName();
sayHello(userName);
log(userName);
// index.html
<head></head>
<body>
<script type="module" src="./main.js"></script>
</body>
modules.js 에서는 함수의 기본적인 행동만을 마치 인터페이스처럼 만들어 놓은 뒤, main.js에서 import 한 후 활용한 경우이다. 아주 간단한 예제지만, 코드가 길고 복잡해진다면 이처럼 코드를 분할해 코드의 재사용성과 가독성을 높일 수 있다.
예제 3) assert를 이용한 JSON파일 import
// jsonExam.json
{ "Company" : "K Academy",
"Address" : "Seoul",
"Begin" : "22/11/28",
"Member" : [{ "name" : "Lee",
"phone" : "010-1234-0001"},
{ "name" : "Park",
"phone" : "010-1234-0002" },
{ "name" : "Choi",
"phone" : "010-1234-0003" },
{ "name" : "Ko",
"phone" : "010-1234-0004" },
{ "name" : "Ko",
"phone" : "010-1234-0005" },
{ "name" : "Nam",
"phone" : "010-1234-0006" }] }
// jsonExam.js
import JsonData from './jsonExam.json' assert {type: 'json'};
// 이런 식으로 assert로 타입을 명시해줌으로써 .json 파일도 import 해올 수 있다.
console.log(JsonData);
// jsonExam.html
<head></head>
<body>
<script type="module" src="./jsonExam.js"></script>
</body>
Module을 활용한다면 다양한 API와 데이터들을 자유자재로 사용할 수 있다. 이는 지금 시점에 JavaScript 프로그래밍에서 떼어 놓을 수 없는 부분이다. 추후 이를 응용해 여러 오픈 API들과 JSON 데이터들을 가져와 활용하는 것을 포스팅하도록 하겠다.
[참조문서]
https://ko.javascript.info/import-export
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import
반응형
'JAVASCRIPT > ES6' 카테고리의 다른 글
| [JS] Fetch API (0) | 2023.02.08 |
|---|---|
| [JS] Closure (0) | 2023.02.06 |
| [JS] 비동기 처리 (1) - Promise (1) | 2023.02.04 |
| [JS] Currying (0) | 2023.02.03 |
| [JS] Spread Syntax (전개 구문, 전개 연산자) (0) | 2023.02.02 |
댓글