모듈화란
- 각각의 기능을 하는 함수들의 집합 파일을 모듈이라고 합니다.
- 많은 기능을 추가하여 길어진 코드를 각각의 기능을 가진 모듈로 분리하여 합치는것을 모듈화라고 합니다.
가져오기 (import)
calculator.js
main.js
import {add,sub} from './calculator.js'
console.log(add(1,3))
console.log(sub(4,1))
index.html
<head>
<script type="module" defer src="./main.js"></script>
</head>- import {가져오고자 하는 요소} from '경로' 의 형식으로 경로 모듈의 요소를 가져올 수 있습니다.
- import * from '경로' 의 형식으로 경로 모듈에 존재하는 모든 값을 가져올 수 있습니다.
- html에 연결된 main 스크립트에 type = 'module' 옵션을 추가해줘야 합니다.
내보내기(export)
기본 내보내기 (export default)
export default [1,2,3]- 이름이 필요하지 않으며, 모듈에서 1번만 사용할 수 있는 방법입니다.
- export default 로 사용합니다.
- 가져올 때 이름을 임의로 지정하여 사용합니다.
이름 내보내기 (export)
export function add(a,b){
return a+b
}
export function sub(a,b){
return a-b
}
export const hello = 'Hello World!'- 이름을 지정하여 export를 수행합니다.
- export 만 사용하며, import 부분에서는 이름을 호출하여 사용합니다.
'자바스크립트' 카테고리의 다른 글
| JavaScript 비동기(1) - 개요 (0) | 2024.04.27 |
|---|---|
| JavaScript 클래스 (0) | 2024.04.26 |
| JavaScript - 선택적 체이닝(Optional chaining) (0) | 2024.04.25 |
| JavaScript 구조 분해 할당 (0) | 2024.04.23 |
| JavaScript 이벤트 - 이벤트 전파 (0) | 2024.04.22 |
