Library vs Framework

당연한 얘기지만 프로그래밍을 할 때 처음부터 끝까지 내가 만들일은 없다. 

누군가와 협력해서, 누군가가 이미 만들어 둔 소스를 가져와서 어떤 것을 창조할 일이 굉장히 많을 것이다. 

 

실제로 엑스형 프로젝트를 만들때 디자인의 99%는 내가 만든게 아니라 남이 이미 만든 소스를 가져온것 이었다. 

 

라이브러리와 프레임워크는 둘 다 남의 도움을 받아서 프로그래밍을 한다는 뜻이다. 

 

Library: 내가 프로그램을 만들 때 필요한 도구&부품들을 정리정돈 되어 있는 곳/ 내가 사용할 부품을 가져오는 곳

Framework: 내가 만들고자 하는 서비스가 있을것인데, 예를 들어 게임이나 채팅 등등. 그때 기본적으로 게임이나 채팅에서 공통적으로 쓰이는 기능을 제공하는것이다. 

 

 

Javascript 의 Library 중 가장 유명하고 안정적인 것이 jQuery 란다. 

제이쿼리가 뭔가 궁금했는데 드디어 궁금증이 풀리는 순간이 왔다. 

 

 

허어 어렵군

 

일단 jQuery의 사용방법은 직접 다운로드 받기 or 구글 등에서 제공하는 소스코드 복붙하기가 있는데 난 후자로 실습해보려한다. 

 

jQuery의 장점은 

1. 코드가 직관적이고

2. 반복문 등의 코드를 한 줄 정도로 짧게 줄일 수 있다. 

 

이거는 내가 직접해봐야할 것 같다. 

 

<script>
  function setColor(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);
  }
  function nightDayHandler(self){

    var target =   document.querySelector('body');
    if(self.value === 'night'){
      target.style.backgroundColor = 'black';
      target.style.color = 'white';
      self.value = 'day';

      setColor('powderblue');
    } else {
      target.style.backgroundColor = '#a9a9a9';
      target.style.color = 'black';
      self.value = 'night';

      setColor('black');
  }

  }
  </script>

주석처리 한 부분이 jQuery 없이 쓴 'a' 태그의 색상을 변경하는 코드이고, // 주석처리는 ctrl + / 동시에 누르면 가능

$로 시작하는 저 한줄짜리 코드가 jQuery를 포함해서 쓴 코드이다. 

몇 줄 짜리 코드가 단 하나의 코드로 변경된 것을 알 수 있다. 

 

 

 

<script>
  function setColor(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){
      $('body').css('color', color);
    },
    setBackgroundColor: function (color){
      $('body').css('backgroundColor', color);
    }
  }


  function nightDayHandler(self){

    var target =   document.querySelector('body');
    if(self.value === 'night'){
      Body.setBackgroundColor = 'black';
      Body.setColor = 'white';
      self.value = 'day';

      setColor('powderblue');
    } else {
      Body.setBackgroundColor = '#a9a9a9';
      Body.setColor = 'black';
      self.value = 'night';

      setColor('black');
  }

  }
  </script>

순간 영상이랑 내가 쓴 코드가 달라서 좀 헷갈렸는데 Body에 쓰이는 코드들을 객체화 안해서 다른거였다.

 

다 만들어 줬고, jQuery 사용해서 수정한 코드이다. 

 

+) 아 그리고 나는 야간모드 버튼을 굳이 파일로 쪼개서 링크 걸지 않았는데 (난 어차피 실습용이고 진짜 내 웹페이지에는 별로 필요가 없어서) 만약 js 파일로 링크를 걸었다면

 

js 파일을 수정하고, 그 외 모든 파일들에도 jQuery 링크들을 삽입해야 작동한다. 

 

 

나중에 헷갈리지 않게 적는다.