λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°
[개발] Practice/JavaScript jQuery

[JavaScript / jQuery] μ‡Όν•‘λͺ° μƒν’ˆ 진열 및 μƒν’ˆ μ •λ ¬ κΈ°λŠ₯ λ§Œλ“€κΈ°

by Connecting-the-dots 2022. 3. 9.
728x90
λ°˜μ‘ν˜•

πŸ’‘ μ‹€μŠ΅ 포인트!

  • μ˜€λŠ˜μ€ μƒν’ˆ 진열 및 μƒν’ˆ μ •λ ¬ κΈ°λŠ₯을 λ§Œλ“€μ–΄ λ³΄μ•˜λ‹€.
  • μ›λž˜ κ°•μ˜μ—μ„œ κ°•μ‚¬λ‹˜μ΄ μ§„ν–‰ν•œ λ°©μ‹λŒ€λ‘œλ„ ν•΄λ³Έ ν›„, "이런 λ°©μ‹μœΌλ‘œ ν•˜λ©΄ μ½”λ“œλ₯Ό μ’€ 더 쀄일 수 μžˆμ„κΉŒ" λΌλŠ” μƒκ°μœΌλ‘œ μƒˆλ‘œμš΄ λ°©μ‹μœΌλ‘œ μ§„ν–‰ν•΄λ³΄μ•˜λ‹€. (아직 λ°°μš°λŠ” 과정이라.. 뭐가 더 λ‚˜μ€ λ°©μ‹μΈμ§€λŠ” λͺ¨λ₯΄κ² κ³  κ³ λ―Όν•΄λ΄€λ‹€λŠ” 데에 의의λ₯Ό λ‘”λ‹€ γ…Žγ…Ž) 
  • μš°μ„  μƒν’ˆ μ§„μ—΄μ˜ 경우, html νŒŒμΌμ— λ ˆμ΄μ•„μ›ƒμ„ ν•˜λ“œμ½”λ”©μ„ 해놓고 forEach ν•¨μˆ˜λ₯Ό μ‚¬μš©ν•˜μ—¬ 데이터바인딩 ν›„, 진열 κΈ°λŠ₯을 λ§Œλ“€μ–΄λ‚˜κ°€λ©΄μ„œ ν•˜λ“œμ½”λ”©ν•œ 뢀뢄을 μ§€μ›Œλ‚˜κ°”λ‹€.
  • κ·Έ λ‹€μŒ 자주 μ‚¬μš©λ˜λŠ” JavaScript 문법인 sort, filter λ₯Ό μ‚¬μš©ν•˜μ—¬ κ°€λ‚˜λ‹€μˆœ μ •λ ¬, κ°€κ²©μˆœ μ •λ ¬,  6λ§Œμ› μ΄ν•˜ 보기(ν•„ν„°) κΈ°λŠ₯을 λ„£μ–΄λ³΄μ•˜λ‹€. 
  • λ§ˆμ§€λ§‰μœΌλ‘œ μ²«ν™”λ©΄μœΌλ‘œ λ˜λŒλ¦¬λŠ” μ›λž˜λŒ€λ‘œ κΈ°λŠ₯을 μΆ”κ°€ν–ˆλ‹€.
  • μΆ”ν›„μ—λŠ” μ‚¬μš©μžκ°€ μ›ν•˜λŠ” κ°€κ²©λŒ€λ₯Ό μž…λ ₯ν•˜λ©΄ 거기에 맞좰 ν•„ν„°λ§λ˜λ„λ‘ κ΅¬ν˜„ν•΄λ΄μ•Όκ² λ‹€.

πŸ’œ μƒν’ˆ 진열

🀍 μ΄ˆλ°˜ JavaScript

// μƒν’ˆ 데이터
var products = [
    { id : 0, price : 70000, title : 'Blossom Dress' },
    { id : 1, price : 50000, title : 'Springfield Shirt' },
    { id : 2, price : 60000, title : 'Black Monastery' }
]
  • 데이터 바인딩을 ν•΄μ•Όν•˜λŠ” 데이터 μžλ£Œμ΄λ‹€.

🀍 초반 HTML

