[TIL๐Ÿ”ฅ] Day15(8/26)

dasssseulยท2021๋…„ 8์›” 27์ผ
1

Today I Learned

๋ชฉ๋ก ๋ณด๊ธฐ
15/22
post-thumbnail

Introduction

์˜ค๋Š˜์€ ์ž๋™ ์™„์„ฑ ํŽธ์ง‘๊ธฐ ๊ตฌํ˜„ ๊ฐ•์˜๋ฅผ ๋“ค์—ˆ๋‹ค. ๋กœํ† ๋‹˜๊ป˜์„œ ์‚ฌ์šฉ์ž๋ฅผ ์œ„ํ•œ ์›นํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ ์—ฌ๋Ÿฌ ๋ฐฉ๋ฒ•๋“ค์„ ์•Œ๋ ค์ฃผ์…จ๊ณ , ๊ทธ๊ฒƒ๋“ค์ด ๋งค์šฐ ํฅ๋ฏธ๋กœ์› ๋‹ค...๊ฐœ๋…๋งŒ ์ ‘ํ•˜๊ณ  ์•„์ง ์™„๋ฒฝํžˆ ๊ตฌํ˜„ํ•˜์ง„๋ชปํ•˜์ง€๋งŒ, ๋…ธ์…˜ ํด๋ก  ํ”„๋กœ์ ํŠธ๋ฅผ ํ†ตํ•ด ์—ด์‹ฌํžˆ ์—ฐ์Šตํ•ด๋ด์•ผ๊ฒ ๋‹ค.
์‚ฌ์šฉ์ž ์ž…์žฅ์—์„œ ์ƒ๊ฐํ•˜๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๋ ค๋ฉด ์–ด๋–ป๊ฒŒ ํ•ด์•ผํ•˜๋Š”์ง€๊ฐ€ ๊ตฌ์ฒดํ™”๋œ ๋Š๋‚Œ์ด๋ผ ๊ธฐ๋ถ„์ด ์ข‹์•˜๋‹ค.
๋ฐ๋ธŒ์ฝ”์Šค๋ฅผ ํ•˜๋ฉด์„œ ๊ฐ€์žฅ ์ข‹์€์ ์€ ํ˜ผ์ž๋Š” ๋ง‰์—ฐํ–ˆ๋˜ ๊ณต๋ถ€ ๋ฐฉํ–ฅ ๋“ฑ์ด ์ด์ œ๋Š” ์–ด๋–ค ๋ฐฉํ–ฅ์œผ๋กœ ๊ณต๋ถ€ํ•ด์•ผํ• ์ง€ ํ™•์‹คํžˆ ์•Œ๊ฒ ๊ณ , ๋ฉ˜ํ† ๋‹˜๊ณผ ์ข‹์€ ๋™๋ฃŒ๋“ค ๋•๋ถ„์— ํž˜์ด ๋‚œ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค~๐Ÿฅณ


์˜ค๋Š˜ ์ƒˆ๋กญ๊ฒŒ ๋ฐฐ์šด ๊ฒƒ

1. ์ด๋ฒคํŠธ ์œ„์ž„(Event Delegation)
2. ๋‚™๊ด€์  ์—…๋ฐ์ดํŠธ
3. ๋””๋ฐ”์šด์Šค(Debounce)

์˜ค๋Š˜์€ ํ•˜๋‚˜์˜ ์ฃผ์ œ๋ฅผ ์ •ํ•˜์ง€์•Š๊ณ , ๊ฐ ์šฉ์–ด์— ๋Œ€ํ•ด ๊ฐ„๋‹จํžˆ ์ •๋ฆฌํ•ด๋ณด๊ณ ์ž ํ•œ๋‹ค.


1. ์ด๋ฒคํŠธ ์œ„์ž„(Event Delegation)

์ด๋ฒคํŠธ ์œ„์ž„์„ ์ดํ•ดํ•˜๋ ค๋ฉด ๋จผ์ € ์ด๋ฒคํŠธ ์บก์ฒ˜๋ง๊ณผ ๋ฒ„๋ธ”๋ง์— ๋Œ€ํ•ด ์•Œ์•„์•ผํ•œ๋‹ค. ์œ„์˜ ๋งํฌ์— ์ž์„ธํžˆ ์„ค๋ช…๋˜์–ด์žˆ๋‹ค.

์ด๋ฒคํŠธ ์œ„์ž„์ด๋ž€?

์ด๋ฒคํŠธ ์บก์ฒ˜๋ง๊ณผ ๋ฒ„๋ธ”๋ง์„ ํ™œ์šฉํ•˜์—ฌ ์š”์†Œ์˜ ๊ณตํ†ต ์กฐ์ƒ์— ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ๋ฅผ ๋‹จ ํ•˜๋‚˜๋งŒ ํ• ๋‹นํ•ด ์—ฌ๋Ÿฌ ์š”์†Œ๋ฅผ ํ•œ๊บผ๋ฒˆ์— ๋‹ค๋ฃจ๋Š” ๋ฐฉ๋ฒ•

