[ JavaScript ] JS 라이브러리(JQuery)
생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다.
- 라이브러리
라이브러리는 모듈과 비슷한 개념입니다.
하지만 모듈은 프로그램을 구성하는 작은 부품으로써 로직을 의미한다면 라이브러리는 자주 사용되는 로직을 재사용하기 편리하도록 정리가 되어있는 코드들의 집합이라고 할 수 있습니다.
프로그래밍을 할 때 라이브러리를 만들어서 사용하는 것도 좋지만,
이미 좋은 라이브러리가 많기 때문에 잘 알아보고 선택하여 사용하는 것은 코딩을 할 때에 효율성을 높일 수 있습니다.
- 라이브러리 사용 (jQuery)
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.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('good~');
})
</script>
</body>
</html>위의코드는 버튼을누르면 "empty"라고 가진 문자열 텍스트를 "good~" 으로 바꾸는 코드입니다.
해당코드의 중요한 부분만 간단히 설명하자면.
<script src="https://code.jquery.com/jquery-3.5.1.js"></script> jquery의 파일을 불러온다는 의미입니다.
$('#execute_btn').click(function(){
$('#list li').text('good~');
})jquery는 $로 시작합니다.
"execute_btn" 인 id값을 클릭하게된다면 id가 list인 li속성의 text를 "good"으로 바꾸는 코드입니다.
위의 예제는 매우 간단하게 약 3줄을 추가해 구현했습니다.
근데 만약 라이브러리를 사용안한다면 해당기능을 어떻게 구현해야할까요?
라이브러리를 사용안한다면
<!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 = 'good';
}
}
addEvent(document.getElementById('execute_btn'), 'click', clickHandler);
</script>
</body>
</html>결괏값은 같지만,
위의 코드처럼 라이브러리를 사용하지않는다면 해당위의 코드처럼 많은 코드를 작성해야합니다.
SUA 정보보안 멘토링에 참여하고 있습니다.