TIL. 14 JavaScript - 라이브러리와 프레임워크

🎈 개요

• library(라이브러리) 단순 활용가능한 도구들의 집합을 말하며, 내가 만들 제품의 부품을 가지고 와서 사용하는 느낌이다. 개발자가 전체적인 흐름을 알고 기능을 적용해야 한다.

• framework(프레임워크) 뼈대나 기반구조를 뜻하며, 프로그래밍을 진행할 때 필수적인 코드, 알고리즘 등 어느 정도 구조를 제공해 그 위에 덧대어 코드를 작성해 프로그램을 개발을 진행하면 된다.(공통적인 부분을 미리 제공해주며, 기능 및 개성에 따라 살짝씩 수정한다.)

• 라이브러리는 단순한 도구로써 개발자가 전체적인 흐름을 이끌어야 하지만, 프레임워크는 어느 정도의 기반구조를 가지고 있어 개발자가 흐름 구조속에서 필요한 코드를 짜 넣는다.

• jQuery 상당히 오래됐고 안정적인 라이브러리이다.

  • Google CDN

• UI(User Interface) 사용자를 위한 조작장치

• API(Application Programming Interface) 프로그래밍을 위한 조작장치
  
  
  

📋 실습

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);
    }
}

• 위의 주석(//)이 기존 코드이며, JavaScript 대신 jQuery를 사용하여 $를 활용해 간단한 코드로 같은 효과를 실행할 수 있다.