모듈
원래 웹문서 안에서 간단히 웹브라우저를 조작하기 위한 언어였지만, 애플리케이션 규모가 커지면서 하나의 js 파일을 여러개로 쪼개야하는 상황이 생겨났다. 이 때 쪼개진 하나의 js 파일을 모듈이라고 한다.
이러한 모듈을 언제든지 불러올 수 있도록 하는 방법을 '모듈 시스템'이라고 한다. 자바스크립트에서 모듈 시스템이 있기 전에는 script 태그를 통해 불러와야했는데, 전역 스코프를 공유한다는 문제점이 있다. 파일이 여러개로 나뉘어있어도 하나의 소스로 존재하는 것 처럼 동작한다는 점이다.
/* a.js */
var number = 10;/* b.js */
var number = 20;<!-- index.html -->
<html>
....
<script src="a.js"></script>
<script src="b.js"></script>
<script>
console.log(number); //20
</script>
.....
</html>위와 같은 예제에서 로그에서 number는 20을 출력한다. b.js를 가장 마지막에 호출하여 number 값이 10에서 20으로 덮어씌워진 것이다. 만약 a.js와 b.js를 호출하는 순서를 바꾸면, 로그에서 number는 10이 된다.
모듈 시스템
파일을 각각 효과적으로 분리하기 위해 다양한 방법을 만들었고, 이런 방법을 모듈 시스템이라고 한다. 모듈은 독립적으로 자신만의 스코프를 갖기 때문에 전역 스코프에서 발생되는 문제를 해소할 수 있다. 이 시스템은 ES6에 도입되었다.
스크립트를 가져올 때 type="module" 옵션을 추가하면 모듈 시스템으로 불러와 독자적인 스코프를 갖게 된다.
<!-- index.html -->
<html>
....
<script type="module" src="a.js"></script>
<script type="module" src="b.js"></script>
<script type="module">
console.log(number); //undefined
</script>
.....
</html>따라서 위 예제의 로그에서는 a.js나 b.js의 number값을 가져올 수 없고, undefined 상태가 된다.
다른 모듈의 자원을 사용할 때에는 가져오고(import), 내보내는(export) 작업이 필요하다.
/* a.js */
var number = 10;
export default number;/* b.js */
var number = 20;
export default number;<!-- index.html -->
<html>
....
<script type="module">
import a_number from './a.js'
import b_number from './b.js'
console.log(a_number); //10
console.log(b_number); //20
</script>
.....
</html>
모듈 시스템의 장점
1. 네임 스페이스화
코드의 양이 많아질수록 전역 스코프에 존재하는 변수명이 겹칠 가능성이 높아진다. 이 때 모듈로 분리하면 모듈만의 네임스페이스를 갖기 때문에 그 문제를 해결할 수 있다.
2. 유지보수 용이
모듈화가 잘 되어있는 경우, 의존성을 줄일 수 있기 때문에 기능 개선이나 수정이 용이하다.
3. 재사용성
같은 코드를 반복하지 않고 모듈로 분리시켜서 필요할 때마다 재활용할 수 있다.
모듈 시스템의 종류
1. AMD : 가장 오래된 모듈 시스템 중 하나로 require.js라는 라이브러리를 통해 개발됨
2. CommonJS : NodeJS 환경을 위해 만들어진 모듈 시스템
3. UMD : AMD와 CommonJS와 같은 다양한 모듈 시스템을 함께 사용하기 위해 만들어짐
4. ES Module : ES6(ES2015)에 도입된 자바스크립트 모듈 시스템
이 포스팅은 프론트엔드 날개달기: Vue, React 배우기 전에 꼭 알아야하는 지식 강의를 수강하며 작성되었습니다.
[지금 무료] 프론트엔드 날개달기: Vue, React 배우기 전에 꼭 알아야하는 지식 강의 | 짐코딩 - 인프
짐코딩 | 이 강의를 통해 Webpack, NPM 등 프론트엔드 개발자가 되기 전에 꼭 알아야할 지식을 탄탄히 다질 수 있습니다., 백그라운드 지식을 확실히 알아야,진짜 프론트엔드 개발자가 될 수 있어요
www.inflearn.com
'JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 웹팩 (Webpack) (0) | 2024.06.30 |
|---|---|
| [JavaScript] ES Module / CommonJS (모듈 시스템) (0) | 2024.06.27 |
| [JavaScript] NPM 명령어 (0) | 2024.06.23 |
| [JavaScript] NPM (Node Package Manager) (0) | 2024.06.19 |
| [JavaScript] Array API (배열 API) (0) | 2024.06.16 |
