1. 모듈의 필요성
자바스크립트는 초기에 작은 규모의 스크립트 작성에 사용되었지만, 점점 애플리케이션이 복잡해지면서 코드를 체계적으로 관리할 필요가 생김. 여러 기능을 하나의 파일에 모두 작성하면 코드가 복잡해지고, 변수와 함수의 충돌이 발생할 가능성이 높아짐. 이러한 문제를 해결하기 위해 모듈화가 필요함.
모듈화를 통한 장점:
- 코드 재사용: 자주 사용되는 기능을 모듈로 분리하여 여러 곳에서 사용할 수 있음.
- 유지보수 용이: 코드를 기능별로 분리하여 관리하기 쉽게 만듦.
- 충돌 방지: 모듈 내부의 변수와 함수가 전역 스코프를 오염시키지 않음.
2. ES6 모듈 시스템
ES6에서는 모듈을 표준화하여 import와 export를 사용해 모듈 간 데이터를 주고받을 수 있게 만듦. 이를 통해 각 파일을 독립적인 모듈로 만들 수 있고, 하나의 파일에서 필요한 기능을 선택적으로 가져와서 사용할 수 있음.
export: 모듈에서 데이터를 내보내는 방식
모듈 내에서 다른 파일에 사용할 기능이나 데이터를 내보낼 때 사용함.
import: 모듈에서 데이터를 가져오는 방식
다른 모듈에서 내보낸 데이터를 가져와서 사용할 때 사용함.
3. 모듈 내보내기 (export)
모듈에서 데이터를 다른 파일로 내보내려면 export 키워드를 사용함. export 방식은 크게 두 가지로 나뉨: **이름이 있는 내보내기(named export)**와 기본 내보내기(default export).
(1) 이름이 있는 내보내기 (Named Export)
- 여러 개의 변수, 함수, 객체 등을 내보낼 수 있음.
- 가져올 때는 정확한 이름으로 가져와야 함.
// math.js
export const pi = 3.14;
export function add(a, b) {
return a + b;
}- pi와 add 함수를 이름으로 내보내기하고 있음.
(2) 기본 내보내기 (Default Export)
- 파일에서 하나의 값만 기본으로 내보낼 수 있음.
- 기본 내보내기된 값은 가져올 때 이름을 자유롭게 지정할 수 있음.
// greeting.js
const greeting = "Hello, World!";
export default greeting;- greeting 변수를 기본 내보내기로 설정함.
4. 모듈 가져오기 (import)
import 키워드를 사용하여 다른 모듈에서 내보낸 데이터를 가져올 수 있음.
(1) 이름이 있는 가져오기 (Named Import)
- 내보낸 이름과 정확히 일치하는 이름으로 가져와야 함.
- 여러 값을 동시에 가져올 수 있음.
// app.js
import { pi, add } from './math.js';
console.log(pi); // 3.14
console.log(add(2, 3)); // 5- math.js에서 내보낸 pi와 add를 가져와서 사용함.
(2) 기본 값 가져오기 (Default Import)
- 이름을 자유롭게 지정하여 가져올 수 있음. 파일에서 하나의 기본 값만 내보냈을 경우 사용.
// app.js
import greeting from './greeting.js';
console.log(greeting); // "Hello, World!"(3) 모두 가져오기 (Import All)
- 모듈 전체를 객체로 가져올 수 있음. 이때는 *를 사용하여 모든 데이터를 객체로 묶어서 가져옴.
// app.js
import * as math from './math.js';
console.log(math.pi); // 3.14
console.log(math.add(2, 3)); // 5
5. 동적 모듈 가져오기 (Dynamic Import)
ES6 모듈 시스템에서는 모듈을 동적으로 가져오는 기능도 제공함. import() 함수는 Promise를 반환하며, 필요할 때 비동기적으로 모듈을 로드할 수 있음.
// app.js
import('./math.js').then((math) => {
console.log(math.pi); // 3.14
});import()를 사용하면 모듈을 비동기로 가져올 수 있음. 이 기능은 사용자가 필요할 때만 모듈을 로드하는 데 유용함.
6. CommonJS와의 차이
ES6 모듈 시스템 이전에는 CommonJS와 같은 모듈 시스템을 사용했음. 특히 Node.js 환경에서는 require와 module.exports를 사용한 모듈화를 사용함.
// math.js (CommonJS)
const pi = 3.14;
function add(a, b) {
return a + b;
}
module.exports = { pi, add };
CommonJS에서는 module.exports로 데이터를 내보내고, require로 모듈을 가져옴.
차이점:
- CommonJS는 동기적으로 모듈을 로드함.
- ES6 모듈은 비동기적으로 로드를 지원함.
- CommonJS는 주로 Node.js에서 사용되며, ES6 모듈은 브라우저와 Node.js 모두에서 사용됨.
7. 브라우저에서 ES6 모듈 사용
브라우저 환경에서도 ES6 모듈을 사용할 수 있으며, <script> 태그에 type="module" 속성을 추가하면 모듈을 사용할 수 있음.
<!DOCTYPE html>
<html>
<head>
<title>ES6 Modules</title>
</head>
<body>
<script type="module" src="app.js"></script>
</body>
</html>이 코드는 브라우저에서 ES6 모듈을 로드하고 실행할 수 있게 해줌. 모듈로 로드된 스크립트는 **자동으로 엄격 모드(strict mode)**에서 실행됨.
요약:
- 모듈은 코드를 독립적인 단위로 분리하여 관리할 수 있게 해줌.
- **export**와 **import**를 사용하여 데이터를 내보내고 가져올 수 있음.
- 이름이 있는 내보내기/가져오기와 기본 내보내기/가져오기가 있음.
- ES6 모듈은 코드 재사용성을 높이고, 코드 충돌을 방지하며, 코드 유지보수를 쉽게 만들어 줌.
- 브라우저와 Node.js 모두에서 ES6 모듈 시스템을 사용할 수 있음.
'Web Development > vue' 카테고리의 다른 글
| [콜럼Vue스] 계산된 속성 (Computed Property) (0) | 2024.10.04 |
|---|---|
| [콜럼Vue스] data option (2) | 2024.10.04 |
| [콜럼Vue스] 템플릿 리터럴 (Template Literal) (0) | 2024.09.30 |
| [콜럼Vue스] 템플릿 리터럴 (Template Literal) (0) | 2024.09.30 |
| [콜럼Vue스] 디렉티브 Directives (0) | 2024.09.29 |