[JS] Ajax 정리 (2)

728x90

준비물

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="main.css" />
    <title>Hello, world!</title>
  </head>
  <body>
    <!-- -- 13-1) Ajax -->
    <div class="container">
      <div class="row">
        <div class="col-sm-4">
          <img src="https://via.placeholder.com/600" class="w-100" />
          <h5>Card title</h5>
          <p>가격 : 70000</p>
        </div>
      </div>
    </div>
    <!-- 스크립트 -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
      integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>
    <script src="list.js"></script>
  </body>
</html>

JS

// -- 13-1) Ajax
var products = [
  { id: 0, price: 70000, title: "Blossom Dress" },
  { id: 1, price: 50000, title: "Springfield Shirt" },
  { id: 2, price: 60000, title: "Black Monastery" },
];
var 템플릿 = `
  <div class="col-sm-4">
    <img src="https://via.placeholder.com/600" class="w-100" />
    <h5>${products[0]["title"]}</h5>
    <p>가격 : ${products[0].price}</p>
  </div>
`;
$(".row").append(템플릿);

3개 만들거니까 반복문 사용

var products 변수가 array 로 시작하니까

forEach 문을 써준다.

products.forEach((a) => {
  var 템플릿 = `
  <div class="col-sm-4">
    <img src="https://via.placeholder.com/600" class="w-100" />
    <h5>${products[0]["title"]}</h5>
    <p>가격 : ${products[0].price}</p>
  </div>
`;
  $(".row").append(템플릿);
});

a - products 에 있는 하나하나의 데이터 요소

숫자가 하드코딩된거 지워주기

i 추가해주기

products.forEach((a, i) => {
  var 템플릿 = `
  <div class="col-sm-4">
    <img src="https://via.placeholder.com/600" class="w-100" />
    <h5>${products[0]["title"]}</h5>
    <p>가격 : ${products[0].price}</p>
  </div>
`;
  $(".row").append(템플릿);
});

i = 반복문이 될 때마다 0이되고 1 이 되고 2가 된다

products.forEach((a, i) => {
  var 템플릿 = `
  <div class="col-sm-4">
    <img src="https://via.placeholder.com/600" class="w-100" />
    <h5>${a.title}</h5>
    <p>가격 : ${a.price}</p>
  </div>
`;
  $(".row").append(템플릿);
});

= a 로 치환해줌
a 를 출력해보면 products[i]랑 똑같이 나옴.

두 번째 매개변수 i 의 사용

forEach 메소드의 콜백 함수에서 두 번째 매개변수로 전달되는 'i'는 현재 반복의 인덱스를 나타냄.

'i'는 현재 반복이 발생하는 배열의 인덱스
, 배열에서 현재 요소의 위치를 가리키는 것

인덱스를 활용하면 필요에 따라 배열 요소의 순서를 추적하거나 사용할 수 있다.

템플릿을 생성할 때 제품의 순서를 나타내거나,
해당 제품에 대한 특정 작업을 수행하거나, 배열의 특정 요소를 찾는 등의 작업에 사용

a.title 하고 a.price 이렇게 a 로 치환해주는 이유 = 하드 코딩 피하기

'a'는 forEach 메소드에서 각 반복에서 현재 처리되고 있는 배열의 각 요소

'a'는 현재 반복되고 있는 제품 객체를 나타내며,
'a.title'과 'a.price'는 해당 제품 객체의 속성에 접근하여 제품의 제목과 가격을 가져온다.

forEach 메소드의 콜백 함수에서 각 반복에서 현재 처리되고 있는 제품을 나타내는 'a'(변수)를 사용

${products[0]["title"]}
= 이것은 항상 첫 번째 제품의 제목을 사용
= 하드 코딩

${a.title} 은 현재 반복되고 있는 제품의 제목을 가져옴
${a.title}은 현재 제품의 제목을 나타내고, ${a.price} 는 현재 제품의 가격

= 변수를 담는 툴인 ${} 를 사용한 다음 ( ${} 안에 있는 부분은 변수명)
'a'는 각 반복에서 배열의 요소를 의미 , 그 배열의 각 요소는 객체.
그리고 객체 안에는 title 이라는 속성 존재.
// -- 13-1) Ajax
var products = [
  { id: 0, price: 70000, title: "Blossom Dress" },
  { id: 1, price: 50000, title: "Springfield Shirt" },
  { id: 2, price: 60000, title: "Black Monastery" },
];
products.forEach((a, i) => {
  var 템플릿 = `
  <div class="col-sm-4">
    <img src="https://via.placeholder.com/600" class="w-100" />
    <h5>${a["title"]}</h5>
    <p>가격 : ${a.price}</p>
  </div>
`;
  $(".row").append(템플릿);
  console.log(a);
});
'a' 변수가 객체 배열.
= console.log(a) 해보면 object배열 뜸
고로, ${a.title} 또는 ${a["title"]} 이걸로
현재 반복 중인 객체의 'title' 속성을 가져올 수 있다.

console.log(a) 하고 console.log( products[i] ) 했을 때 동일하게 나오는 이유

// -- 13-1) Ajax
var products = [
  { id: 0, price: 70000, title: "Blossom Dress" },
  { id: 1, price: 50000, title: "Springfield Shirt" },
  { id: 2, price: 60000, title: "Black Monastery" },
];
products.forEach((a, i) => {
  var 템플릿 = `
  <div class="col-sm-4">
    <img src="https://via.placeholder.com/600" class="w-100" />
    <h5>${a["title"]}</h5>
    <p>가격 : ${a.price}</p>
  </div>
`;
  $(".row").append(템플릿);
  //console.log(a);
  console.log(products[i]);
});

'i'는 현재 반복이 발생하는 배열의 인덱스.
0 부터 시작하고 데이터 요소 3개 있어서 3번 반복되니까
i 자리에는 0, 1, 2 가 들어가게 되면서
products[0], products[1], products[2] 가 들어가게 되므로 순차적으로 나오면서 a 변수를 출력한 것과 동일하게 나온다.

'a'는 배열의 각 요소를 순회하면서 현재 처리 중인 요소를 나타냄

products[0], products[1], products[2]가 forEach 메소드를 통해
순회되면서 'a'에 할당되는 값은
각각 products 배열의 첫 번째, 두 번째, 세 번째 요소가 되는 것

console.log(products[i].title) = a["title"] = a.title

// -- 13-1) Ajax
var products = [
  { id: 0, price: 70000, title: "Blossom Dress" },
  { id: 1, price: 50000, title: "Springfield Shirt" },
  { id: 2, price: 60000, title: "Black Monastery" },
];
products.forEach((a, i) => {
  var 템플릿 = `
  <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(템플릿);
  // console.log(a);
  console.log(products[i]);
});

이렇게 바꿔써도 된다.
products 변수의
[i] = 인덱스 0,1,2
object 배열이니까
[""] 또는 . 으로 속성 갖고오기.

728x90

저작자표시 비영리 변경금지

'> 메모 > JS' 카테고리의 다른 글

[JS] Ajax 정리 (3) (0)	2024.04.07
[JS] arrow function 문법 (화살표 함수) (0)	2024.04.07
[JS] Ajax 정리 (1) (0)	2024.04.03
[JS] forEach, for in 반복문 (0)	2024.04.02
[JS] 자바스크립트로 html 태그 생성 (0)	2024.04.02

IT 아카이브

[JS] Ajax 정리 (2)

'> 메모 > JS' 카테고리의 다른 글

티스토리툴바

[JS] Ajax 정리 (2)

'> 메모 > JS' 카테고리의 다른 글

관련글

티스토리툴바