오늘날 소프트웨어를 만든다고 하면 혼자 만드는 경우는 없다. 그렇게 할 수가 없다. 무슨 말이냐면, 우리는 누군가가 만든 소프트웨어 위에서 동작하는 소프트웨어를 또 만들고 있는 것이기 때문이다. 이를테면 웹브라우저 같은 것이다. 그리고 그런 얘기가 아니라고 하더라도 우리가 소프트웨어를 만들 때 자기 혼자 만드는 것보다는 다른 사람이 이미 잘 만들어 놓은 것을 부품으로 해서 내가 만들고자 하는 것을 빠르게 조립해서 만들어 가는 것이 오늘날 소프트웨어를 만드는 기본 중의 기본이라 할 수 있다.
그래서 여러분들이 지금까지는 생산자가 되는 방법을 살펴봤다. 이제부터는 다른 사람이 만든 소프트웨어를 부품으로 해서 그 소프트웨어를 소비해서 내가 만드는 소프트웨어의 생산자가 되는 방법을 살펴보려고 한다. 다시 말해서 생산자로서 소비자, 그런 걸 좀 살펴볼 것이다. 소프트웨어의 사회성이라고 할 수 있겠다.
이 때 우리가 좀 알아 두면 좋은 키워드는 두 가지다. 라이브러리와 프레임워크라고 하는 것이 있다. 이 두 가지는 비슷하다. 다른 사람의 도움을 받아 소프트웨어를 만든다는 점에서 비슷하다.
일단 라이브러리란 말은 도서관이란 뜻이다. 도서관이라는 것은 무언가가 정리정돈되어 있는 곳이다. 내가 만들고자하는 프로그램에 필요한 부품이 되는 소프트웨어를 잘 정리정돈해놓은, 재사용하기 쉽도록 되어 있는 소프트웨어를 라이브러리라고 한다. 라이브러리는 내가 만들고 있는 프로그램에 사용할 부품을 가져오는 느낌입니다.
그리고 프레임워크라고 하는 것도 있다. 두 가지를 똑같이 봐도 상관없긴 한데 약간 좀 뉘앙스가 다르다. 프레임워크 같은 경우는 만들고자 하는 것이 있을 때 만들고자 하는 것이 무엇이냐에 따라 예를 들면 게임이냐, 웹이냐, 또 채팅이냐 뭐 여러 가지가 있겠다. 만들고자 하는 것이 무엇이냐에 따라서 그것을 만들려고 할 때 언제나 필요한 공통적인 것이 있고, 만들고자 하는 것에 대한 기획 의도에 따라서 달라지는 부분이 있을 거란 말이다. 그중에서 공통적인 부분은 프레임워크라는 것이 만들어 놓고 우리는 만들고자 하는 것의 기능에 따라, 또는 개성에 따라 달라지는 부분만 살짝 살짝 수정하는 걸 통해서 만들고자 하는 것을 처음부터 끝까지 만들지 않도록 해주는 거의 반제품과 같은 것이 프레임워크라고 부를 수 있다.
라이브러리는 소프트웨어를 만드는 내가 라이브러리를 당겨 와서 쓰는 느낌이라면, 프레임워크는 프레임워크 안에 우리가 들어가서 작업하는 느낌이 있다. 어쨌든 라이브러리가 됐건 프레임워크가 됐건 다른 사람과 협력하는 모델이다, 라고 생각하면 되겠다.
그 중에서 라이브러리를 살펴볼 건데, JavaScript 라이브러리 중에 가장 유명한 건 당연 jQuery라고 하는 라이브러리다. 이 jQuery라는 라이브러리는 상당히 오래됐고 아주 안정적인 라이브러리다. 그리고 이 라이브러리를 사용하면 이것을 사용하지 않고 직접 코딩했던 것보다 생산성이 훨씬 더 높아진다. 그렇다고 지금까지 배웠던 것이 쓸모없는 아니고, 배웠던 지식이 있어야 jQuery를 잘 다룰 수 있다. 또, 지금까지 다뤘던 지식과 배우는 동안 느꼈던 절망감이 있어야 jQuery를 만날 때 즐거워진다.
자, 즐거워져 보자. jQuery를 먼저 한번 검색해보자. jQuery를 다운로드할 수 있는 방법들이 나와 있다. 링크를 클릭하면 다운로드가 시작되고, 다운로드된 파일을 프로젝트 폴더 디렉터리로 이동해도 된다. 그리고 또 다른 편리한 방법은 CDN이라고 찾아보는 것이다. CDN은 Content Delivery Network의 약자다. 직접 이 라이브러리를 다운로드 받아서, 자신의 프로젝트에 포함시키고, 업로드하고, 그리고 그걸 또 서비스하려면 돈을 내는 등 복잡하다. 그래서 이처럼 라이브러리들이 CDN이라는 걸 통해서 자신들의 서버에다가 파일을 보관해놓고 우리는 그것을 script src를 통해서 가져갈 수 있도록 하는 방식을 취하고 있다. 얼마나 멋진 세상인가. Google CDN을 이용해볼 것이다. Google에서 제공하는 jQuery 최신버전 코드는 이렇다.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
</head>
<body>
</body>
</html>이 코드를 잘 보면 script 태그다. 그리고 src를 통해서, 구글에서 제공한 jQuery라이브러리의 주소가 저렇게 적혀있다. 그럼 이걸로 끝이다. 더 이상 뭘 다운로드 받거나 할 필요가 없다. 그러면 이 상태에서 jQuery를 이용해서 무언가를 한번 해보자. 물론 사용설명서를 좀 보면서 해야 한다.
var Links = {
setColor:function(color){
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = color;
i = i + 1;
}
}
}위의 코드를 jQuery를 이용하여 다시 작성해보자.
var Links = {
setColor:function(color){
$('a').css('color', color);
}
}자, 위에 있는 코드와 아래에 있는 이 코드 중에 뭐가 더 코딩하기 쉬울까? 그리고 뭐가 더 직관적일까? jQuery가 훨씬 더 직관적이다. 그런데 한 가지 기억해야 할 것은 jQuery는 새로운 언어가 아니고 JavaScript를 이용해서 우리 대신에 CSS라는 함수를 jQuery가 만들어 둔 것이다. 저 CSS라는 함수를 사용하면 저 함수가 내부적으로 이런 작업을 대신 처리해주고 있는 것이다. 이런 것을 음미하길 바란다.
마무리
JavaScript는 오늘날 가장 빠른 속도로 성장하는 언어 중 하나고 또 웹이 워낙 중요한 시스템이기 때문에 수많은 라이브러리들이 쏟아지고 있다. 그래서 문법을 잘 알고 하는 것도 중요하지만 어떤 라이브러리가 새로 생겼는지, 어떤 라이브러리가 있는지를 여러분이 많이 알수록, 많은 일을 할 수 있는 가능성을 갖게 된다.
이렇게 해서 파일로 로직을 쪼갰을 때, 자신이 프로그램을 짤 때도 도움이 되지만 다른 사람이 짠, 정리정돈한 것을 내 프로젝트로 가져오는 데에도 굉장히 중요한 역할을 하는 것이 이렇게 파일로 코드를 정리정돈하는 것이라는 것을 살펴봤다. 또 JavaScript 커뮤니티에서 가장 중요한 라이브러리 중 하나인 jQuery라는 것을 사용하는 가장 중요한 방법도 살펴봤다.
(팁)
Ctrl + / 을 입력하면 선택한 블록을 주석처리한다.