<div class="card-group container">
  <div class="card">
    <img src="https://via.placeholder.com/600">
    <div class="card-body">
      <h5>Card title</h5>
      <p>가격 : 70000</p>
      <button class="btn btn-danger">μ£Όλ¬Έν•˜κΈ°</button>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/600">
    <div class="card-body">
      <h5>Card title</h5>
      <p>가격 : 70000</p>
      <button class="btn btn-danger">μ£Όλ¬Έν•˜κΈ°</button>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/600">
    <div class="card-body">
      <h5>Card title</h5>
      <p>가격 : 70000</p>
      <button class="btn btn-danger">μ£Όλ¬Έν•˜κΈ°</button>
    </div>
  </div>
    <div class="container">
        <button class="btn btn-danger mt-3" id="sortAbc">κ°€λ‚˜λ‹€μˆœ μ •λ ¬</button>
        <button class="btn btn-danger mt-3" id="sortPrice">κ°€κ²©μˆœ μ •λ ¬</button>
        <button class="btn btn-danger mt-3" id="filterPrice">6λ§Œμ› μ΄ν•˜ 보기</button>
        <button class="btn btn-danger mt-3" id="revert">μ›λž˜λŒ€λ‘œ</button>
    </div>
</div>
  • 처음의 ν•˜λ“œμ½”λ”©λœ html νŒŒμΌμ„ 보면 μ•Œ 수 μžˆλ“―μ΄ card ν΄λž˜μŠ€κ°€ μƒν’ˆμ˜ 개수만큼 λ°˜λ³΅λ˜λŠ” ν˜•νƒœλ₯Ό 띄고 μžˆλ‹€.
  • λ”°λΌμ„œ, card 클래슀λ₯Ό ν…œν”Œλ¦Ών™”ν•œ ν›„ ν•„μš”ν•œ 데이터λ₯Ό λ„£μ–΄μ„œ card-group container ν΄λž˜μŠ€μ— λΆ™μ—¬μ£Όλ©΄ 될 것 κ°™μ•˜λ‹€.
  • κ·Έλ ‡κ²Œ μƒν’ˆ 개수만큼 λ§Œλ“€λ©΄ μΉ΄λ“œ λ ˆμ΄μ•„μ›ƒ λ§Œλ“€κΈ° 끝!

🀍 ν›„λ°˜ JavaScript

// ν•¨μˆ˜λ‘œ λ°”κΎΈκΈ° μ „
products.forEach(item => {
  let template = `
  <div class="card">
    <img src="https://via.placeholder.com/600">
    <div class="card-body">
      <h5 class="title">${item.title}</h5>
      <p class="price">가격 : ${item.price}</p>
      <button class="btn btn-danger">μ£Όλ¬Έν•˜κΈ°</button>
    </div>
  </div>
  `
  $('#items').append(template);
});

