[Front-end๐Ÿฆ] #30 jQuery

25139 ๋‹จ์–ด frontJavaScriptJavaScript

1. ๋ฉ‹์‚ฌ ์ˆ˜์—…

1. Promise

์–ด์ œ ๋ฐฐ์šด ๊ฒƒ์„ ๊ฐ„๋‹จํ•˜๊ฒŒ ๋ณต์Šตํ•˜๊ณ , ์ฝœ๋ฐฑ์ง€์˜ฅ์„ Promise๋กœ ๊น”๋”ํ•˜๊ฒŒ! ๋งŒ๋“ค์—ˆ๋‹ค.


2. jQuery

jQuery Library : js ์ฝ”๋”ฉํ•œ ๊ฒƒ์„ ๊ทธ๋ƒฅ ๋นŒ๋ ค ์“ฐ๊ฒ ๋‹ค.
Framework : ์ด๋ฏธ ์งœ์—ฌ์žˆ๋Š” ๊ฒƒ์— ๊ทœ์น™์„ ๋งž์ถฐ์„œ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ. ๋ ˆ๊ณ ์ฒ˜๋Ÿผ ์„ค๋ช…์„œ๋Œ€๋กœ ์กฐ๋ฆฝ!

์ง€๋Š” ํ•ด๋ผ๊ณ ๋Š” ํ•˜์ง€๋งŒ ์‹ค๋ฌด์—์„œ๋Š” ์—ฌ์ „ํžˆ ์ œ์ด์ฟผ๋ฆฌ๋ฅผ ๋ฌด์‹œํ•  ์ˆ˜๊ฐ€ ์—†๋‹ค. ์–ด์ œ ๋ณด๋ผ๋‹˜ ํŠน๊ฐ•์—์„œ๋„ ๋ฌด์‹ ์‚ฌ ํŽ˜์ด์ง€๋“ค ์ค‘์— jQuery ๋กœ ๋งŒ๋“ค์–ด์ง„ ํŽ˜์ด์ง€๋“ค์ด ๋งŽ๋‹ค๊ณ  ๋“ค์—ˆ๋‹ค.

1. CDN ์—ฐ๊ฒฐ

https://code.jquery.com

3.x ๋ฒ„์ ผ์˜ minified ๋ฅผ ์‚ฌ์šฉํ–ˆ๋‹ค.

  • uncompressed : ๋ชจ๋“  ๊ฒƒ์ด ์žˆ์Œ.
  • minified : ๊ธฐ๋Šฅ์ƒ ๋น ์ง„ ๊ฒƒ์€ ์—†์œผ๋‚˜ ๋ณ€์ˆ˜๋ช…์ด๋‚˜.. ์—ฌ๋Ÿฌ๊ฐ€์ง€๊ฐ€ ์••์ถ•๋˜์–ด ์žˆ์Œ
  • slim : ๋ช‡๊ฐ€์ง€ ๊ธฐ๋Šฅ์ด ๋น ์ง.
  • slim minified : ์Šฌ๋ฆผ์„ ์••์ถ•

2. ๊ธฐ๋ณธ ์‚ฌ์šฉ๋ฒ•

// ์•„๋ž˜ ๋‘ ์ฝ”๋“œ๋Š” ๊ฐ™์€ ์ฝ”๋“œ.
document.getElementById('one').innerText = 'hello jQuery';
$('#one').text ('hello jQuery');
// tag๋กœ ์žก๊ธฐ.
$('p').hide(); // display : none
// html, css ๊ฑด๋“œ๋ฆฌ๊ธฐ
$('.์‹ค์Šต').html('<strong>์‹ค์Šต</strong> ์ค‘ ์ด์—์š”!');
$('.์‹ค์Šต').css('color', 'red');
$('.์‹ค์Šต').css('backgroundColor', 'blue');
$('img').attr('src', 'a.jpg');

3. filter

//filter - index๊ฐ€ 0๋ถ€ํ„ฐ ์‹œ์ž‘.
eq // equal ( = )
ne // not equal ( <> )
lt // little ( < )
le // little or equal ( <= )
gt // greater ( > ) 
ge // greater or equal ( >= )
// ์‚ฌ์šฉ ์˜ˆ์‹œ. 2๋ณด๋‹ค ํฐ ์ž์‹๋“ค๋งŒ yellow
$("li:gt(2)").css( "backgroundColor", "yellow");
// ์†์„ฑ filter
:attributeContains // input[name*='manโ€™]
:attributeEquals // input[name='newsletterโ€™]
// ์ž์‹
:first-child, :last-child
:nth-child(2)
:nth-child(even), :nth-child(odd)
:nth-child(3n)
// ์ปจํ…์ธ  ํ•„ํ„ฐ
:contains(text)
:empty
:has(selector)
$("name").val(); // ์†์„ฑ๊ฐ’ ์ฝ์–ด์˜ค๊ธฐ
("name").val();  // ์†์„ฑ๊ฐ’ ์“ฐ๊ธฐ, text, html
$("span").parent();
$("div").children();
$("div").first();
$("div").last();
// append prepend ์ž์‹ ์•ž ๋’ค์— ์ถ”๊ฐ€
// ๋งŒ์•ฝ ๋ฐ”๋‹๋ผ์˜€๋‹ค๋ฉด..? ์ˆœํšŒํ•˜๋ฉด์„œ.. ์ถ”๊ฐ€....
$("ul").prepend("<li>Some appended text.</li>");
$("ul").append("<li>Some appended text.</li>");
// ul ์˜ ์•ž ๋’ค๋กœ.
$("ul").before("<h2>์‹œ์ž‘</h2>");
$("ul").after("<h2>๋</h2>");
$(".div1").remove(); // ์‚ญ์ œ
// class๋ฅผ ํŽธ์ง‘ํ•  ์ˆ˜ ์žˆ๋‹ค.
$("div").addClass("important");
$("h1,h2,p").removeClass("blue");
$("h1,h2,p").toggleClass("blue");
$("p").css("background-color");
$("p").css("background-color","yellow");
// ๊ธฐํƒ€ ํšจ๊ณผ
$("p").hide();
$("p").show();
$("p"),toggle();
$("#div1").fadeIn();
$("#div1").fadeOut();
$("#div1").fadeToggle();
$("#div3").fadeIn(3000);

