javascript - 모듈
Front-End/javascript 2019. 6. 9. 20:05-모듈-
코드의 재활용성을 높이고, 유지보수를 쉽게 할 수 있는 기법
코드를 여러개의 파일로 분리하는 것.
-모듈의 장점-
1. 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용 할 수 있다. (마치 함수처럼 여러군데에서 사용할 수 있음)
2. 코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선된다.
3. 코드 수정 시에 필요한 로직을 빠르게 찾을 수 있다.
4. 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다.
5. 한번 다운로드된 모듈은 웹 브라우저에 의해서 저장되기 때문에 동일한 로직을 로드 할 때
시간과 네트워크 트래픽을 절약 할 수 있다. (브라우저에서만 해당)
-모듈이란?-
순수한 자바스크립트에서는 모듈이라는 개념이 분명하게 존재하지는 않지만, 자바스크립트가 구동되는
호스트 환경에 따라서 서로 다른 모듈화 방법이 제공되고 있다.
자바스크립트의 대표적인 호스트 환경인 웹브라우저에서 로직을 모듈화하는 방법이 있다.
| 호스트 환경이란? 호스트 환경이란 자바스크립트가 구동되는 환경을 의미한다. 자바스크립트는 브라우저를 위한 언어로 시작했지만, 더 이상 브라우저만을 위한 언어가 아니다. 예를들어 node.js는 서버 측에서 실행되는 자바스크립트다. 이 언어는 자바스크립트의 문법을 따르지만 이 언어가 구동되는 환경은 브라우저가 아니라 서버측 환경이다. |
<관련 예제>
호출할 함수를 별도의 파일로 분리시킴.
파일을 불러와서 그 파일안에 있는 함수를 호출해서 출력시킴
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="greeting.js"></script>
</head>
<body>
<script>
alert(welcome());
</script>
</body>
</html>
|
cs |
greeting.js
|
1
2
3
|
function welcome(){
return 'Hello world';
}
|
cs |
웹브라우저가 화면에 출력될때 src속성이 있는지 없는지 확인하고 그 값이 있다면
그 값에 해당되는 파일이 있다면 "greeting.js" 를 <script>~</script>사이에 넣어서 출력한것과 같이 된다.
출력 결과는 greeting.js 파일의 welcom( ) 메소드가 호출이 되어서 "Hello world" 가 출력된다
이렇게 함으로써 코드가 간결해지고, main.html의 용량을 줄여준다.
sub.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="greeting.js"></script>
</head>
<body>
<script type="text/javascript">
welcome();
</script>
</body>
</html>
|
cs |
sub파일에서도 main.html 파일처럼 greeting.js 파일을 불러서 welcome() 메소드를 호출할 수 있다.
그리고 출력 결과는 "Hello world" 가 출력이 된다.
아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
'Front-End > javascript' 카테고리의 다른 글
| javascript - UI와 API (0) | 2019.06.10 |
|---|---|
| javascript - 라이브러리 (jQuery) (0) | 2019.06.09 |
| javascript - 객체 (0) | 2019.06.09 |
| javascript - 배열 (0) | 2019.06.01 |
| JavaScript - 함수 (0) | 2019.06.01 |