// ν•¨μˆ˜λ‘œ λ°”κΎΌ ν›„
function layout(items){
  items.forEach(item => {
    let template = `
    <div class="card">
      <img src="https://via.placeholder.com/600">
      <div class="card-body">
        <h5 class="title">${item.title}</h5>
        <p class="price">가격 : ${item.price}</p>
        <button class="btn btn-danger">μ£Όλ¬Έν•˜κΈ°</button>
      </div>
    </div>
    `
    $('#items').append(template);
  });
}
  • 일단 μƒμ„±ν•΄μ•Όν•˜λŠ” card ν΄λž˜μŠ€κ°€ ν•˜λ‚˜λΌκ³  생각을 ν•΄λ³΄μž.
    • card 클래슀 λ‚΄μš© 전체λ₯Ό template μ΄λΌλŠ” λ³€μˆ˜μ— λ‹΄κ³ , κ·Έ λ³€μˆ˜λ₯Ό card-group container ν΄λž˜μŠ€μ— append ν•΄μ£Όλ©΄ λœλ‹€. (νŽΈμ˜μƒ card-group container 클래슀 λŒ€μ‹  items λΌλŠ” id λ₯Ό μΆ”κ°€ν•˜μ—¬ μ‚¬μš©ν•˜μ˜€λ‹€.)
  • κ·Έλ ‡λ‹€λ©΄ μƒμ„±ν•΄μ•Όν•˜λŠ” card ν΄λž˜μŠ€κ°€ μ—¬λŸ¬ 개, 즉 데이터 개수만큼이라면? for λ¬Έμ΄λ‚˜ forEach λ¬Έ 등을 μ΄μš©ν•˜λ©΄ λœλ‹€.
    • λ‚˜λŠ” forEach 문을 μ‚¬μš©ν–ˆλ‹€. 데이터 바인딩이 ν•„μš”ν•œ products λ°°μ—΄ λ‚΄μ˜ μžλ£Œλ“€μ„ item μ΄λΌλŠ” νŒŒλΌλ―Έν„°λ‘œ λ°›μ•„ ν•˜λ‚˜μ”© λŒλ©΄μ„œ, 타이틀이 λ“€μ–΄κ°ˆ λΆ€λΆ„κ³Ό 가격이 λ“€μ–΄κ°ˆ 뢀뢄에 λ°”μΈλ”©ν•΄μ£Όλ©΄μ„œ λ ˆμ΄μ•„μ›ƒμ„ 생성할 수 있게 ν•΄μ£Όμ—ˆλ‹€.
  • μ²˜μŒμ—λŠ” ν•¨μˆ˜λ‘œ λ§Œλ“€ 생각은 μ—†μ—ˆλŠ”λ°.. μ •λ ¬ κΈ°λŠ₯μ΄λ‚˜ ν•„ν„° κΈ°λŠ₯을 μΆ”κ°€ν•˜λ©΄μ„œ 계속 λ ˆμ΄μ•„μ›ƒμ„ λ™μΌν•˜κ²Œ μ μš©ν•΄μ•Ό ν•˜λŠ” 일이 λ°œμƒν–ˆλ‹€.
    • λ°˜λ³΅ν•΄μ„œ 써야 ν•œλ‹€λ©΄ κΉ”λ”ν•˜κ²Œ ν•¨μˆ˜λ‘œ λ§Œλ“œλŠ” 게 낫지 μ•Šμ„κΉŒ ν•΄μ„œ layout μ΄λΌλŠ” 이름을 λΆ™μ—¬ ν•¨μˆ˜λ‘œ λ§Œλ“€μ–΄λ³΄μ•˜λ‹€.
    • layout ν•¨μˆ˜μ˜ νŒŒλΌλ―Έν„°λŠ” products 둜 ν•˜λ©΄ 괜히 λ‚΄κ°€ ν—·κ°ˆλ¦΄ 것 κ°™μ•„μ„œ items 둜 ν–ˆλ‹€.
  • μ—¬κΈ°κΉŒμ§€ μ™„μ„±ν•œ ν›„ ν•˜λ“œμ½”λ”©ν–ˆλ˜ 뢀뢄듀을 λͺ¨λ‘ μ§€μ›Œμ£Όμ—ˆλ‹€. 그러면 첫화면에 λ²„νŠΌλ“€λ§Œ λœ¬λ‹€.
    • ν•¨μˆ˜λ‘œ λ°”κΎΈκΈ° μ „μ—λŠ” λ°”λ‘œ λ ˆμ΄μ•„μ›ƒμ΄ λœ¨μ§€λ§Œ, ν•¨μˆ˜λ‘œ λ°”κΎΈμ–΄μ£Όμ—ˆκΈ° λ•Œλ¬Έμ— ν•¨μˆ˜λ₯Ό μ‹€ν–‰ν•΄μ•Ό λ ˆμ΄μ•„μ›ƒμ΄ μ œλŒ€λ‘œ μ μš©λœλ‹€. 
    • κ·ΈλŸ¬λ―€λ‘œ μ΄ˆκΈ°ν™”λ©΄μ΄λΌλŠ” 주석을 달고 layout(products); λΌκ³  μ½”λ“œλ₯Ό λ„£μ–΄μ£Όμ—ˆλ‹€.

🀍 ν›„λ°˜ HTML

<div class="container">
    <div class="card-group container" id="items"></div>
    <div class="container">
        <button class="btn btn-danger mt-3" id="sortAbc">κ°€λ‚˜λ‹€μˆœ μ •λ ¬</button>
        <button class="btn btn-danger mt-3" id="sortPrice">κ°€κ²©μˆœ μ •λ ¬</button>
        <button class="btn btn-danger mt-3" id="filterPrice">6λ§Œμ› μ΄ν•˜ 보기</button>
        <button class="btn btn-danger mt-3" id="revert">μ›λž˜λŒ€λ‘œ</button>
    </div>
</div>
  • κΈ°λŠ₯ μ™„μ„± ν›„ ν•˜λ“œμ½”λ”©ν•œ 뢀뢄을 μ§€μš°λ©΄ κΉ”λ”ν•˜κ²Œ items λΌλŠ” id λ₯Ό 가진 λ‚΄μš© μ—†λŠ” νƒœκ·Έ ν•˜λ‚˜μ™€ λ²„νŠΌλ“€λ§Œ λ‚¨λŠ”λ‹€.

