(생활코딩) Javascript 라이브러리와 프레임워크

소프트웨어를 만든다고 하면 혼자 만드는 경우는 없다.

우리는 누군가가 만든 소프트웨어 위에서 동작하는 소프트웨어를 또 만들고 있다. (이를들면 웹브라우저)

아니라고 하더라도 우리가 소프트웨어를 만들 때 혼자 만드는 것보다는 다른 사람이 이미 잘 만들어 놓은 것을 부품으로해서 내가 만들고자 하는 것을 빠르게 조립해서 만들어 가는것이 오늘날 소프트웨어를 만드는 기본이라고 할 수 있다.

 

생산자로서 소비자가 되며 소프트웨어의 사회성을 알아보자.

 

라이브러리(Library) 와 프레임워크(Framework)가 있다. 이 두 가지는 다른 사람의 도움을 받아 소프트웨어를 만든다는 점에서 비슷한데 라이브러리는 일단 도서관이라는 뜻으로 내가 만들고자하는 프로그램에 필요한 부품이 되는 소프트웨어를 잘 정리정돈해놓은, 재사용하기 쉽도록 되어 있는 소프트웨어를 라이브러리라고 한다. 내가 만들고 있는 프로그램에 사용할 부품을 가져오는 느낌이다. 

 

프레임워크같은 경우는 만들고자 하는 것이 있을 때 만들고자 하는 것이 무엇이냐에 따라 예를 들면 게임, 웹, 채팅 등 만들고자 하는 것이 무엇이냐에 따라서 그것을 만들려고 할 때 언제나 필요한 공통적인 것이 있고, 기획의도에 따라서 달라지는 부분이 있을 것이다. 그 중에서 공통적인 부분은 프레임워크라는 것이 만들어 놓고, 우리는 만들고자하는 것의 기능에 따라, 또는 개성에 따라 달라지는 부분만 살짝 수정하는 것을 통해서 만들고자 하는 것을 처음부터 끝까지 만들지 않도록 해주는 거의 반제품 같은 것으로 볼 수 있다.

 

라이브러리는 소프트웨어를 만드는 내가 라이브러리를 당겨와서 쓰는 느낌이라면,  프레임워크는 프레임워크 안에 우리가 들어가서 작업하는 느낌이다. 

 

( 예를들어 집을 만든다고 가정했을 때, 라이브러리는 자재랑 가구 등 집에 필요한 재료이고, 프레임워크는 이미 집의 수도나 뼈대같은 기본적인 구조들이 있어 꾸미기만 하면 된다고 한다.)

 

Javascript의 라이브러리는 jQuery가 있다. 상당히 오래 됐고 아주 안정적인 라이브러리이다. 그리고 이것을 사용하면 생산성이 훨씬 더 높아진다. 또는 CDN(Content Delivery Network)를 통해서 자기들의 서버에 파일을 보관해놓고, 우리는 그것을 script src를 통해서 가져갈 수 있도록 하는 방식도 있다.

---

jQuery CDN 관련

 

jQuery CDN download :: https://jquery.com/download/

 

여기서 Google CDN을 알아보자.

 

 

 Google CDN 링크를 누르면 jQuery의 최신버전 코드를 확인할 수 있다. 복사해서 전의 코드들에 붙여넣기 하자.

 

 

보면 <script>태그로 구글에서 제공한 jQuery라이브러리의 주소가 적혀있는걸 확인할 수 있다. 이걸로 끝이다. 더 이상 다운로드 받거나 할 필요가 없다.

 

 

jQuery를 통해 color.js파일을 수정해보자. 보면 처리해야 될 태그들이 여러가지 있을 때 반복문을 통해서 처리를 해야하는데(while문), jQuery를 이용하면 반복문을 사용하지 않아도 된다. 반복문을 jQuery가 우리 대신 처리해 주니깐 한줄 코드로 해당 기능을 사용할 수 있다.

 

jQuery는 $로 시작한다. $()는 $이름의 함수이다. $('a')는 이 웹페이지의 모든 a 태그를 jQuery로 제어하겠다는 뜻이다. JQuery를 이용해서 어떤 element, 어떤 태그의 css를 바꾸고 싶을 때는  $('a').css('color',color);를 해주면 된다.

(*jQuery는 새로운 언어가 아니고 JavaScript를 이용해서 우리 대신에 CSS라는 함수를 jQuery가 만들어 준 것이다. 저 css라는 함수를 사용하면 내부적으로 주석처리된 반복문을 처리해주는 것이다)

 

Body객체에 대한 부분도 위와 같이 jQuery를 사용할 수 있다.