๊ฒฐ๊ณผ๋ฌผ

 

์œ„์™€ ๊ฐ™์ด ํ™ˆํŽ˜์ด์ง€ ์ƒํ’ˆ ๋ชฉ๋ก์„ ์ƒ์„ฑํ•œ๋‹ค๊ณ  ๊ฐ€์ •ํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

HTML์— ์š”์†Œ๋“ค์„ ์ง์ ‘ ์ƒ์„ฑํ•ด์„œ ํ•˜๋“œ์ฝ”๋”ฉํ•  ์ˆ˜๋„ ์žˆ๊ฒ ์ง€๋งŒ, ๋ฐ์ดํ„ฐ๊ฐ€ ๋ณ€๊ฒฝ๋  ๋•Œ๋งˆ๋‹ค HTML ์š”์†Œ๋ฅผ ๊ณ„์†ํ•ด์„œ ์ง์ ‘ ์ˆ˜์ •ํ•ด์ค˜์•ผํ•˜๋Š” ๋ฒˆ๊ฑฐ๋กœ์›€์ด ์ƒ๊น๋‹ˆ๋‹ค.

๋ฐ˜๋ฉด, ๋ฐฐ์—ด๊ณผ JavaScript๋ฅผ ์ด์šฉํ•˜๋ฉด ๋ฐ์ดํ„ฐ๊ฐ€ ๋ณ€ํ• ๋•Œ๋งˆ๋‹ค ๋ณ€๊ฒฝ์‚ฌํ•ญ์„ ์ž๋™์œผ๋กœ ๋ฐ˜์˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

JavaScript๋ฅผ ์ด์šฉํ•˜๋ฉด DOM ๊ฐ์ฒด์— ์ ‘๊ทผํ•˜์—ฌ HTML ์š”์†Œ๋ฅผ ์ง์ ‘ ์ƒ์„ฑ, ์ˆ˜์ •, ์‚ญ์ œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

์•„๋ž˜์˜ ๋น„์–ด์žˆ๋Š” HTML ์š”์†Œ์ธ div ํด๋ž˜์Šค row์— ์ƒํ’ˆ ๋ฆฌ์ŠคํŠธ๋ฅผ ์ถ”๊ฐ€ํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

<div class="container">
  <div class="row"></div>
</div>

์ƒํ’ˆ ๋ฆฌ์ŠคํŠธ๊ฐ€ ๋ฐฐ์—ด์•ˆ์— ๊ฐ์ฒด ํ˜•์‹์œผ๋กœ ๋‹ด๊ฒจ์žˆ์Šต๋‹ˆ๋‹ค.

let products = [
  {id: 0, price: 70000, title: "๊ฝƒ๋ฌด๋Šฌ ์›ํ”ผ์Šค"},
  {id: 1, price: 50000, title: "๋ฐ๋‹˜ ์…”์ธ "},
  {id: 2, price: 60000, title: "ํŠธ๋Ÿฌ์ปค ์žฌํ‚ท"},
];

append ์‚ฌ์šฉ