πŸ’œ μƒν’ˆ μ •λ ¬ : κ°€λ‚˜λ‹€μˆœ μ •λ ¬

  • sort ν•¨μˆ˜λ₯Ό ν™œμš©ν•΄μ„œ κ°€λ‚˜λ‹€μˆœ μ •λ ¬ κΈ°λŠ₯을 λ„£μ–΄μ£Όμ—ˆλ‹€.
  • λ²„νŠΌμ„ λˆ„λ₯΄λ©΄ μƒν’ˆλͺ… κΈ°μ€€μœΌλ‘œ μ •λ ¬λ˜λŠ” 거라 μƒν’ˆλͺ…에 ν•˜μ΄λΌμ΄νŠΈλ₯Ό μ£Όμ—ˆλ‹€. (λ²„νŠΌλ„ λ³€ν™”λ₯Ό 쀄 κ±Έ..)
$('#sortAbc').click(function(){
  let productsAbc = products.slice();
  productsAbc.sort(function(item1, item2){
    if (item1.title < item2.title) return -1;
    else if (item1.title == item2.title) return 0;
    else return 1;
  });

  $('#items').html('');
  layout(productsAbc);
  $('.title').css('background','#FFFF9A');

})
  • sortAbc λΌλŠ” id λ₯Ό 가진 λ²„νŠΌμ„ ν΄λ¦­ν–ˆμ„ λ•Œ, products λ°°μ—΄μ˜ 볡사본인 productsAbc 의 객체듀 쀑 두 κ°œμ”© item1, item2 λΌλŠ” νŒŒλΌλ―Έν„°λ‘œ λ°›μ•„ κ·Έκ²ƒλ“€μ˜ title 을 λΉ„κ΅ν•΄μ„œ μ˜€λ¦„μ°¨μˆœμœΌλ‘œ μ •λ ¬ν•΄μ£Όμ—ˆλ‹€. (μ •ν™•ν•˜κ²ŒλŠ” ν•΄λ‹Ήν•˜λŠ” μœ λ‹ˆμ½”λ“œκ°’μ˜ μˆœμ„œλ₯Ό λΉ„κ΅ν•˜λŠ” 것이닀.)
  • products 배열을 직접 μ‚¬μš©ν•˜μ§€ μ•Šκ³  slice ν•¨μˆ˜λ₯Ό μ‚¬μš©ν•˜μ—¬ productsAbc 의 사본을 λ§Œλ“  μ΄μœ λŠ” sort ν•¨μˆ˜κ°€ 원배열을 μˆ˜μ •ν•˜μ—¬ λ‹€λ₯Έ λ²„νŠΌμ„ ν΄λ¦­ν–ˆμ„ λ•Œ 영ν–₯을 미치기 λ•Œλ¬Έμ΄λ‹€. (이걸 λ’€λŠ¦κ²Œ μ•Œμ•„μ„œ λ²„νŠΌλ“€μ΄ μ„œλ‘œ 영ν–₯을 주지 μ•Šλ„λ‘ λ‹€ 사본을 λ§Œλ“€μ—ˆλ‹€.)
  • κ·Έ κ³Όμ •μ—μ„œ μž‘μ„±λœ if-else 문은 sort λ₯Ό μ‚¬μš©ν•  λ•Œ 정석적인 ꡬ문인데, μ‚Όν•­μ—°μ‚°μžλ₯Ό λ°°μ› λ‹€λ©΄ μ‚Όν•­μ—°μ‚°μžλ‘œ 적으면 훨씬 κ°„κ²°ν•˜κΈ΄ ν•˜λ‹€.
  • 이제 정렬을 ν–ˆμœΌλ©΄ layout ν•¨μˆ˜λ₯Ό μ΄μš©ν•΄μ„œ λ ˆμ΄μ•„μ›ƒμ„ μƒμ„±ν•˜μ—¬ items λΌλŠ” id λ₯Ό 가진 νƒœκ·Έμ— λΆ™μ—¬μ£Όλ©΄ λ˜λŠ”λ°, κ·Έ 전에 items λΌλŠ” id λ₯Ό 가진 νƒœκ·Έμ˜ λ‚΄μš©μ„ λͺ¨λ‘ μ§€μ›Œμ£Όμ–΄μ•Ό ν•œλ‹€.
    • μ™œλƒν•˜λ©΄, 이전에 이미 초기 ν™”λ©΄μš©μœΌλ‘œ μƒν’ˆλ“€μ˜ λ ˆμ΄μ•„μ›ƒμ„ μƒμ„±ν•΄λ‘μ—ˆκΈ° λ•Œλ¬Έμ— items λΌλŠ” id λ₯Ό 가진 νƒœκ·Έμ˜ λ‚΄μš©μ„ λͺ¨λ‘ μ§€μ›Œμ£Όμ§€ μ•ŠμœΌλ©΄ κ·Έ λ ˆμ΄μ•„μ›ƒλ“€ λ‹€μŒμœΌλ‘œ κ°€λ‚˜λ‹€μˆœμœΌλ‘œ μ •λ ¬λœ λ ˆμ΄μ•„μ›ƒλ“€μ΄ μΆ”κ°€λ‘œ λΆ™κΈ° λ•Œλ¬Έ!
  • κ·ΈλŸ¬κ³ λ‚˜μ„œ 마무리둜 ν•˜μ΄λΌμ΄νŠΈ κΈ°λŠ₯을 λ„£μ–΄μ£Όλ©΄ λœλ‹€. 타이틀 κΈ°μ€€μœΌλ‘œ κ°€λ‚˜λ‹€μˆœμ΄λ―€λ‘œ μƒν’ˆλͺ…에 λ…Έλž€μƒ‰ κ³„μ—΄μ˜ ν•˜μ΄λΌμ΄νŠΈλ₯Ό λ„£μ–΄μ£Όμ—ˆλ‹€.