์ด๋ฒคํŠธ ์œ„์ž„์„ ์‚ฌ์šฉํ•˜์ง€์•Š๋Š”๋‹ค๋ฉด

$todoItems.forEach($item => {
  $item.addEventListener('click', e => {
  	// ์ด๋ฒคํŠธ ๋‚ด์šฉ
  })
}

์ด๋ฒคํŠธ ์œ„์ž„์—†์ด ์œ„์™€ ๊ฐ™์ด forEach๋ฌธ์„ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ์—๋Š”
๋ช‡๊ฐ€์ง€ ๋ฌธ์ œ์ ์ด ์กด์žฌํ•œ๋‹ค.

  • ์ƒˆ๋กœ ์ถ”๊ฐ€๋˜๋Š”(๋™์ ์œผ๋กœ ๋“ฑ๋ก๋˜๋Š”) ์š”์†Œ์—๋Š” ์ด๋ฒคํŠธ๊ฐ€ ์ ์šฉ๋˜์ง€ ์•Š๋Š”๋‹ค.
  • ์š”์†Œ๊ฐ€ ๋งŽ์•„์งˆ๊ฒฝ์šฐ, ๋ชจ๋“  ์š”์†Œ์— ์ด๋ฒคํŠธ๋ฅผ ๊ฑธ์–ด ๋ฉ”๋ชจ๋ฆฌ ์‚ฌ์šฉ๋Ÿ‰์ด ๋งŽ์•„์ง€๊ณ  ๋ˆ„์ˆ˜๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋‹ค.

์ด๋ฒคํŠธ ์œ„์ž„์„ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด

$todoList.addEventListener('click', e => {
  const { id } = e.target.dataset;
  console.log(`${id}๊ฐ€ ํด๋ฆญ๋˜์—ˆ์Šต๋‹ˆ๋‹ค!`);
});

์œ„์˜ ์ฝ”๋“œ์ฒ˜๋Ÿผ ์—ฌ๋Ÿฌ todoItem์„ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” todoList(๋ถ€๋ชจ ์š”์†Œ)์— ์ด๋ฒคํŠธ๋ฅผ ๋“ฑ๋กํ•ด์ฃผ๊ณ ,
e.target์„ ์ด์šฉํ•ด ์‹ค์ œ ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•œ ์š”์†Œ๋ฅผ ์ฐพ์•„ ๊ฐ ์š”์†Œ๋“ค์— ๋Œ€ํ•œ ์ด๋ฒคํŠธ ์ œ์–ด๊ฐ€ ๊ฐ€๋Šฅํ•ด์ง„๋‹ค.

์ด๋ฒคํŠธ ์œ„์ž„์„ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด,
๋™์ ์œผ๋กœ ๋“ฑ๋ก๋˜๋Š” ์š”์†Œ์—๋„ ์ด๋ฒคํŠธ๊ฐ€ ์ ์šฉ๋˜๋ฉด, ๋ฉ”๋ชจ๋ฆฌ ์‚ฌ์šฉ๋Ÿ‰ ์—ญ์‹œ ์ค„์ผ ์ˆ˜ ์žˆ๋‹ค.


2. ๋‚™๊ด€์  ์—…๋ฐ์ดํŠธ

๋‚™๊ด€์  ์—…๋ฐ์ดํŠธ๋ž€?

API๋ฅผ ์ด์šฉํ•ด ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์™€ ํ™”๋ฉด์— ๋ Œ๋”๋งํ•  ๊ฒฝ์šฐ ์„œ๋ฒ„์— ๋”ฐ๋ผ ์‚ฌ์šฉ์ž๊ฐ€ ๋Š๋‚„๋งŒํ•œ ์ง€์—ฐ์„ฑ์ด ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋‹ค.

์ด๋•Œ ์„œ๋ฒ„์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›๊ธฐ ์ „์— ์ž…๋ ฅ๋œ ๊ฐ’์„ ๋ฏธ๋ฆฌ ํ™”๋ฉด์— ๋ Œ๋”๋งํ•ด์ฃผ๊ณ ,
์„œ๋ฒ„์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์œผ๋ฉด ๊ทธ ์ตœ์‹  ์ •๋ณด๋กœ ์žฌ๋ Œ๋”๋ง์„ ํ•ด์ฃผ๋Š” ๊ฒƒ์ด ๋ฐ”๋กœ ๋‚™๊ด€์  ์—…๋ฐ์ดํŠธ์ด๋‹ค.

์ฆ‰, ์„œ๋ฒ„์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์˜ฌ ์ˆ˜ ์žˆ์„ ๊ฒƒ์ด๋ผ๋Š” ๋‚™๊ด€์ ์ธ ์ƒ๊ฐ์„ ๊ธฐ๋ฐ˜์œผ๋กœ ์ด๋Ÿฌํ•œ ์ด๋ฆ„์ด ์ง€์–ด์กŒ๋‹ค๊ณ  ๋ณผ ์ˆ˜ ์žˆ๋‹ค. ํ–ฅ์ƒ๋œ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜ ์ œ๊ณต์ด ๊ฐ€๋Šฅํ•˜๋‹ค.


3. ๋””๋ฐ”์šด์Šค(Debounce)

๋””๋ฐ”์šด์Šค๋ž€?

์ด๋ฒคํŠธ๋ฅผ ๊ทธ๋ฃนํ™”ํ•˜์—ฌ ํŠน์ • ์‹œ๊ฐ„์ด ์ง€๋‚œ ํ›„ ํ•˜๋‚˜์˜ ์ด๋ฒคํŠธ๋งŒ ๋ฐœ์ƒํ•˜๋„๋ก ํ•˜๋Š” ๋ฐฉ๋ฒ•

์—ฐ์ด์–ด ํ˜ธ์ถœ๋˜๋Š” ์ด๋ฒคํŠธ๋“ค ์ค‘ ๋งˆ์ง€๋ง‰ ์ด๋ฒคํŠธ๋งŒ ํ˜ธ์ถœํ•˜๋„๋ก ํ•˜๋Š” ๋ฐฉ๋ฒ•

๋…ธ์…˜๊ณผ ๊ฐ™์€ ์ž๋™ ์ €์žฅ ํŽธ์ง‘๊ธฐ๋ฅผ ์˜ˆ๋กœ ๋“ค์ž๋ฉด, ์‚ฌ์šฉ์ž๊ฐ€ ๊ธ€์ž๋ฅผ ์—ฐ์†์ ์œผ๋กœ ์ž…๋ ฅํ•œ๋‹ค๋ฉด ์ €์žฅํ•˜์ง€์•Š๊ณ ,
์—ฐ์†์ ์œผ๋กœ ์ž…๋ ฅํ•˜๋‹ค๊ฐ€ ์ž…๋ ฅ์„ ๋ช‡ ์ดˆ๊ฐ„ ๋ฉˆ์ถ˜๋‹ค๋ฉด ๊ทธ๋•Œ ์ €์žฅ ์ด๋ฒคํŠธ๋ฅผ ๋ฐœ์ƒ์‹œํ‚ค๋Š” ๋ฐฉ์‹์ด๋ผ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.
์ด๋Š” ๋ถˆํ•„์š”ํ•œ ์ž์› ๋‚ญ๋น„์™€ ์ด๋ฒคํŠธ ๋ฐœ์ƒ ํšŸ์ˆ˜๋ฅผ ์ค„์—ฌ์ค€๋‹ค.


Comment

ํ•ด์•ผํ•  ์ผ์€ ๋งŽ์ง€๋งŒ ๋ฌด์–ธ๊ฐ€๋ฅผ ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์— ๊ทธ๋ฆฌ๊ณ  ์ข‹์€ ๋ฐฉํ–ฅ์œผ๋กœ ๋‚˜์•„๊ฐ€๊ณ ์žˆ๋‹ค๋Š” ๊ฒƒ์— ๊ฐ์‚ฌํ•˜๋‹ค.
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ฐฐ์šฐ๋ฉด ๋ฐฐ์šธ์ˆ˜๋ก ์žฌ๋ฏธ์žˆ๊ณ  ์‹ ๊ธฐํ•˜๋‹ค.
์ •๋ง ์–ธ์  ๊ฐ€ ๊ณ ๊ฐ์„ ์œ„ํ•œ ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“ค๊ณ  ์žˆ์„ ๋‚˜๋ฅผ ์ƒ์ƒํ•˜๋ฉฐ ๊ณ„์†ํ•ด์„œ ์—ด์ •์„ ๋ถˆํƒœ์šฐ๊ณ ์žํ•œ๋‹ค.
๋‚˜์˜ ๋‡Œ์•ผ, ์ฒด๋ ฅ์•„, ์†๋ชฉ์•„, ๋ˆˆ์•„ ๋ฒ„ํ…จ์ค˜ ์ œ๋ฐœ~~~๐Ÿ”ฅ

profile
์ธ์ƒ์€ ์šฉ๊ธฐ์˜ ์–‘์— ๋”ฐ๋ผ ์ค„์–ด๋“ค๊ฑฐ๋‚˜, ๋Š˜์–ด๋‚œ๋‹ค

0๊ฐœ์˜ ๋Œ“๊ธ€