[FE - ConnecTo] DAY57 TILπŸ‘©πŸ»β€πŸ’»

JUNYΒ·2022λ…„ 9μ›” 30일
0

πŸ“šZeroBase ConnecTo Front-End

λͺ©λ‘ 보기
45/53
post-thumbnail

22.09.30 μˆ˜μ—… μ‹œκ°„ 쀑 κ³΅λΆ€ν•œ λ‚΄μš©λ“€μ„ μ •λ¦¬ν•˜μ˜€μŠ΅λ‹ˆλ‹€ 😊
ν”Όλ“œλ°±μ€ μ–Έμ œλ‚˜ ν™˜μ˜μž…λ‹ˆλ‹€! 🍊

  • μ›ν•˜λŠ” μœ„μΉ˜μ— link νƒœκ·Έ μ‚½μž…ν•˜κΈ°
// 이전
const $link = document.createElement('link');
$link.setAttribute('rel', 'stylesheet');
const linkList = document.querySelectorAll('link');
linkList[linkList.length - 1].after($link)

// 이후
const $link = `~~`;
document.querySelector('script').insertAdjacentHTML('beforebegin', $link);
  • link νƒœκ·Έλ₯Ό μ›ν•˜λŠ” μœ„μΉ˜μ— μ‚½μž…ν•˜κΈ° μœ„ν•΄μ„œ, insertAdjacentHTML λ§€μ„œλ“œλ₯Ό μ•Œμ§€ λͺ»ν•΄μ„œ, createElement둜 μ‚½μž…μ„ ν•΄μ£Όμ—ˆλ‹€. 그런데, μ½”λ“œ 길이도 길어지고, 가독성도 λ–¨μ–΄μ§€λŠ” 것 κ°™μ•„μ„œ λ¦¬νŒ©ν† λ§ λ•Œ, insertAdjacentHTML λ§€μ„œλ“œλ₯Ό μ‚¬μš©ν•˜μ—¬ μˆ˜μ •ν•˜μ˜€λ‹€.
  • 그런데 λΆ€μˆ˜μ μΈ 문제점으둜 link νƒœκ·Έκ°€ 2κ°œκ°€ μƒμ„±λ˜μ—ˆλŠ”λ°, 이 μ΄μœ λŠ” starRating ν•¨μˆ˜ λ‚΄λΆ€μ—μ„œ DOMContentLoadedκ°€ 될 λ•Œ, μƒμ„±λ˜λ„λ‘ μ„€μ •ν•΄μ£Όμ—ˆκΈ° λ•Œλ¬Έμ—, starRating ν•¨μˆ˜κ°€ 호좜될 λ•Œλ§ˆλ‹€ μƒˆλ‘œ link νƒœκ·Έκ°€ 생성이 λ˜μ—ˆκΈ° λ•Œλ¬Έμ΄λ‹€. κ·Έλž˜μ„œ, λ¦¬νŒ©ν† λ§μ„ ν•˜λ©΄μ„œ, starRating ν•¨μˆ˜ λ°–μ—μ„œ ν˜ΈμΆœν•  수 μžˆλ„λ‘ ν•˜μ—¬, ν•œ 번만 link νƒœκ·Έλ₯Ό μ‚½μž…ν•˜λ„λ‘ μˆ˜μ •ν•˜μ˜€λ‹€.
  • μΆ”κ°€ 고민사항 : insertBefore vs insertAdjacent insertAdjacent λ§€μ„œλ“œλ₯Ό μ‚¬μš©ν–ˆμ„ λ•Œ, link νƒœκ·Έκ°€ 2κ°œκ°€ μƒμ„±λ˜μ–΄μ„œ λ‹€λ₯Έ λ°©λ²•μœΌλ‘œ insertBefore λ§€μ„œλ“œλ₯Ό μ‚¬μš©ν–ˆλ³΄μ•˜λ‹€. insertBefore의 경우, parameter의 첫번째 인자둜 λ…Έλ“œλ₯Ό 데렀와야 ν•˜λŠ”λ°, λ…Έλ“œλ₯Ό 데렀였렀면 λ‹€μ‹œ 이전에 μš°λ¦¬κ°€ μž‘μ„±ν–ˆλ˜ μ½”λ“œμ˜ νλ¦„λŒ€λ‘œ μž‘μ„±ν•΄μ•Όν–ˆκΈ°μ—, λΉ„νš¨μœ¨μ μ΄λΌλŠ” 생각이 λ“€μ—ˆλ‹€. κ·Έλž˜μ„œ κ·Έλ ‡κ²Œ ν•˜μ§€ μ•Šμ•„λ„ λ˜λŠ” insertAdjacent λ§€μ„œλ“œλ₯Ό μ„ νƒν•˜μ—¬ λ¦¬νŒ©ν† λ§μ„ ν•˜μ˜€λ‹€.
// 이전
$stars.forEach((star, i) => star.classList.toggle('hovered', i <= rating));

// 이후
$stars.forEach((star, i) => {
  if (i > rating) return false;
  star.classList.add('hovered');
});
  • μ΄μ „μ—λŠ” forEach문을 돌렀 toggle λ©”μ„œλ“œλ₯Ό μ‚¬μš©ν•˜μ—¬ 별 ν΄λ¦­μ΄λ‚˜ ν˜Έλ²„ν–ˆμ„ κ²½μš°μ— 이전 μš”μ†Œλ“€λΏλ§Œ μ•„λ‹ˆλΌ μ΄ν›„μ˜ μš”μ†Œλ“€λ„ μ‹€ν–‰λ˜λ©° λ°˜λ³΅λ¬Έμ„ μ‹€ν–‰ν•˜μ˜€λ‹€.
    • λ¦¬νŒ©ν† λ§ ν›„μ—λŠ” ꡳ이 μ΄ν›„μ˜ μš”μ†Œλ“€μ€ νŒλ³„ν•  ν•„μš”μ„±μ΄ μ—†μ–΄ λ‚΄κ°€ μ„ νƒν•œ λ³„μ˜ 이전 μš”μ†Œλ“€λ§Œ μˆ˜ν–‰ν•œ ν›„ forEach이 μ’…λ£Œλ˜λ„λ‘ ν•΄μ£Όμ—ˆλ‹€.
  • break이 μ•„λ‹Œ return false λ₯Ό μ‚¬μš©ν•˜μ—¬ forEachλ₯Ό μ’…λ£Œν•  수 μžˆλ‹€λŠ” 것을 μ•Œκ²Œλ˜μ—ˆλ‹€.
profile
μ„±μž₯ν•˜λŠ” 개발자🌼

0개의 λŒ“κΈ€