πŸ’œ μƒν’ˆ μ •λ ¬ : κ°€κ²©μˆœ μ •λ ¬

  • κ°€κ²©μˆœ μ •λ ¬ κΈ°λŠ₯ λ˜ν•œ μ •λ ¬μ΄λ―€λ‘œ sort ν•¨μˆ˜λ₯Ό ν™œμš©ν•΄ λ„£μ–΄μ£Όμ—ˆλ‹€.
  • λ²„νŠΌμ„ λˆ„λ₯΄λ©΄ κ°€κ²©μˆœμœΌλ‘œ 정렬이 λ˜λŠ” 거라 가격에 ν•˜μ΄λΌμ΄νŠΈλ₯Ό μ£Όμ—ˆλ‹€.
$('#sortPrice').click(function(){
  let productsPrice = products.slice();
  productsPrice.sort(function(item1, item2){
    return item1.price - item2.price;
  });

  $('#items').html('');

  layout(productsPrice);
  $('.price').css('background','#FFFF9A');
})
  • 전체적인 JavaScript κ΅¬μ‘°λŠ” κ°€λ‚˜λ‹€μˆœ μ •λ ¬ κΈ°λŠ₯을 가진 λ²„νŠΌμ„ λ§Œλ“œλŠ” 것과 μœ μ‚¬ν•˜λ‹€.
  • λ‹€λ§Œ, μ΄λ²ˆμ—λŠ” 가격을 λΉ„κ΅ν•˜μ—¬ μ •λ ¬ν•˜λŠ” κ²ƒμ΄λ―€λ‘œ κ°€λ‚˜λ‹€μˆœ μ •λ ¬ κΈ°λŠ₯κ³ΌλŠ” 달리 λΊ„μ…ˆμ˜ 결과값에 따라 μ˜€λ¦„μ°¨μˆœμœΌλ‘œ 정렬이 λœλ‹€.
  • 참고둜 λ‚΄λ¦Όμ°¨μˆœμœΌλ‘œ μ •λ ¬ν•˜κ³  μ‹Άλ‹€λ©΄ item2.price - item1.price 둜 return 을 ν•˜λ©΄ λœλ‹€.

πŸ’œ μƒν’ˆ ν•„ν„° : 6λ§Œμ› μ΄ν•˜ 보기

  • λ ˆμ΄μ•„μ›ƒμ΄ Bootstrap 을 μ΄μš©ν•œ λ°˜μ‘ν˜•μ΄λ‹€λ³΄λ‹ˆ ν•„ν„°λ§λ˜λŠ” μƒν’ˆ κ°œμˆ˜μ— 따라 크기가 μ‘°μ ˆλœλ‹€.
  • λ²„νŠΌμ„ λˆ„λ₯΄λ©΄ products λ°°μ—΄ λ‚΄ λ°μ΄ν„°μˆœ κ·ΈλŒ€λ‘œ ν•„ν„°λ§λœλ‹€.
  • λ²„νŠΌμ„ λˆ„λ₯΄λ©΄ 6λ§Œμ› μ΄ν•˜ μƒν’ˆλ“€λ§Œ ν•„ν„°λ§λ˜λŠ” κ²ƒμ΄λ―€λ‘œ 가격에 ν•˜μ΄λΌμ΄νŠΈλ₯Ό μ£Όμ—ˆλ‹€.
