Zoeeey
Stack flows in you
Zoeeey
  • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (155)
    • ๐Ÿ’ก UXUI (4)
      • UXUI (2)
      • UI (2)
      • UX (0)
    • ๐ŸŸจ JavaScript (66)
      • ๊ฐœ๋… (42)
      • ์ •๋ฆฌ (2)
      • ๋ฌธ์ œํ’€๊ธฐ (ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค, ์ฝ”๋”ฉ์• ํ”Œ) (15)
      • ์‘์šฉํ•˜์—ฌ ์ž๋™ํ™”or๋ฌธ์ œํ•ด๊ฒฐํ•˜๊ธฐ (2)
      • ๊ธฐํƒ€ (5)
    • โš›๏ธ React (49)
      • ๊ฐœ๋… (27)
      • ๊ฐœ๋…(Redux) (3)
      • ์ •๋ฆฌ (4)
      • ๋ฌธ์ œํ’€๊ธฐ (์ฝ”๋”ฉ์• ํ”Œ: React) (15)
    • ๐Ÿ“˜ TypeScript (10)
      • ๊ฐœ๋… (8)
      • ๋ฌธ์ œํ’€๊ธฐ (์ฝ”๋”ฉ์• ํ”Œ) (2)
    • ๐ŸŒ HTML,CSS (18)
      • ์‹ค๋ฌด์—์„œ ์ž์ฃผ ๋ฐœ์ƒํ•œ ์˜ค๋ฅ˜๋“ค (10)
      • ๋’ค๋Šฆ๊ฒŒ ์•Œ์•„์„œ ๋ผˆ์•„ํ”ˆ ์œ ์šฉํ•œ CSS (6)
      • ๊ธฐํƒ€ ์ž์ฃผ ์“ฐ๋Š” CSS (2)
    • ๐Ÿ’ป CS (8)
      • CS (5)
      • ์ •๊ทœํ‘œํ˜„์‹ (2)
      • Git,Github (1)

ํƒœ๊ทธ

  • JavaScript
  • Ajax
  • redux
  • TypeScript
  • object
  • useEffect
  • ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค
  • ์ฝ”๋”ฉ์• ํ”Œ
  • Props
  • ์˜ค๋ฅ˜
  • CS
  • axios
  • UXUI
  • state
  • class
  • CSS
  • json
  • array
  • ์‚ผํ•ญ์—ฐ์‚ฐ์ž
  • react
์ „์ฒด ๋ฐฉ๋ฌธ์ž
์˜ค๋Š˜
์–ด์ œ
hELLO ยท Designed By ์ •์ƒ์šฐ.
Zoeeey

Stack flows in you

๐ŸŸจ JavaScript/๋ฌธ์ œํ’€๊ธฐ (ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค, ์ฝ”๋”ฉ์• ํ”Œ)

[์ค‘์š”] Level 2 : 14,15(์ˆ™์ œ ๋ฐ ๊นจ๋‹ฌ์€ ์ )_for, ๋ฒ„๋ธ”๋งํ™œ์šฉ์ถ•์•ฝ๋ฒ„์ „

2023. 1. 13. 00:32

14. ํƒญ ๋งŒ๋“ค๊ธฐ

let kcnt = 0;
for (let i = 0; i < $('.tab-button').length; i++) {
    alert(kcnt++);
    $('.tab-button').eq(i).on('click', function () {
        $('.tab-button').removeClass('orange');
        $('.tab-button').eq(i).addClass('orange');
        $('.tab-content').removeClass('show');
        $('.tab-content').eq(i).addClass('show');
    })
}

๊นจ๋‹ฌ์€ ์ 

for๋ฌธ์˜ ์ž‘๋™ ์›๋ฆฌ์— ๋Œ€ํ•ด์„œ ์ดํ•ด๊ฐ€ ์ž˜ ๊ฐ€์ง€ ์•Š์•˜๋‹ค.