products.forEach((a, i) => {
  const temp = document.createElement("div");
  temp.innerHTML = `<div class="col-sm-4"> 
        <img src="https://via.placeholder.com/600" class="w-100">
        <h5>${products[i].title}</h5> 
        <p>๊ฐ€๊ฒฉ : ${products[i].price}</p> 
      </div>`;
  document.querySelector(".row").append(temp);
});
  • 1๋ฒˆ์งธ ์ค„์—์„œ, ๋ฐฐ์—ด์— ๋‹ด๊ฒจ์žˆ๋Š” ์š”์†Œ๋“ค์„ forEach ๋ฉ”์„œ๋“œ๋ฅผ ํ†ตํ•ด ๋ฐฐ์—ด์— ๋‹ด๊ธด ์ƒํ’ˆ ๋ฆฌ์ŠคํŠธ์˜ ์ˆซ์ž๋งŒํผ ๋™์ž‘๋ฉ๋‹ˆ๋‹ค. ์ฆ‰ ๋ฐฐ์—ด์— ๋‹ด๊ธด ์ƒํ’ˆ ๊ฐœ์ˆ˜๋งŒํผ ์š”์†Œ๋“ค์ด ์ƒ์„ฑ๋ฉ๋‹ˆ๋‹ค. 3๊ฐœ์˜ ๊ฐ์ฒด๊ฐ€ ๋ฐฐ์—ด ์•ˆ์— ์žˆ์œผ๋‹ˆ, 3๋ฒˆ ๋™์ž‘๋ฉ๋‹ˆ๋‹ค.
  • 2๋ฒˆ์งธ ์ค„์—์„œ, createElement๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ div ์š”์†Œ๋ฅผ ์ƒ์„ฑํ•œ๋’ค temp ๋ณ€์ˆ˜์— ๋‹ด์•„์ค๋‹ˆ๋‹ค.
  • 3๋ฒˆ์งธ ์ค„์—์„œ, ๋ณ€์ˆ˜์— innerHTML์„ ์‚ฌ์šฉํ•˜์—ฌ HTML ์š”์†Œ๋“ค์„ ์ง์ ‘ ๋‹ด์•„์ค๋‹ˆ๋‹ค. ๋ฐฑํ‹ฑ(``)์„ ์‚ฌ์šฉํ•ด์„œ ๋ฌถ๊ฒŒ ๋˜๋ฉด ์‹ฑ๊ธ€ ์ฟผํ…Œ์ด์…˜(''), ๋”๋ธ” ์ฟผํ…Œ์ด์…˜("")๊ณผ ๊ธฐ๋Šฅ์€ ๊ฐ™์ง€๋งŒ, ๋‘˜๊ณผ๋Š” ๋‹ฌ๋ฆฌ ์ค„ ๋ฐ”๊ฟˆ์ด ๊ฐ€๋Šฅํ•˜๋ฉฐ ${ }๋ฅผ ์‚ฌ์šฉํ•ด ๊ฐ์ฒด๋ฅผ ๋‹ด์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • 8๋ฒˆ์งธ ์ค„์—์„œ, ๋น„์–ด์žˆ๋Š” HTML ์š”์†Œ์ธ row ํด๋ž˜์Šค์— ์ž์‹๋…ธ๋“œ๋กœ temp ๊ฐ์ฒด๋ฅผ ์‚ฝ์ž…ํ•ฉ๋‹ˆ๋‹ค.
  • products ๋ฐฐ์—ด์— ์žˆ๋Š” ๋ฐ์ดํ„ฐ๋“ค์ด ํ™”๋ฉด์— ๋ Œ๋”๋ง ๋ฉ๋‹ˆ๋‹ค.

insertAdjacentHTML ์‚ฌ์šฉ

products.forEach((a, i) => {
  const temp = document.querySelector(".row").insertAdjacentHTML(
    "afterbegin", // HTML ์š”์†Œ๊ฐ€ ์‚ฝ์ž…๋˜๋Š” ์œ„์น˜ ์„ ์–ธ
    `<div class="col-sm-4">
        <img src="https://via.placeholder.com/600" class="w-100">
        <h5>${a.title}</h5>
        <p>๊ฐ€๊ฒฉ : ${a.price}</p>
      </div>`
  );
});

์ œ์ด์ฟผ๋ฆฌ ์‚ฌ์šฉ

products.forEach((a, i) => {
      let temp = 
      `<div class="col-sm-4">
      <img src="https://via.placeholder.com/600" class="w-100">
        <h5>${products[i].title}</h5>
        <p>๊ฐ€๊ฒฉ : ${products[i].price}</p>
      </div>`;
      $('.row').append(temp)
});

 

forEach ๋ฉ”์„œ๋“œ์— ๋Œ€ํ•œ ์ž์„ธํ•œ ์„ค๋ช…์€ mdn ๋งํฌ๋ฅผ ์ฐธ์กฐํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

 

Array.prototype.forEach() - JavaScript | MDN

forEach() ๋ฉ”์„œ๋“œ๋Š” ์ฃผ์–ด์ง„ ํ•จ์ˆ˜๋ฅผ ๋ฐฐ์—ด ์š”์†Œ ๊ฐ๊ฐ์— ๋Œ€ํ•ด ์‹คํ–‰ํ•ฉ๋‹ˆ๋‹ค.

developer.mozilla.org

๋ณต์‚ฌํ–ˆ์Šต๋‹ˆ๋‹ค!