[Javascript 30] Day 17~18

1703979Β·2021λ…„ 3μ›” 23일
0

Javascript 30

λͺ©λ‘ 보기
15/15
post-thumbnail

Javascript 30 Day 17~18

λ‹€λ₯Έ Day에 λΉ„ν•˜λ©΄ μ „λ°˜μ μœΌλ‘œ κ°„λ‹¨ν–ˆμ§€λ§Œ μ •κ·œ ν‘œν˜„μ‹κ³Ό Array λ©”μ†Œλ“œλ“€μ˜ ν™œμš©μ„ μ—°μŠ΅ν•΄ λ³Ό 수 μžˆμ—ˆλ˜ κ³Όμ œλ“€μ΄μ—ˆλ‹€. λ‚΄μš©μ΄ 짧아 Day 17κ³Ό Day 18μ—μ„œ 배운 것을 ν•œ λ²ˆμ— μž‘μ„±ν•œλ‹€.

TIL

🎈 17. μ •κ·œ ν‘œν˜„μ‹

  const bands = [
    "The Plot in You",
    "The Devil Wears Prada",
    "Pierce the Veil",
    "Norma Jean",
    "The Bled",
    "Say Anything",
    "The Midway State",
    "We Came as Romans",
    "Counterparts",
    "Oh, Sleeper",
    "A Skylit Drive",
    "Anywhere But Here",
    "An Old Dog",
  ];

// λ°°μ—΄ bandsμ—μ„œ 관사 a, the, an을 μ‚­μ œν•˜κ³ μž 함
  function removeArticles(bandName) {
    return bandName.replace(/^(a |the |an )/i, "").trim();
  }
  const removedBands = bands.map((band) => removeArticles(band));
  console.log(removedBands);

  /* 0: "Plot in You"
  1: "Devil Wears Prada"
  2: "Pierce the Veil"
  3: "Norma Jean"
  4: "Bled"
  5: "Say Anything"
  6: "Midway State"
  7: "We Came as Romans"
  8: "Counterparts"
  9: "Oh, Sleeper"
  10: "Skylit Drive"
  11: "Anywhere But Here"
  12: "Old Dog" */

관사λ₯Ό μ‚­μ œν•˜κ³ μž λ§Œλ“  ν•¨μˆ˜ removeArticlesμ—μ„œ a, the, anμ΄λΌλŠ” 관사λ₯Ό array.replace()λ₯Ό 톡해 μ‚­μ œν–ˆλ‹€. μ΄λ•Œ 관사λ₯Ό μ„ νƒν•˜λŠ”λ° μ‚¬μš©λœ

/^(a |the |an )/i

이 μ •μ²΄λΆˆλͺ…μ˜ λ¬Έμžλ“€μ„ μ •κ·œ ν‘œν˜„μ‹μ΄λΌκ³  ν•œλ‹€.

μ •κ·œ ν‘œν˜„μ‹(μ •κ·œμ‹)

μ •κ·œ ν‘œν˜„μ‹μ€ λ¬Έμžμ—΄μ— λ‚˜νƒ€λŠ” νŠΉμ • 문자 μ‘°ν•©κ³Ό λŒ€μ‘μ‹œν‚€κΈ° μœ„ν•΄ μ‚¬μš©λ˜λŠ” νŒ¨ν„΄μž…λ‹ˆλ‹€. μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ, μ •κ·œ ν‘œν˜„μ‹ λ˜ν•œ κ°μ²΄μž…λ‹ˆλ‹€.

  • RegExp의 exec λ©”μ†Œλ“œ, test λ©”μ†Œλ“œ
  • String의 match λ©”μ†Œλ“œ, replace λ©”μ†Œλ“œ, search λ©”μ†Œλ“œ, split λ©”μ†Œλ“œ

와 ν•¨κ»˜ μ“°μž…λ‹ˆλ‹€. MDN

μ •κ·œ ν‘œν˜„μ‹μ„ λ§Œλ“œλŠ” 방법은 두 가지가 μžˆλŠ”λ°, μš°λ¦¬κ°€ μ‚¬μš©ν•œ 것은 μ •κ·œμ‹ λ¦¬ν„°λŸ΄ 방식이닀.

  • μ •κ·œμ‹ λ¦¬ν„°λŸ΄
    μŠ¬λž˜μ‰¬ (/)둜 감싼닀. ex) const test = /ab+c/;

  • RegExp μƒμ„±μž ν•¨μˆ˜ 호좜
    ex) const test = new RegExp("ab+c");

μ •κ·œ ν‘œν˜„μ‹μ—μ„œμ˜ νŠΉμˆ˜λ¬ΈμžλŠ” 각각의 κ·œμΉ™λ“€μ„ λ§Œμ‘±ν•˜λŠ” λ¬Έμžμ—΄μ„ μ°ΎκΈ° μœ„ν•΄ μ‚¬μš©λœλ‹€. MDN λ¬Έμ„œλ₯Ό 보면 μ’…λ₯˜κ°€ ꡉμž₯히 λ§Žμ€λ°, Day 17μ—μ„œ μ‚¬μš©ν•œ κ²ƒλ“€λ§Œ μ§šμ–΄λ³΄λ©΄ λ‹€μŒκ³Ό κ°™λ‹€.

