[부스트코스]자바스크립트의 시작(jQuery, 라이브러리와 프레임워크)

네이버 부스트코스/[부스트서포터즈3기]자바스크립트의 시작

[부스트코스]자바스크립트의 시작(jQuery, 라이브러리와 프레임워크)

mmin.h 2021. 2. 15. 22:32

안녕하세요 부스터코스 3기 서포터즈 허브입니다. 🌿

부스터코스란?

커넥트재단은 네이버가 설립한 비영리 교육 재단입니다.
소프트웨어 개발자 양성 교육 프로그램, 부스트코스와 함께
당신의 개발 커리어를 업그레이드하세요!

제 포스팅은 강의 내 생각해보기와 수업에서 다루는 코드를 직접 크롬화면에서 확인 해볼 수 있도록 진행합니다. 관련된 개념과 강의는 함께 올려드리는 링크에서 확인해보실 수 있습니다.

www.boostcourse.org/cs124/joinLectures/52258

자바스크립트의 시작

부스트코스 무료 강의

www.boostcourse.org

라이브러리와 프레임워크

https://www.boostcourse.org/cs124/lecture/147573

자바스크립트의 시작

부스트코스 무료 강의

www.boostcourse.org

오늘날 우리가 만드는 소프트웨어는 혼자서 만드는 것이 아닙니다. 다른 사람들이 이미 잘 만들어 놓은 코드를 가지고 빠르게 조립해서 우리가 원하는 코드를 만들 수 있다는 것이죠. 이번 시간에는 다른 사람들의 소프트웨어를 가져와서 사용할 수 있는 방법에 대해서 알아봅시다.

소프트웨어의 사회성

이렇게 다른 사람과 코드를 통해서 협력하는 모델에는 두 가지가 있습니다.

라이브러리는 프로그램에 필요한 부품이 되는 소프트웨어가 정리되어 있는 것입니다. 프레임워크는 만들고자 하는 프로그램의 종류에 따라서 공통적인 부분을 미리 만들어놓는 것입니다. 필요한 부분만 약간 수정해서 사용할 수 있는 것이죠. 즉, 라이브러리는 우리가 필요한 부분을 가져와서 사용하는 것이라면, 프레임워크는 직접 프레임워크 안으로 들어가서 디테일을 수정해서 사용하는 것이라고 생각하시면 됩니다.

jQuery 라이브러리

가장 유명한 Javascript 라이브러리 중 하나는 jQuery입니다. 이 라이브러리를 사용하면 생산성을 높일 수 있습니다. 인터넷에서 jQuery를 다운로드하는 방법도 있고, CDN이라는 방법을 사용해도 됩니다. CDN을 사용하면 코드를 한 줄 추가하는 것만으로도 라이브러리를 가져와서 사용할 수 있습니다. 예를 들어 jQuery의 구글 CDN은 다음과 같습니다. (jQuery 홈페이지에서 찾을 수 있습니다.)

https://developers.google.com/speed/libraries

Hosted Libraries | Google Developers

A stable, reliable, high-speed, globally available content distribution network for the most popular open-source JavaScript libraries.

developers.google.com

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

이 한 줄을 <head>에 추가하면 된다는 것이죠.

jQuery를 사용하면 반복문을 사용하지 않고도 모든 태그를 한 번에 처리할 수 있습니다. 예를 들어서 다음과 같이 사용할 수 있습니다.

$('a').css("color",powderblue);

반복문을 사용하지 않고 이 한 줄만으로 모든 a 태그의 색깔을 powderblue로 바꿀 수 있는 것입니다.

하지만 jQuery는 새로운 언어가 아닙니다. 우리가 직접 함수를 만드는 대신 이러한 일을 하는 함수가 jQuery 안에 미리 만들어져 있는 것이죠.

이렇게 적절한 라이브러리를 잘 사용하면 효율적으로 코딩을 할 수 있게 됩니다.

그럼 예제 코드를 한번 수정해볼까요?

var Links = {
    setColor:function(color){
        $('a').css("color",color);
    }
}
var Body = {
    setColor: function(color){
        $("body").css("color",color);
    },
    setBackgroundColor:function (color){
        $("body").css("background-color",color);
    }
}
function nightDayHandler(self) {
    var target = document.querySelector("body");
    if (self.value === "night") {
        Body.setBackgroundColor("black");
        Body.setColor('white');
        Links.setColor('powderblue');
        self.value = 'day';
    }else {
        Body.setBackgroundColor('white');
        Body.setColor('black');
        Links.setColor('blue');
        self.value = 'night';
        
    }
}

저번 포스팅에 있었던 예제 코드의 js를 이렇게 수정해볼 수 있습니다. 코드가 훨씬 간결해 졌네요.

https://modernalchemist.tistory.com/63?category=958380

[부스트코스]자바스크립트의 시작(파일로 쪼개서 정리 정돈, script의 src)

안녕하세요 부스터코스 3기 서포터즈 허브입니다. 🌿 부스터코스란? 커넥트재단은 네이버가 설립한 비영리 교육 재단입니다. 소프트웨어 개발자 양성 교육 프로그램, 부스트코스와 함께 당신

modernalchemist.tistory.com

생각해보기

jQuery를 직접 자신의 HTML 파일에 추가해보고, 이를 이용해서 모든 h1 태그의 글자 크기를 바꾸는 코드를 작성해 봅시다.

var Fonts = {
    setFont: function(size){
        $("h1").css("font-size",size);
    }
}

www.boostcourse.org/

다 함께 배우고 성장하는 부스트코스

부스트코스(boostcourse)는 모두 함께 배우고 성장하는 비영리 SW 온라인 플랫폼입니다.

www.boostcourse.org

github.com/hhhminme

hhhminme - Overview

꾸준히 공부중인 초보 개발자지망생 hub@kakao.com. hhhminme has 12 repositories available. Follow their code on GitHub.

github.com