라이브러리와 프레임워크

다른 사람이 이미 잘 만들어놓은 것을 부품으로 삼아 내가 만들고자하는것을 빠르게 조립해서 만드는 것은 오늘날 소프트웨어 개발에 있어서 중요한 부분입니다.

지금까지는 스스로 생산자가 되는 방법을 알아봤다면, 이번에는 다른사람이만든 소프트웨어를 부품삼아 내가 만들고있는 소프트웨어의 생산자가 되는 방법을 살펴보겠습니다. (feat. 소프트웨어의 사회성)

 

이 때 알아두면 좋은 키워드가 라이브러리와 프레임워크입니다. (둘 다 다른사람의 도움을 받아 소프트웨어를 만든다는 공통점이 있습니다.)

1) 라이브러리 : 내가 만들고자하는 프로그램에 필요한 부품들이 되는 소프트웨어를, 재사용하기 쉽도록 잘 정리정돈해놓은 소프트웨어

2) 프레임워크 : 우리가 만들고자하는 것이 있을때 그것이 무엇이냐에 따라 언제나 필요한 공통적인것이 있고, 기획의도에 따라 달라지는 부분이 있습니다. 그중에서 공통적인 부분은 프레임워크라는 것으로 만들어놓고 만들고자하는 기능에 따라 달라지는 부분만 살짝씩 수정하는 방법으로 우리가 만들고자하는것을 처음부터 끝까지 만들지않게 해주는 거의 반제품과 같은 것.

 

라이브러리는 소프트웨어을 만드는 주체인 내가 라이브러리를 가져와서 쓰는것이라면, 프레임워크는 우리가 프레임워크 안에 들어가서 작업을 한다는 느낌이 있습니다.

 

---

먼저, 라이브러리의 예시를 알아볼텐데, 자바스크립트 라이브러리 중 가장 유명한 것은 jQuery라는 라이브러리입니다.

https://jquery.com/download/

Download jQuery | jQuery

위 페이지에서 [download]를 하면 jQuery 라이브러리를 내려받을 수 있고, 내려받은 파일을 프로젝트 디렉터리로 옮깁니다.

또 다른 편리한 방법은 CDN을 이용하는 것입니다.

CDN 이란 'Content Delivery Network'의 약자로, 우리가 직접 라이브러리를 내려받아 프로젝트에 포함시키고 업로드해서 서비스하면 돈이 들기때문에 많은 라이브러리들이 CDN을 통해 자신들의 서버에 파일을 보관해놓고 사용자는 <script> 태그의 src 속성을 통해 가져가는 방식을 취하고 있습니다.

예를들어 위 사이트에서 CDN 서비스 중 [Google CDN]으로 이동하면 구글에서 제공하는 jQuery의 최신 버전을 이용할 수 있습니다.  * Google CDN ->  3.x snippet 아래에있는 코드를 복사.

 

그럼 이 상태에서 jQuery를 이용해 colors.js 파일을 수정해보겠습니다.

 

 

위에 주석처리한 코드가 기존에 만들었던 코드이고, $ 뒤에 등장하는 코드는 jQuery를 이용한 코드입니다.

한눈에보아도 훨씬 간결한 코드인것을 볼 수 있는데요.

$('a') 는 이 웹페이지에 있는 모든 <a>태그를 jQuery로 제어하겠다라는 뜻입니다.

그리고 모든 <a>태그에 jQuery로 css('color', color)를 지정하였습니다.

 

colors.js

0.00MB

ex1.html

0.00MB

---

여러줄 주석처리할때 주석할 코드들을 드래그한 뒤 ctrl + / 을입력하면 주석을 만들어주며, 주석처리된 코드는 실행되지않습니다.

 

jQuery는 새로운 언어가 아니라 자바스크립트를 통해 우리대신 css()라는 함수를 jQuery가 만들어 둔 것입니다.

css() 함수를 이용하면 주석으로 처리한 작업을 jQuery가 대신 처리해준다는 것을 기억합시다.