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
λ°μν