i๊ฐ€ 0์ด๊ณ , 3๊นŒ์ง€ i++๋กœ ๋Œ์•„๊ฐ€๋Š” ๊ฑฐ๋ฉด i์—๋Š” ์ˆœ์„œ๋Œ€๋กœ 0,1,2 ๋ฐฐ์ •๋˜๋Š” ๊ฒƒ ์•„๋‹Œ๊ฐ€?
์™œ ํด๋ฆญํ•œ ํƒญ์˜ ์ธ๋ฑ์Šค๋ฅผ ์ฐพ์•„์„œ ๊ทธ ์ธ๋ฑ์Šค์— ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋˜๋Š”๊ฑฐ์ง€?

์ฒ˜์Œ์—๋Š” eq๊ฐ€ ๋ฉ”์†Œ๋“œ๋ผ์„œ ๋‚ด๊ฐ€ ๋ˆ„๋ฅธ ํƒญ์˜ ์ธ๋ฑ์Šค๋ฅผ ์ฐพ์•„์ฃผ๋‚˜ ํ–ˆ๋‹ค.

๊ทธ๋Ÿฐ๋ฐ ์ „์—ญ๋ณ€์ˆ˜ kcnt ๋ฅผ ์„ค์ •ํ•ด alert๋ฅผ ๋ฟŒ๋ฆฌ๊ณ  ๋‚˜๋‹ˆ, kcnt alert๊ฐ€ ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์ƒˆ๋กœ๊ณ ์นจํ•œ ์ˆœ๊ฐ„์— 0,1,2๊นŒ์ง€ ๋Œ๊ณ  ๊ทธ ํ›„์—” ํƒญ์„ ํด๋ฆญํ•ด๋„ alert๊ฐ€ ๋œจ์ง€ ์•Š๋Š” ๊ฒƒ์ด์—ˆ๋‹ค!

๋‹ต์€ js๊ฐ€ ์ •์  ์–ธ์–ด์ด๊ธฐ ๋•Œ๋ฌธ์ด์—ˆ๋‹ค.

๋‚ด๊ฐ€ ํด๋ฆญ์„ ํ–ˆ์„ ๋•Œ -> for๋ฌธ์ด ๋งŒ๋“ค์–ด์ ธ ๋„๋Š” ๊ฒŒ ์•„๋‹ˆ๋ผ, ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋กœ๋”ฉ๋œ ์‹œ์ ์—์„œ -> ์ด๋ฏธ i๊ฐ€ length๊นŒ์ง€ ๋Œ์•„์„œ -> for๋ฌธ ์•ˆ์˜ ์ด๋ฒคํŠธ๋ฆฌ์Šค๋„ˆ ํ•จ์ˆ˜ ์•ˆ์˜ i์— ๊ฐ’์ด 0~2๊นŒ์ง€ ๋ฟŒ๋ ค์ ธ์žˆ๊ณ , ๊ทธ๊ฒŒ ํด๋ฆญํ•œ ์‹œ์ ์— ์ฝœ๋ฐฑํ•จ์ˆ˜๋กœ ๋ถˆ๋Ÿฌ์™€์ ธ ์‹คํ–‰๋˜๋Š” ๊ฒƒ์ด์—ˆ๋‹ค.

for๋ฌธ์˜ ์ž‘๋™์›๋ฆฌ์— ๋Œ€ํ•ด ํ™•์‹คํ•˜๊ฒŒ ์งš๊ณ  ๋„˜์–ด๊ฐ„ ๋ณด๋žŒ์ฐฌ ์ˆœ๊ฐ„์ด์—ˆ๋‹ค.


ํ•จ์ˆ˜์ถ•์•ฝ๋ฒ„์ „

for (let i = 0; i < $('.tab-button').length; i++) {
    $('.tab-button').eq(i).on('click', function () {
        openTab(i);
    })
    // $('.tab-button').eq(i).on('click', openTab(i)) //์ด๋ ‡๊ฒŒ ํ•ด๋„ ๋จ.
}