/^(a |the |an )/i
  • ^ : μž…λ ₯의 μ‹œμž‘μ„ μ˜λ―Έν•œλ‹€. 예λ₯Όλ“€μ–΄, /^a/λŠ” "a name"의 aμ™€λŠ” λŒ€μ‘ν•˜μ§€λ§Œ "name"의 aμ™€λŠ” λŒ€μ‘ν•˜μ§€ μ•ŠλŠ”λ‹€.
  • x|y : x λ˜λŠ” yλ₯Ό μ˜λ―Έν•œλ‹€.
  • i : μ†Œλ¬Έμžμ™€ λŒ€λ¬Έμžλ₯Ό κ΅¬λΆ„ν•˜μ§€ μ•ŠμŒμ„ μ˜λ―Έν•œλ‹€.

μ΄λ ‡κ²Œ μ •κ·œ ν‘œν˜„μ‹μœΌλ‘œ ν‘œν˜„ν•œ λ¬Έμžμ—΄μ— ν•΄λ‹Ήν•˜λŠ” 것을 μ°Ύμ•„ array.replace()둜 μ‚­μ œν•œλ‹€.

🎈 17. μš”μ†Œ 사이에 ,κ°€ κ°‘νˆ­νŠ€ ν•  λ•Œ

  document.querySelector("#bands").innerHTML = sortedBands
    .map((band) => `<li>${band}</li>`);

μ •λ ¬λœ λ°΄λ“œ 이름을 innerHTMLλ₯Ό 톡해 리슀트둜 μž‘μ„±ν•˜κ³ μž ν•˜λ‹ˆ λ‹€μŒ 이미지와 같이 μ½€λ§ˆκ°€ κ°‘νˆ­νŠ€ν•œ λͺ¨μŠ΅μ„ 확인할 수 μžˆλ‹€.

μ΄λŠ” λ°°μ—΄μ˜ μ•„μ΄ν…œμ„ string으둜 λ°”κΏ€λ•Œ μžλ°”μŠ€ν¬λ¦½νŠΈκ°€ 기본적으둜 toString()을 μ΄μš©ν•˜κΈ° λ•Œλ¬Έμ— λ°œμƒν•˜λŠ” ν˜„μƒμ΄λ‹€. toString()은 valueκ°€ μ½€λ§ˆμ— μ˜ν•΄ λΆ„λ¦¬λœλ‹€. λ‹€μŒκ³Ό 같이 λ°°μ—΄μ˜ λ©”μ†Œλ“œ 쀑 ν•˜λ‚˜μΈ join()을 ν™œμš©ν•˜μ—¬ ν•΄κ²°ν•  수 μžˆλ‹€.

  document.querySelector("#bands").innerHTML = sortedBands
    .map((band) => `<li>${band}</li>`)
    .join("");

✨ 18. Arrayκ°™μ§€λ§Œ Arrayκ°€ μ•„λ‹˜μ— μ£Όμ˜ν•˜μž

    <ul class="videos">
      <li data-time="5:43">Video 1</li>
      <li data-time="2:33">Video 2</li>
      <li data-time="3:45">Video 3</li>
      <li data-time="0:47">Video 4</li>
                    (μ€‘λž΅)
    </ul>

λΉ„λ””μ˜€ λ¦¬μŠ€νŠΈλ“€μ˜ data-time만 μ‚­μ œν•˜κ³ μž μ„ νƒμžλ‘œ data-time듀을 선택해 μ½˜μ†”μ— 좜λ ₯ν•΄λ³΄λ‹ˆ, λ°°μ—΄μ˜ ν˜•νƒœλ‘œ 보여진닀. ν•˜μ§€λ§Œ prototype을 확인해보면 λ‹€μŒκ³Ό 같이 배열이 μ•„λ‹Œ NodeList둜 λœΈμ„ 확인할 수 μžˆλ‹€.

// __proto__: NodeList

κ²°κ΅­ λ°°μ—΄μ²˜λŸΌ λ³΄μ˜€μ§€λ§Œ 배열이 μ•„λ‹ˆλ―€λ‘œ, array λ©”μ†Œλ“œλ“€μ˜ ν™œμš© λ˜ν•œ μ—λŸ¬κ°€ λ°œμƒν•΄ μ‚¬μš©ν•  수 μ—†λ‹€. 해결을 μœ„ν•΄ μ§„μ§œ λ°°μ—΄λ‘œ λ§Œλ“€μ–΄μ€€λ‹€. μ „κ°œκ΅¬λ¬Έμ„ 톡해 λ°°μ—΄μ•ˆμ— λ„£κ±°λ‚˜, λ‹€μŒκ³Ό 같이 array.from()을 μ‚¬μš©ν•œλ‹€.

    const timeNodes = Array.from(document.querySelectorAll("[data-time]"));
    // __proto__: Array(0)
profile
https://emewjin.github.io

0개의 λŒ“κΈ€