WEB2 - JavaScript 35 (library VS framework)

라이브러리와 프레임워크
library & framework

공통적으로 협력하는 모델이다. 

 

그러나 라이브러리(library)는 내가 만들고자하는 프로그램에 필요한 부품이 되는 소프트웨어를 잘 정리정돈해놓은, 재사용하기 쉽도록 되어 있는 소프트웨어이다. (내가 만들고 있는 프로그램에 사용할 부품을 가져오는 느낌)

 

프레임워크(framework)는 만들고자 하는 것이 있을때 만들고자 하는 것이 무엇이냐에 따라 (예들 들면 게임이냐, 웹이냐, 채팅이냐) 그것을 만들려고 할 때 필요한 공통적인 것, 공통적인 부분을 프레임워크라고 하고 만들고자하는 것의 기능에 따라, 또는 개성에 따라 달라지는 부분만 살짝 살짝 수정하는 것에 따라 만들 수 있는 반제품과 같은 것.

 

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

---

library 에 대해서 알아보자.

• JS 의 library 중에서 가장 유명한 jQuery
  • jQuery 검색
  • 다운로드 Download the compressed, production jQuery 3.6.0  
  • 다운로드된 파일을 폴더 디렉토리로 이동
  • 다른 편리한 방법 CDN (Content Delivery Network)
    (라이브러리를 다운로드 하고 프로젝트에 포함시키고 업로드하고 서비스하는 모든 일을 하지 않고 자기들의 서버에 다가 보관해놓고 우리는 그것을 script src 를 통해서 가져갈 수 있도록 하는 방식)
  • Google CDN 사용해보기
    

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>​

• colors.js 
  추천검색어 jQuery css
  $('a') - 이 웹페이지에 있는 모든 a 태그에 대하여 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;
      // }
      $('a').css('color',color);
    }
  }
  var Body = {
    setColor:function(color){
      // document.querySelector('body').style.color=color;
      $('body').css('color',color);
    },
    setBackgroundColor:function(color){
      // document.querySelector('body').style.backgroundColor=color;
      $('body').css('backgroundColor',color);
    }
  }
  function nightDayHandler(self){
    var target = document.querySelector('body');
    if(self.value === '开启'){
      Body.setBackgroundColor('black');
      Body.setColor('white');
      self.value = '关闭';
  
      Links.setColor('mediumspringgreen');
  
    } else {
      Body.setBackgroundColor('white');
      Body.setColor('black');
      self.value = '开启';
  
      Links.setColor('limegreen');
    }
  }

   
•  나머지 웹페이지에도 Google CDN 의 script 태그 코드를 입력하면 모두 잘 작동하는 것을 볼 수 있다.