function openTab(i){
    $('.tab-button').removeClass('orange');
    $('.tab-button').eq(i).addClass('orange');
    $('.tab-content').removeClass('show');
    $('.tab-content').eq(i).addClass('show');
}

์ด๋ฒคํŠธ๋ฒ„๋ธ”๋งํ™œ์šฉ๋ฒ„์ „

function openTab(i){
    $('.tab-button').removeClass('orange');
    $('.tab-button').eq(i).addClass('orange');
    $('.tab-content').removeClass('show');
    $('.tab-content').eq(i).addClass('show');
}

//๋ฒ„๋ธ”๋ง์ด ์ผ์–ด๋‚˜๋Š” for๋ฌธ๋ฒ„์ „ 1
$('.list').click(function(e){
    for (let i = 0; i < $('.tab-button').length; i++) {
        if(e.target == document.querySelectorAll('.tab-button')[i]){
            openTab(i);
        } else {e.preventDefault;}
    }
})
//์œ„์™€ ๋˜‘๊ฐ™์ด ๋™์ž‘ํ•˜๋Š” ๋ฒ„๋ธ”๋ง์ด ์ผ์–ด๋‚˜๋Š” for๋ฌธ๋ฒ„์ „ 2
for (let i = 0; i < $('.tab-button').length; i++) {
    $('.list').click(function(e){
        if(e.target == document.querySelectorAll('.tab-button')[i]){
            openTab(i);
        } else {e.preventDefault;}
    })
}
//*****dataset ํ™œ์šฉ ๋ฒ„์ „ (<---๋„ˆ๋ฌดํŽธํ•˜๊ณ )******
$('.list').click(function(e){
    openTab(e.target.dataset.id);
})

๋งˆ์ง€๋ง‰ dataset ํ™œ์šฉ ๋ฒ„์ „์ด ์ฐธ์œผ๋กœ ์งง๊ณ  ํŽธํ•œ ๊ฒŒ ๋ง˜์— ๋“ ๋‹ค.
+ ํฌ๋ฌธ๋ฒ„์ „์ด ์ด๋ฒคํŠธ์•ˆ์— ํฌ๋ฌธ์„๋„ฃ๋“  ํฌ๋ฌธ์•ˆ์— ์ด๋ฒคํŠธ๋ฅผ ๋„ฃ๋“  ๋™์ผํ•˜๊ฒŒ ๋™์ž‘ํ–ˆ๋‹ค..


15. ๋ชจ๋‹ฌ์ฐฝ ๊ฒ€์€๋ฐฐ๊ฒฝ ๋ˆ„๋ฅด๋ฉด ๊บผ์ง€๊ธฐ

์กฐ๊ฑด

ํฐ์ƒ‰ ๋ชจ๋‹ฌ์ฐฝ๋ถ€๋ถ„์€ ๋ˆŒ๋Ÿฌ๋„ ๊บผ์ง€์ง€ ์•Š๊ฒŒ ํ•œ๋‹ค

let btn = document.querySelector('.btn-primary');
let modal = document.querySelector('.black-bg');
let clickEvent = function(e){
    if (e.target == this){ //this๋Š” e.currentTarget์œผ๋กœ๋„ ์“ธ ์ˆ˜ ์žˆ๋‹ค.
        modal.classList.toggle('show');
    } else {e.preventDefault();}
}
btn.addEventListener('click', clickEvent)
modal.addEventListener('click', clickEvent)

๊นจ๋‹ฌ์€ ์ 