4. event

// ๋ฉ”๋ชจ์žฅ ๋‚ด์šฉ ๊ฐ€์ ธ์˜ค๊ธฐ.
<textarea name="๋ฉ”๋ชจ์žฅ" id="๋ฉ”๋ชจ์žฅ" cols="30" rows="10"></textarea>
<button class="btn2">๋ฉ”๋ชจ์žฅ ๋‚ด์šฉ ๊ฒฝ๊ณ ์ฐฝ์œผ๋กœ ์ถœ๋ ฅ</button>
<script>
$('.btn2').click(function () {
  let note = $('#๋ฉ”๋ชจ์žฅ').val();
  alert(note);
});
</script>
// animation : hover ๊ฐ™์€ Event ๋„ ๊ฐ€๋Šฅ.
// mouseenter, mouseleave .. ์ด๋Ÿฐ๊ฑด ์ฐพ์•„๋ณด๊ณ  ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค.
$('.btn3').click(function() {
    $('.box2').animate({
        width: '300px',
        height: '300px',
        opacity: 1
    }, 'slow')
});

5. ํ”Œ๋Ÿฌ๊ทธ์ธ

  • jQuery UI (progressbar, selectmenu, etc)
  • jQuery validation (์œ ํšจ์„ฑ ๊ฒ€์‚ฌ)
  • jQuery lightbox (๋ชจ๋‹ฌ ์ฐฝ์ฒ˜๋Ÿผ ๋งŒ๋“ค์–ด์คŒ)
  • Bootstrap
  • etc



3. ajax

๋ฐฉ๋ฒ•

  • jQuery์˜ ajax, axios(axios ๋Š” node, react ์—์„œ ๋งŽ์ด ์‚ฌ์šฉ)
  • fetch
  • XMLHttpRequest

github์— json ์˜ฌ๋ ค๋‘๊ณ  ๋ฐ›์•„์™€์„œ ๋งˆ์น˜ ์„œ๋ฒ„์™€ ํ†ต์‹ ์„ ํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ํ•˜๋Š” ์‹ค์Šต์„ ์ง„ํ–‰ํ–ˆ๋‹ค.

// ๋ฒ„ํŠผ์„ ํด๋ฆญํ–ˆ์„ ๋•Œ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ.
$('#btn_data').click(function() {
    //$.ajax({๊ฒฝ๋กœ, ๋™๊ธฐํ™” ์—ฌ๋ถ€, ์„ฑ๊ณตํ•˜๋ฉด ํ•  ์ผ})
    $.ajax({
        url:'์ฃผ์†Œ', 
        async: true,
        dataType: 'JSON',
        success: function(result){
            // $("#data").text(result);
            loaddata = result;
        }
    });
});
// http method ํ˜•ํƒœ๋กœ ์ž˜ ๋ณด์—ฌ์ค€๋‹ค.
axios.get(url).then((response) => { console.log(response) })




2. ์ž‘์€ ํšŒ๊ณ 

  • jQuery ์— ๋Œ€ํ•ด์„œ ๊ณต๋ถ€ํ–ˆ๋‹ค. ๋ฐฐ์šฐ๊ณ  ๋Š๋‚€์ ! ๋„ˆ๋ฌด ํŽธํ•˜๋‹ค!!! ๊ทผ๋ฐ ๋‚˜๋Š” ์—ญ์‹œ ์ •์„์ ์ธ ๋ฐฉ๋ฒ•์ด ์ข‹๋‹ค. ๋ฐ”๋‹๋ผ ๊ตฟ~
  • ajax ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ์— ๋Œ€ํ•ด์„œ ๊ณต๋ถ€ํ–ˆ๋‹ค.
  • swift ์—์„œ ๋น„๋™๊ธฐ์™€ closure... ์— ๋Œ€ํ•ด ๋จธ๋ฆฌ ์ฉํ˜”๋Š”๋ฐ closure๋„ ํ•จ์ˆ˜์ธ๊ฑธ ์ƒ๊ฐํ•˜๋ฉด ajax๋ฅผ ์ž˜ ์•Œ๋ฉด ํ•œ๋ฒˆ์—!! ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™๋‹ค.




์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