1.모듈이란?
프로그램은 작고 단순한 것에서 크고 복잡한 것으로 진화한다. 그 과정에서 코드의 재활용성을 높이고, 유지보수를 쉽게 할 수 있는 다양한 기법들이 사용된다. (아주 좋은 부품을 만들어서 사용한다 생각하면된다 )
그 중의 하나가 코드를 여러개의 파일로 분리하는 것이다. 이를 통해서 얻을 수 있는 효과는 아래와 같다.
- 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용할 수 있다.
- 코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선된다.
- 코드 수정 시에 필요한 로직을 빠르게 찾을 수 있다.
- 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다.
- 한번 다운로드된 모듈은 웹브라우저에 의해서 저장되기 때문에 동일한 로직을 로드 할 때 시간과 네트워크 트래픽을 절약 할 수 있다. (브라우저에서만 해당)
모듈이란?
순수한 자바스크립트에서는 모듈(module)이라는 개념이 분명하게 존재하지는 않는다. 하지만 자바스크립트가 구동되는 호스트 환경에 따라서
서로 다른 모듈화 방법이 제공되고 있다. 자바스크립트의 대표적인 호스트 환경인 웹브라우저에서 로직을 모듈화하는 방법에 대해서 알아볼 것이다.
호스트 환경이란 자바스크립트가 구동되는 환경을 의미한다. 자바스크립트는 브라우저를 위한 언어로 시작했지만, 더 이상 브라우저만을 위한 언어가 아니다. 예를들어 node.js는 서버 측에서 실행되는 자바스크립트다. 이 언어는 자바스크립트의 문법을 따르지만 이 언어가 구동되는 환경은 브라우저가 아니라 서버측 환경이다. 또 구글의 제품 위에서 돌아가는 Google Apps Script 역시 자바스크립트이지만 google apps script가 동작하는 환경은 구글 스프레드쉬트와 같은 구글의 제품 위이다. 여러분은 자바스크립트의 문법을 이용해서 PHP와 같은 서버 시스템을 제어(node.js)하거나 구글의 제품(Google Apps Script)을 제어 할 수 있다. 지금 당장은 어렵겠지만, 언어와 그 언어가 구동되는 환경에 대해서 구분해서 사고 할 수 있어야 한다. 이를 위해서는 다양한 언어를 접해봐야 한다.
모듈을 만드는 방법을 알아보기에 앞서서 모듈이 없는 상황을 가정해보자.
2.모듈화
모듕이 없다면
우선 모듈이 없는 애플리케이션을 하나 만들어보자. 파일의 이름은 main.html 이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
function welcome(){
return 'Hello world'
}
alert(welcome());
</script>
</body>
</html>
위의 코드는 아무런 문제가 없다. 하지만 welcome 함수가 자주 사용되는 것이라고 가정해보자. 이런 경우 이것이 필요할 때마다 이 함수를 정의해서 사용하는 것은
유지보수도 어렵고 낭비가 될 것이다. 이럴 때 모듈이 필요하다. 함수 welcome을 모듈로 만들어보자.
main파일
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <html><!-- welcome()를 호출하는 파일이 여기 말고 100개 파일이 더있다 생각 해보자 --> <head> <meta charset="utf-8"/> <!-- 웹 브라우져가 출력 될때 script문을 만나면 src라는 속성이 있는지 없는지 확인한다(src=속성 ) 그 속성에 값이 있다면 그해당 파일을 불러 와서 script몸통에 넣는 것과같다 --> <script src="greeting.js"> </script> </head> <body> <script> //모듈화 이해를 돕기위한 코드 // 이 규모는 모듈화가 필요는 없다 // 하지만 welcome()함수 안이 매우 복잡하다 가정하자 // 여기에 welcome()함수를 작성하기 다소 복잡할 수 있다그러니 별도의 파일로 빼고 별도의 파일을 읽어모는것을 통해서 welcome()함수를 사용할 수 있다면 길고 복잡한 함수가 단 한줄로 바뀔 수 있다 /*function welcome(){//이함수를 컷팅해서 greeting함수에 너어준다 return 'Hello world' } */ alert(welcome());//welcome() 한 페이지에서 50번 호출된다 생각해보자 </script> </body> |
참고 그림
greenting.js 파일
1 2 3 4 | function welcome(){ return 'Hello world' } | cs |
파일을 분류함으로 해서 main파일이 코드가 간겨해진 점을 볼 수 있다
이렇게 sub.html파일 에서 도 사용할 수 있다
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html> <head> <script src="greenting.js"></script> <title></title> </head> <body> <script > welcome(); </script> </body> </html> | cs |
모듈의 사용
새로운 파일을 만든다. 이름은 greeting.js 다. 자바스크립트 파일은 확장자로 js를 사용한다.
greeting.js
function welcome(){
return 'Hello world';
}
main.html의 내용을 다음과 같이 변경한다.
main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="greeting.js"></script>
</head>
<body>
<script>
alert(welcome());
</script>
</body>
</html>
이전 예제와 비교했을 때 결과는 같다.
하지만 함수 welcome을 main.html의 외부 파일로 분리했다. 다음은 위의 코드에 대한 분석이다.
<script src="greeting.js"></script>
JavaScript와 HTML은 완전히 다른 문법을 가진 언어다. 그런데 HTML 문서 안에는 JavaScript와 HTML이 동시에 표현된다.따라서브라우저에게 어디서부터 어디까지가 JavaScript이고, HTML인지를 구분해서 알려줘야 한다. 이 역할을 하는 HTML 태그가 script 태그다.
script 태그 안쪽에 위치하는 컨텐츠는 브라우저에 의해서 JavaScript로 인식된다. 그런데 위의 코드는 컨텐츠 대신에 src 속성이 있다. 브라우저는 src 속성에 있는 파일을 다운로드해서 실행시킨다. greeting.js에는 함수 welcome가 정의되어 있기 때문에 main.html 안에 이 함수가 정의 되어 있지 않음에도 실행할 수 있는 것이다.
3.Node.js
서버쪽 자바스크립트이다.우리가 웹브라우져서에 동작하는 자바스크립트는 클라이언트쪽 자바스크립트
모듈을 로드하는 기능
Node.js를 위한 것 아니기 때문에 Node.js를 실행하는 방법은 다루지 않는다.
호스트 환경(구글플레이스,Node.js,웹 브라우져)에 따라서 모듈을 로드하는 방법이 달라진다는 것을 보여주기 위한 예제일 뿐이기 때문임.
모듈을 로드하는 방법은 호스트 환경에 따라서 달라진다. Node.js에서는 아래와 같은 방법으로 모듈을 로드한다.
node.circle.js (로드될 대상)//읽음을 당하는 쪽
var PI = Math.PI;
exports.area = function (r) {
return PI * r * r;
};
exports.circumference = function (r) {
return 2 * PI * r;
};
node.demo.js (로드의 주체)// 파일을 읽어 오는 쪽
// 1. 모듈화 파일 읽어 오는 방법 = Node.js가 제공하는 require함수를 호출할때 인자값으로 파일명을 넣어 준다
//2. 그럼 그파일을 가져와서 circle변수에 담는다
var circle = require('./node.circle.js');
console.log( 'The area of a circle of radius 4 is '
+ circle.area(4));//3.여기서 circle.area(4))를 호출하면 위에있는 exports.area가 호출이되어 실행된다
아래는 실행방법과 실행 결과다.
F:\BitNami\wampstack-5.4.22-0\apache2\htdocs\javascript\module>node node.demo.js
The area of a circle of radius 4 is 50.26548245743669//4.결과
4.라이브러리
라이브러리는 모듈과 비슷한 개념이다. 모듈이 프로그램을 구성하는 작은 부품으로서의 로직을 의미한다면 라이브러리는 자주 사용되는 로직을 재사용하기 편리하도록 잘 정리한 일련의 코드들의 집합을 의미한다고 할 수 있다. 프로그래밍의 세계에는 휼룡한 라이브러리가 많다. 좋은 라이브러리를 선택하고 잘 사용하는 것은 프로그래밍의 핵심이라고 할 수 있다.
미리 만들어진 것을 잘사용하는 것이 좋다
자바스크립트로 웹브라우져를 제어하는 방법은 기본적으로 웹브라우져에서 제공하는 기능,자바스크립트가 제공하는 기능을 이용해서 모든것을 다 할 수 있다. 이것들이 할 수 없는 것,즉 웹브라우져에서 제공하는 기능,자바스크립트가 제공하는 기능 이 두가지가를 제외한 어떠한 기능도 할 수 없다 . 우리는 브라우져가 허용하는 기능 많을 사용할 수 있다 하지만 브라우져가 제공하는 기능 들은 불편하다 너무 자유도가 높고 기능이 파편하다 라이브러리는 어떠한 목표를 선정해 놓은 로직들의 집합이라고 할 수 있다
웹페이지를 쉽게 제어하거나 , 서버와 쉽게 통신할 수 있게 하는 것 또는 목적을 정해 놓고 그목적을 쉽게 달성할 수 있도록 만들어 놓은 코드들의 집합이다 .그래서 라이브러리를 이용하면 한줄로 끝나던일이 우리가 직접 브라우져가 제공하는 기능을 사용하면 1만줄 한달이 걸릴수가 있다
자바스킄립트에서 사람들이 가장많이 사용하는 라이브러리는 jQuery이다
하지만 라이브러리는 유행이 잇고 그시대 흐름레 따라 유행이 달라진다
일단 홈페이지에 들어가서 jQuery의 자바스크립트 파일을(모듈)을 가지고 와야한다 다운로드하고 그것을 읽어오면 된다
또하나는 APIdocumention(사용 설명서)이다 jQuery가 우리에게 제공하는 명령어 리스트라생각하면된다 greenting.js= welcom함수를 제공한 다 이것 과같은 월리
5.라이브러리사용하기
아래 예제는 유명 라이브러리인 jQuery를 사용하는 방법이다.
jQuery 홈페이지에서 파일을 다운로드 받는다.
jQuery 메뉴얼을 이용해서 사용법을 파악한다.
아래는 jQuery를 이용한 예제이다.
쭉 보면 괸장히 큰 파일이라는 것을 알 수 있다
간다한 코드를 작성하고 파일을 가져온뒤
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html> <head> <!-- 파일 가져 오기 --> <script src="jQuery.js"></script> </head> <body> <ul id="list"> <li>empty</li> <li>empty</li> <li>empty</li> <li>empty</li> </ul> </body> </html> | cs |
활용 코드 jQueryr를 사용해 단 3줄로 버튼 클릭시 글바뀝 .
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <!DOCTYPE html> <html> <head> <!-- 파일 가져 오기 --> <script src="jQuery.js"></script> </head> <body> <!-- 우리가 제어할 곳 --> <ul id="list"> <li>empty</li> <li>empty</li> <li>empty</li> <li>empty</li> <!-- 버튼을 클릭시 execute->kim sunyoung 바뀌게 하려한다 --> <input type="button" id="execute_btn" value="execute"/> <script type="text/javascript"> $('#execute_btn').click(function(){ $('#list li').text('kim sunyoung'); }) //jQuery에서 우리에게 제공하는 약속되어 있는 예약어= '$' 이다 //jQuery= 모든 경우 $로 시작한다 //'#list'=아이디 값이 list인 테그를 가르킨다 (ul태그를 가르킨다 ) //$('#list li').text('kim sunyoung');//아이디 값이 list인 테그의 li를 가르킴 // 이러한 기능을 우리가 직접 만들면 상당이 힘들어 진다 </script> </ul> </body> </html> | cs |
결과
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<ul id="list">
<li>empty</li>
<li>empty</li>
<li>empty</li>
<li>empty</li>
</ul>
<input id="execute_btn" type="button" value="execute" />
<script type="text/javascript">
$('#execute_btn').click(function(){
$('#list li').text('coding everybody');
})
</script>
</body>
</html>
다음은 jQuery를 이용하지 않고 동일한 기능을 구현한 예제이다. 이렇게 많은 코드가 사용된다는 것을 확인할 수 있다
<!DOCTYPE html>
<html>
<body>
<ul id="list">
<li>empty</li>
<li>empty</li>
<li>empty</li>
<li>empty</li>
</ul>
<input id="execute_btn" type="button" value="execute" />
<script type="text/javascript">
function addEvent(target, eventType,eventHandler, useCapture) {
if (target.addEventListener) { // W3C DOM
target.addEventListener(eventType,eventHandler,useCapture?useCapture:false);
} else if (target.attachEvent) { // IE DOM
var r = target.attachEvent("on"+eventType, eventHandler);
}
}
function clickHandler(event) {
var nav = document.getElementById('list');
for(var i = 0; i < nav.childNodes.length; i++) {
var child = nav.childNodes[i];
if(child.nodeType==3)
continue;
child.innerText = 'Coding everybody';
}
}
addEvent(document.getElementById('execute_btn'), 'click', clickHandler);
</script>
</body>
</html>
라이브러리를 사용하는 것이 얼마나 유용한것인지 알 수 있다 .
'생활코딩 JavaScript' 카테고리의 다른 글
| 정규표현식 -1.오리엔테이션 2.패턴만들기 3.RegExp 객체의 사용 4.String과 정규표현식 5.옵션(i,g)6.캡쳐7.치환 (0) | 2018.11.26 |
|---|---|
| UI와 API 그리고 문서보는 법1.UI와 API 소개 2.문서보는법 (0) | 2018.11.26 |
| 객체-1.객체의 소개와 문법 2.객체와 반복문 3.객체지향 프로그래밍 (0) | 2018.11.25 |
| 배열-1.배열의 문법 2.배열의 효용성 3.배열의 사용-배열과 반복문 4.배열의 조작-추가 5.배열의 조작-제거 ,정렬 (0) | 2018.11.19 |
| 함수-1함수란? 2.함수의 효용성 3.함수 입력4.함수쳘력5.다양한 함수 (0) | 2018.11.18 |