์ด๋ฒคํŠธ ๋ฒ„๋ธ”๋ง์€ ์š”์†Œ์— ์ด๋ฒคํŠธ๊ฐ€ ์‹คํ–‰๋˜์—ˆ์„ ๋•Œ ๊ทธ ์š”์†Œ์˜ ์ƒ์œ„์š”์†Œ๊นŒ์ง€ ์ด๋ฒคํŠธ๊ฐ€ ์‹คํ–‰๋˜๋Š” ๊ฒƒ์ด๋‹ค. ์ด๋ฒคํŠธ ๋ฒ„๋ธ”๋ง์€ ํ•ญ์ƒ ์ผ์–ด๋‚˜๊ณ , ๋‹ค์–‘ํ•œ ๊ด€๋ จ ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ข‹๋‹ค.

์ด์— ๊ด€ํ•ด ์ •๋ฆฌํ•œ ๊ธ€ : https://sunshineyellow.tistory.com/92

 

[์ฝ”๋”ฉ์• ํ”Œ,mdn ๋“ฑ] ์ด๋ฒคํŠธ๋ฒ„๋ธ”๋ง๊ณผ ์ด๋ฒคํŠธ์บก์ณ๋ง ๋ฐ ๊ด€๋ จ ์œ ์šฉํ•œ ํ•จ์ˆ˜๋“ค

์ด๋ฒคํŠธ๊ฐ€ DOMํŠธ๋ฆฌ๋ฅผ ํƒ€๊ณ  ๋ฐœ์ƒํ•˜๋Š” ํ๋ฆ„ ์ด๋ฒคํŠธ๋Š” document์—์„œ ์‹œ์ž‘ํ•ด DOM ํŠธ๋ฆฌ๋ฅผ ๋”ฐ๋ผ event.target๊นŒ์ง€ ๋‚ด๋ ค๊ฐ„๋‹ค. ์ด๋ฒคํŠธ๋Š” ํŠธ๋ฆฌ๋ฅผ ๋”ฐ๋ผ ๋‚ด๋ ค๊ฐ€๋ฉด์„œ addEventListener(..., true)๋กœ ํ• ๋‹นํ•œ ํ•ธ๋“ค๋Ÿฌ๋ฅผ ๋™์ž‘์‹œ

sunshineyellow.tistory.com


์ถœ์ฒ˜ : ์ฝ”๋”ฉ์• ํ”Œ https://codingapple.com/

์ €์ž‘์žํ‘œ์‹œ ๋น„์˜๋ฆฌ ๋™์ผ์กฐ๊ฑด (์ƒˆ์ฐฝ์—ด๋ฆผ)

'๐ŸŸจ JavaScript > ๋ฌธ์ œํ’€๊ธฐ (ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค, ์ฝ”๋”ฉ์• ํ”Œ)' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

Level 3 : 4 (array, object, forEach)  (0) 2023.01.31
Level 3 : 1~3 (array, object)  (0) 2023.01.31
Level 2 : 6~13(์ˆ™์ œ ๋ฐ ๊นจ๋‹ฌ์€ ์ )_scroll  (0) 2023.01.12
Level 2 : 1~5 (์ˆ™์ œ ๋ฐ ๊นจ๋‹ฌ์€ ์ )_if๋ฌธ  (0) 2023.01.09
Level 1 : 6~12 (์ˆ™์ œ ๋ฐ ๊นจ๋‹ฌ์€ ์ )  (0) 2023.01.08
    '๐ŸŸจ JavaScript/๋ฌธ์ œํ’€๊ธฐ (ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค, ์ฝ”๋”ฉ์• ํ”Œ)' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
    • Level 3 : 4 (array, object, forEach)
    • Level 3 : 1~3 (array, object)
    • Level 2 : 6~13(์ˆ™์ œ ๋ฐ ๊นจ๋‹ฌ์€ ์ )_scroll
    • Level 2 : 1~5 (์ˆ™์ œ ๋ฐ ๊นจ๋‹ฌ์€ ์ )_if๋ฌธ
    Zoeeey
    Zoeeey
    ๊ธธ๊ฒŒ ์ƒ๊ฐํ•˜๊ณ  ์งง๊ฒŒ ๊ทธ๋ฆฌ๊ธฐ

    ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”