이번에는 라이브러리의 개념에 대해서 설명하면서 모듈의 개념을 마무리 해보겠다.
라이브러리와 모듈은 비슷한 개념인데
모듈은 프로그램을 구성하는 작은 부품이라는 의미라면
라이브러리는 자주 사용되는 로직을 재사용되기 편하도록 잘 정리한 일련의 코드들의 집합이다.
프로그래밍에서는 아주 많은 라이브러리가 존재한다.
또 프로그래머의 아주 독특한 문화인 오픈소스가 있다.
직접 코드를 짜는 것도 좋은 방법이지만, 이것이 만들고자 하는 것의 경쟁력의 원천이 아닌이상
누가 이미 만들어놓은 것이 있는지 찾아보는 것이 순서이다.
라이브러리라는것은 그것을 만들기 위한 목적을 가진 사람들이 모여 만들며, 많은시간-자본-노하우가 투여돼어있기 때문에
단지 사용하기위한 도구를 필요로 하는 것이면 이것보다 더 좋은 라이브러리를 만들기는 어렵고,
따라서 좋은 라이브러리가 있는지 먼저 찾아보고 프로그래밍 하는 것이 매우 중요하다.
그러면 javascript에서 라이브러리를 사용하는 방법을 알아보자.
자바스크립트로 웹브라우저를 제어하는 방법은
기본적으로 웹브라우저에서 제공하는 기능, 그리고 자바스크립트가 가지고 있는 기능
이것을 이용해서 모든것을 할 수 있다.
이것들이 할 수 없는것은 어떠한 라이브러리도 할 수 없는데
브라우저가 허용하는 기능만을 쓸 수 있기 때문이다.
하지만 그 브라우저가 제공하는 기능은 너무 자유도가 높다던지, 너무 기능이 파편화 돼있든지 사실 좀 불편하다.
라이브러리는 어떠한 목표를 선정해놓은 로직들의 집합으로, 웹페이지를 쉽게 제어할 수 있게 한다거나,
서버와 쉽게 통신할 수 있게 한다거나 하는 목적을 정해놓고
그 목적을 쉽게 달성할 수 있도록 만들어 놓은 코드들의 집합이기 때문에
똑같은 일은 한다면 라이브러리 이용했을 때 1줄로 되는 일이, 브라우저를 이용하면 10000줄, 한달이 걸릴수도 있는 일이다.
그리고 가장 많이 사용하는 라이브러리는 jquery이다.
하지만 라이브러리도 유행이 있고, 시점에 따라 가장 유행하는 라이브러리는 다른 것일 수 있다.
jquery 홈페이지에 접속하면, jquery를 다운받을 수 있다. 또한 이것을 사용하는 방법은
API DOCUMENTATION에 있는데, 우리가 이전 시간에 greeting.js를 모듈로 빼고 welcome이라는 함수를 호출했듯이
API DOCUMENTATION은 현재 jquery모듈안에 있는 함수들이 어떤 기능을 가지고 있는지 설명하고 있는 공간이다.
즉, 라이브러리 사용의 핵심은
그 파일을 가져오는 것과, 그 라이브러리가 어떤 기능이 있는지를 파악하는 것이다.
그럼 jquery를 사용하는 구체적인 방법을 살펴보자.
jquery 파일을 다운로드 받고, jquerydemo.html 파일을 만들어보자.
[jquerydemo.html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jquery</title>
<script src="js/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>
<scrilt>
$('#list li').text('coding everybody');
</scrilt>
</body>
</html>
라고 하게 되면, 이 $('#list li').text('coding everybody'); 한줄로 인해서
● coding everybody
● coding everybody
● coding everybody
● coding everybody
전부 empty가 coding everybody로 한번에 변경된다.
이런 기능을 jquery가 아니라 브라우저가 직접 만드는 기능으로 구현하려고 한다면 상당이 길어진다.
만약 어떤 버튼을 눌렀을 때 empty라는 text가 전부 coding everybody로 바뀌게 하려면 어떻게 해야할까?
[jquerydemo.html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jquery</title>
<script src="js/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 type="button" value="excute" id="excute_btn" />
<scrilt>
$('#excute_btn').click(function(){
$('#list li').text('coding everybody');
});
</scrilt>
</body>
</html>
이렇게 웹 페이지를 실행시키면 excute 버튼을 눌렀을 때
empty라는 text가 전부 coding everybody로 바뀐다.
하지만 이를 jquery로 구현하지 않고 자바스크립트로 구현해 놓은 것이 있는데 이고잉님이 생활코딩에서는 약 30줄 이상의 코드를 짜놨고,
<!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>
이 코드 또한 완전하지 않고, 몇가지 문제점을 가지고 있다고 하신다.
이를 통해서 라이브러리를 사용하는 것이 얼마나 중요한 일인가, 웹브라우저에서는 어떻게 라이브러리를 사용할 수 있는 가에 대해서 체감해볼 수 있었다.
'IT 인터넷 > javascript' 카테고리의 다른 글
| [javascript 언어공부]문서보기 (0) | 2018.06.11 |
|---|---|
| [javascript 언어공부]UI와 API (1) | 2018.06.11 |
| [javascript 언어공부] 모듈(1) (0) | 2018.06.01 |
| [javascript 언어공부] 객체(3) (0) | 2018.06.01 |
| [javascript 언어공부] 객체(2) (0) | 2018.06.01 |