๋ฐ˜๊ฐ€์›Œ์š”! ํ—ˆ๋ธŒ์ž…๋‹ˆ๋‹ค!

์ €๋Š” ๊ฐœ๋ฐœ์ž๋ฅผ ํ˜„๋Œ€ ์—ฐ๊ธˆ์ˆ ์‚ฌ๋ผ๊ณ  ํ‘œํ˜„ํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. ๊ฐœ๋ฐœ์„ ๊ณต๋ถ€ํ•˜๋ฉฐ ๋Š๋‚€ ์ ๋“ค๊ณผ ์ด์•ผ๊ธฐ๋ฅผ ๊ธฐ๋กํ•˜๋Š” ๊ณต๊ฐ„์ž…๋‹ˆ๋‹ค.

๋„ค์ด๋ฒ„ ๋ถ€์ŠคํŠธ์ฝ”์Šค/[๋ถ€์ŠคํŠธ์„œํฌํ„ฐ์ฆˆ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