모듈(module)
- 코드를 재사용할 수 있는 단위로 나누어 다른 프로그램의 부품으로 사용하는 것.
- 단위로 나누는 것은 모듈화(Modularization)이라 함.
날이 갈수록 프로그램은 복잡해지고 있습니다.
복잡한 프로그램일수록 유지보수와 관리, 재활용성을 높이기 위해 코드를 여러개의 파일로 나누기 시작합니다.
바로 이게 모듈입니다.
모듈의 장점 (출처 - 생활코딩)
- 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용할 수 있습니다.
- 코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선됩니다.
- 코드 수정 시에 필요한 로직을 빠르게 찾을 수 있습니다.
- 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있습니다.
- 한번 다운로드된 모듈은 웹브라우저에 의해서 저장되기 때문에 동일한 로직을 로드 할 때 시간과 네트워크 트래픽을 절약 할 수 있습니다.
모듈 사용 예제
그렇다면 '안녕하세요'라는 텍스트를 HTML상에 출력시키는 기능을 가진 모듈을 만들고, 다른프로그램에서 사용하는 코드를 만들어보겠습니다.
아래의 두가지만 유의하세요
1) 모듈파일의 확장자는 js파일.
2) 모듈을 import시키는 코드는 head 태그 안에.
|
1
|
|
3) 모듈은 javascript이므로 모듈에 있는 함수를 사용하려면 <script>태그 안에서 사용해야함
`
1. 모듈 파일을 만든다(modulefile.js). 파일 안에 output이라는 함수를 만들었다.
|
1
2
3
|
function output(){
document.write("안녕하세요");
}
|
2. 모듈을 사용할 HTML 파일을 만들고 <script src = "modulefile.js"></script>를 입력한다.
3. body 태그 안에 <script> 태그를 넣고 그 안에 modulefile.js에서 쓸 함수명인 output()을 입력한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!doctype html>
<html>
<head>
<title>?</title>
<meta charset="utf-8">
</head>
<body>
<script>
output();
</script>
</body>
</html>
|
출력화면
'프론트엔드 > Javascript' 카테고리의 다른 글
| [Javascript] 정규 표현식(Regular expression), 정규식 패턴, 사용법, 날짜 차이 구하기 예제 (0) | 2019.08.09 |
|---|---|
| [JavaScript] 상속, Prototype, 함수 및 생성자 (3) (0) | 2019.07.24 |
| [JavaScript] 상속, Prototype, 함수 및 생성자 (2) (0) | 2019.07.19 |
| [JavaScript] 상속, Prototype, 함수 및 생성자 (1) (0) | 2019.07.18 |
| [Javascript] 객체의 사용, 변수, 함수, 반복문 (0) | 2019.07.01 |