반응형
프로젝트의 규모가 커지면 코드의 양이 늘어나고 가독성이 떨어지죠. 많은 언어에서 라이브러리, 패키지 등 다양한 이름으로 같은 기능을 하는 코드들을 분산해서 저장하고 필요할 때 불러와 쓰는 방식으로 이러한 문제를 해결하는데, 자바스크립트에서도 모듈화를 통해 효율적으로 코드를 작성할 수 있습니다.
모듈은 작성된 코드를 저장하는 별개의 자바스크립트 코드인데요. 어떻게 사용하는지 알아보겠습니다.
사용방법
index.html 파일에서 불러오는 메인스크립트에 type="module"을 추가합니다.
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://kit.fontawesome.com/833be080c6.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./main.css">
<script defer type="module" src="./index.js"></script> <!-- main JS -->
</head>
이후 모듈 자바스크립트 파일에서 내보내기 (export)와 이를 사용하고자 하는 자바스크립트 파일 (여기서는 index.js)에서 가져오기 (import)를 통해 사용합니다.
module.js
function hiWorld() {
console.log('hi')
}
export function byeWorld() { // 내보내기 문법1: 개별로 내보내기
console.log('bye')
}
export function withAlias() {
console.log('with alias')
}
// 변수
const one = 1
let two = 2
var three = 3
export {hiWorld, one, two, three} // 내보내기 문법2: 객체로 내보내기주의할 점은 내보내기를 하는 코드는 파일의 공통영역 (global scope)에 위치해야 합니다.
export function byeWorld() {
console.log('bye')
var notExported = 'not exported'
}
export {notExported}
index.js
import { hiWorld, byeWorld, withAlias as alias, one, two, three } from './module.js'
hiWorld()
byeWorld()
alias()
console.log(one, two, three)
이상으로 자바스크립트에서 모듈을 활용하는 방법을 알아보았습니다.
참고
JavaScript modules - JavaScript | MDN
This guide gives you all you need to get started with JavaScript module syntax.
developer.mozilla.org
728x90
반응형
'프론트엔드 > 자바스크립트' 카테고리의 다른 글
| 프로젝트 - 계빨 게임 (Math Sprint) (0) | 2022.12.24 |
|---|---|
| 연산자 (Operators) (0) | 2022.12.24 |
| 웹팩 (webpack) (0) | 2022.12.21 |
| Declarative Code VS Imperative Code (0) | 2022.12.21 |
| 데이터 요청 (0) | 2022.12.17 |
