Module Pattern
모듈 패턴은 더 큰 파일을 여러 개의 더 작고 재사용 가능한 조각으로 분할하는 좋은 방법이다. 또한 모듈 내의 값은 기본적으로 모듈 내에서 비공개로 유지되고, 수정할 수 없기 때문에 코드 캡슐화를 촉진한다.
export 키워드를 사용하여 명시적으로 내보낸 값만 다른 파일에서 액세스 할 수 있다.
예시
function validateInput(input){
if (typeof input !== 'number'){
throw new Error('Invalid input');
}
}
function sum(x,y){
return x + y;
}
function multiply(x,y){
return x * y;
}
function subtract(x,y){
return x - y;
}
function divide(x,y){
return x / y;
}위와 같이 하나의 파일에 모여있는 함수들을 모듈화 시킬 수 있다.
input.js
export function validateInput(input){
if (typeof input !== 'number'){
throw new Error('Invalid input');
}
}
math.js
export function sum(x,y){
return x + y;
}
export function multiply(x,y){
return x * y;
}
export function subtract(x,y){
return x - y;
}
export function divide(x,y){
return x / y;
}
import 후 사용
import { validateInput } from './input.js';
import { sum } from './math.js';
모듈 내보내기 : export 지시자를 변수나 함수 앞에 붙이면 외부 모듈에서 해당 변수나 함수에 접근할 수 있다.
모듈 가져오기 : import 지시자를 사용하면 외부 모듈의 기능을 가져올 수 있다.
모듈 사용법
<script src=‘./index.js’ type=‘module’></script>모듈은 특수한 키워드나 기능과 함께 사용되므로 <script type=‘module’> 같은 속성을 설정해, 해당 스크립트가 모듈이라는 걸 브라우저가 알 수 있게 해줘야 한다.
브라우저가 자동으로 모듈을 가져오고 평가한 다음 이를 실행하게 된다.
모듈의 특징 <script type=‘module’>
1. 항상 엄격 모드(use strict)로 실행된다.
선언되지 않은 변수에 값을 할당하는 등의 코드는 에러를 발생시킨다.
2. 모듈 레벨의 스코프
type=‘module’을 설정하면 모듈 내부에서 정의한 변수나 함수를 다른 스크립트에서 접근할 수 없다.
3. 한 번만 실행된다.
동일한 모듈을 여러 다른 곳에서 사용하더라도 모듈은 최초 호출될 때 한 번만 실행된다. 한 번만 실행되고 실행된 모듈은 필요한 곳에 공유되므로, 어느 한 모듈에서 a 객체를 수정하면 다른 모듈에서도 변경사항을 확인할 수 있다.
4. import.meta
<script type=‘module’>
alert(import.meta.url); // 인라인 스크립트가 위치해 있는 html 페이지의 url
</script>스크립트 모듈 안에서 어떤 정보를 가져오려고 할 때 사용한다.
5. this
원래 script 스코프에서의 this는 window객체를 참조한다. 하지만 엄격 모드에서 this는 undefined를 나타내기에 undefined가 나온다.
6. 지연 실행된다.
보통 스크립트에서 지연 실행을 하려면 defer 속성을 붙여줘야 한다. 하지만 module 스크립트는 defer 속성 없이도 지연 실행을 하게 된다.
<body>
<script type="module">
console.log(typeof button);
</script>
<script>
console.log(typeof button);
</script>
<button id="button">Button</button>
</body>
그냥 script는 button부분 처리 전에 실행되기에 undefined가 나오는 반면 type=‘module’ 속성이 적용된 script는 HTML 처리가 끝나고 실행되기에 object가 나오는 것을 확인할 수 있다.
7. 인라인 스크립트 비동기 처리
모듈 스크립트에서 async는 외부 스크립트를 불러올 때뿐만 아니라, 인라인 스크립트에도 적용가능하다. 인라인 스크립트에 async가 붙었기에 다른 스크립트나 HTML 문서처리를 기다리지 않고 바로 실행된다.
<script˙ type=‘module’>
import {play} from ‘./play.js’;
play()
</script>
play.js 모듈의 로드가 끝나면 HTML 문서나 다른 <script>가 로드되길 기다리지 않고 바로 실행한다. 독립적인 기능을 구현할 때 유용하다.
8. nomodule
<script type=‘module’>
alert(“type=module script”)
</script>
<script nomodule>
alert(“현재 구형 브라우저를 사용하고 있습니다.”)
alert(“그래서 모듈 스크립트를 사용할 수 없습니다.”)
</script>구형 브라우저에서는 type=‘module’을 해석하지 못한다. 이럴 때 nomodule 속성을 이용해서 구형 브라우저에 대비할 수 있다.
'프로그래밍 언어 > JavaScript' 카테고리의 다른 글
| [JS] ES6 클래스 문법 (0) | 2024.04.29 |
|---|---|
| [JS] Prototype (0) | 2024.04.29 |
| [JS] Callback, Promise, Async/Await (0) | 2024.04.29 |
| [JS] 순수함수(Pure Function) (0) | 2024.04.29 |
| [JS] Intersection observer (0) | 2024.04.27 |