$('#filterPrice').click(function(){
  let productsFilter = products.filter(function(item){
    return item.price <= 60000;
  });

  $('#items').html('');

  layout(productsFilter);
  $('.price').css('background','#FFFF9A');
})

 

 

  • filter ν•¨μˆ˜λŠ” ν•„ν„°κ°€ 적용된 μƒˆλ‘œμš΄ 배열을 return κ°’μœΌλ‘œ λ°˜ν™˜ν•˜κΈ° λ•Œλ¬Έμ— μƒˆλ‘œμš΄ λ³€μˆ˜μ— λ‹΄μ•„ μ‚¬μš©ν•΄μ•Ό ν•œλ‹€.
  • filter ν•¨μˆ˜ λ‚΄μ—λŠ” μ μš©ν•  쑰건을 적어주면 λœλ‹€.

πŸ’œ μƒν’ˆ 진열 : μ›λž˜λŒ€λ‘œ

  • κ°•μ‚¬λ‹˜μ΄ μ›λž˜λŒ€λ‘œ λ˜λŒλ¦¬λŠ” κΈ°λŠ₯을 넣어보라고 ν•˜μ‹  게 μ‹ μ˜ ν•œ μˆ˜μ˜€λ‹€.
  • 이 μ›λž˜λŒ€λ‘œλΌλŠ” κΈ°λŠ₯을 λ§Œλ“€κΈ° μ „μ—λŠ” 각 λ²„νŠΌλ“€μ΄ λ‹€λ₯Έ λ²„νŠΌλ“€μ— 영ν–₯을 λ―ΈμΉœλ‹€λŠ” 사싀을 μ•Œμ§€ λͺ»ν–ˆλ‹€.
  • 근데 λΈ”λ‘œκ·Έμ— 글을 μž‘μ„±ν•˜κΈ° μœ„ν•΄ GIF 캑처λ₯Ό ν•˜λ˜ 쀑, λ‹€λ₯Έ λ²„νŠΌλ“€μ„ λˆ„λ₯΄κ³ λ‚˜μ„œ μ›λž˜λŒ€λ‘œ λ²„νŠΌμ„ λˆ„λ₯΄λ©΄ 첫 ν™”λ©΄κ³Ό λ™μΌν•˜κ²Œ μƒν’ˆλ“€μ΄ λ°°μΉ˜λ˜μ–΄μ•Ό ν•˜λŠ”λ° 직전에 λˆ„λ₯Έ λ²„νŠΌμ˜ μ •λ ¬ μƒνƒœμ™€ λ™μΌν•˜λ‹€λŠ” 것을 λ°œκ²¬ν–ˆλ‹€.
  • 원인은 products λ°°μ—΄ 자체λ₯Ό κ·ΈλŒ€λ‘œ μ΄μš©ν•΄μ„œμ˜€λ‹€.
  • κ·Έλž˜μ„œ μ–΄λ–»κ²Œ 처리λ₯Ό ν•΄μ€„κΉŒν•˜λ‹€κ°€ κ·Έλƒ₯ λ‹€λ₯Έ λ²„νŠΌλ“€μ€ products 배열을 μ‚¬μš©ν•˜μ§€ μ•Šκ³  각각 사본을 λ§Œλ“€μ–΄μ„œ μ„œλ‘œμ—κ²Œ 영ν–₯을 λ―ΈμΉ  수 μ—†κ²Œ λ§Œλ“€μ–΄λ²„λ Έλ‹€.
$('#revert').click(function(){

  $('#items').html('');
  
  layout(products);
})
  • κ·Έλž˜μ„œ μ›λž˜λŒ€λ‘œ λ²„νŠΌμ„ λˆ„λ₯΄λ©΄ products λ°°μ—΄ κ·ΈλŒ€λ‘œ μƒν’ˆ λ ˆμ΄μ•„μ›ƒμ΄ 생성될 수 μžˆμ—ˆλ‹€.
728x90
λ°˜μ‘ν˜•