모듈 시스템
모듈(Module) 이란?
개발하는 애플리케이션의 규모가 커지면 파일을 여러 개로 분리해야 하는 시점이 온다. 이때 분리된 하나의 파일을 모듈(module)이라고 부르는데, 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 여러 개의 함수를 포함하는 라이브러리로 구성되어 있다. 이 모듈을 이용해서 코드를 효율적으로 제어할 수 있게 된다.
모듈 장점
- 유지보수용이 - 기능들이 모듈화가 잘 되어 있는 경우, 의존성을 줄일 수 있기 때문에 기능을 개선이나 수정이 용이.
- 네임스페이스화 - 코드의 양이 많아질수록 전역스코프에 존재하는 변수명이 겹치는 경우가 존재. 이때 모듈로 분리하면 모듈만의 네임스페이스를 갖기 때문에 그 문제를 해결할 수 있음.
- 재사용성 - 같은 코드를 반복하지 않고 모듈로 분리시켜서 필요할 때마다 재활용할 수 있음.
그리고 이러한 모듈을 필요시에 언제든지 불러올 수 있도록 하는 다양한 방법들이 있다. 이렇게 모듈을 불러오는 방법을 모듈 시스템이라고 하며, 그 모듈 시스템은 다음과 같은 방법들이 있다.
모듈 시스템 종류
- AMD - 가장 오래된 모듈 시스템 중 하나로 require.js라는 라이브러리를 통해 처음 개발되었다.
- CommonJS - NodeJS 환경을 위해 만들어진 모듈 시스템이다. (실무에서 많이 쓰임)
- UMD - AMD와 CommonJS와 같은 다양한 모듈 시스템을 함께 사용하기 위해 만들어졌다.
- ES Module - ES6(ES2015)에 도입된 자바스크립트 모듈 시스템. (실무에서 많이 쓰임)
ES Module 방식
ES6(ES2015)에 도입된 자바스크립트 모듈 시스템이다. <script> 태그에 type="module" 속성을 추가해주면, 이 파일은 모듈로서 동작한다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>ES Modules</title>
<script type="module" src="module/index.js"></script>
</head>
<body></body>
</html>모듈을 외부에서 사용할 수 있도록 내보낼 때는 named export, default export와 같은 키워드를 사용하며, 외부에서 모듈을 불러올 때는 import를 사용하여 모듈을 불러올 수 있다.
https://github.com/gymcoding/learn-module-system
GitHub - gymcoding/learn-module-system
Contribute to gymcoding/learn-module-system development by creating an account on GitHub.
github.com
(코드는 위 깃허브를 참고하자.)
버블링&캡쳐링
이벤트 전파는 다음과 같이 전파된다.
최상위 태그부터 하위 태그로 이벤트가 전파가 되는 것이다.
그림으로 치면 다음과 같다.
최상위에서 내려가면 그것이 캡쳐링이고, 최하위에서 위로 올라가면 그것이 버블링인 것이다.
보통 자바스크립트에서 이벤트 리스너는 버블링으로 작동된다. 물론 이 버블링을 캡쳐링으로 바꿔 줄 수 있기는 하다.
https://youtu.be/0jtalJxrxhs?si=orUzbcoYhC3IEzrl
(딥한 부분은 영상을 참고하자.)
'프론트 엔드 > JavaScript' 카테고리의 다른 글
| 알아두면 좋은 자바스크립트 애니메이션 라이브러리 (0) | 2024.09.03 |
|---|---|
| 자바스크립트 - Intersection Observer(무한스크롤) (0) | 2024.09.03 |
| 자바스크립트 복습 (심화버전) - npm / webpack (0) | 2024.08.24 |
| 자바스크립트 복습 (심화버전) - bom / dom / this / defer (0) | 2024.08.18 |
| JavaScript 무료 풀강의 (0) | 2024.07.12 |
