gwooden_코린이

자바스크립트 + 제이쿼리 장바구니 카드 만들기 본문

프론트엔드/자바스크립트

자바스크립트 + 제이쿼리 장바구니 카드 만들기

gwooden22 2022. 12. 26. 12:40
728x90

- HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- bootstrap -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav class="navbar bg-light">
    <form class="container-fluid justify-content-start">
      <button class="btn btn-outline-success me-2" type="button">장바구니</button>
      <!-- <button class="btn btn-outline-secondary me-2" type="button">기능생각안함</button>       -->
    </form>
  </nav>
  <div class="container m-4">
    <div class="row row-cols-1 row-cols-md-3 g-4">
      <!-- <div class="col">
        <div class="card" style="width: 18rem;">
          <img src="이미지" class="card-img-top">
          <div class="card-body">
            <h5 class="card-title">제목</h5>
            <p class="card-text">내용</p>
            <button class="btn btn-primary">담기</button>
          </div>
        </div>
      </div> -->

    </div>
  </div>
  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.2.min.js" integrity="sha256-2krYZKh//PcchRtd+H+VyyQoZ/e3EcrkxhM8ycwASPA=" crossorigin="anonymous"></script>
  <!-- bootstrap -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
  <!-- JS -->
  <script src="test.js"></script>
</body>
</html>

HTML에서 해당 .col 클래스명 부분에 영역을 1개 이상 생성하기 위해서는 같은 내용을 복사하여 늘려야 된다. 이때 늘리고 싶을때 마다 계속 반복해야 되는 번거로움과 가독성이 매우 떨어지는 문제점이 생긴다.

 

이를 해결하기 위해 자바스크립트를 이용해 공통적인 부분을 최대한 간결하게 처리해준다.

- css

img {
  height : 200px;
}

- JS, jQuery

//배열로 관리

let fruits = [
  {name : 'apple', memo : '빨개요'},
  {name : 'mango', memo : '달달함'},
  {name : 'melon', memo : '맛있음'},
]
/* js */

 내용 집어넣기
 document.querySelectorAll('.card-title')[0].innerHTML = fruits[0].name;
 document.querySelectorAll('.card-text')[0].innerHTML = fruits[0].memo;

 이미지 넣기 속성변경 .setAttribute
 document.querySelectorAll('.card-img-top')[0].setAttribute('src', `img/${fruits[0].name}.jpg`)



/* jQuery */

/* 반복문 */
 for(let i=0; i<fruits.length; i++) {
   $('.card-title').eq(i).html(fruits[i].name);
   $('.card-text').eq(i).html(fruits[i].memo);
   $('.card-img-top').eq(i).attr('src', `img/${fruits[i].name}.jpg`);
 }


 fruits.forEach((data, i) => {
   $('.card-title').eq(i).html(data.name);
   $('.card-text').eq(i).html(data.memo);
   $('.card-img-top').eq(i).attr('src', `img/${data.name}.jpg`);
 });

let second = `<div class="col">
                <div class="card" style="width: 18rem;">
                  <img src="이미지" class="card-img-top">
                  <div class="card-body">
                    <h5 class="card-title">제목</h5>
                    <p class="card-text">내용</p>
                    <button class="btn btn-primary">담기</button>
                  </div>
                </div>
              </div>`;
//js
document.querySelector('.row').insertAdjacentHTML('beforeend', second);

//jQuery
$('.row').append(second);



let second = `<div class="col">
                <div class="card" style="width: 18rem;">
                  <img src="이미지" class="card-img-top">
                  <div class="card-body">
                    <h5 class="card-title">제목</h5>
                    <p class="card-text">내용</p>
                    <button class="btn btn-primary">담기</button>
                  </div>
                </div>
              </div>`;
//js
document.querySelector('.row').insertAdjacentHTML('beforeend', second);

//jQuery
$('.row').append(second);




let second = `<div class="col">
                <div class="card" style="width: 18rem;">
                  <img src="이미지" class="card-img-top">
                  <div class="card-body">
                    <h5 class="card-title">제목</h5>
                    <p class="card-text">내용</p>
                    <button class="btn btn-primary">담기</button>
                  </div>
                </div>
              </div>`;
//js
document.querySelector('.row').insertAdjacentHTML('beforeend', second);

//jQuery
$('.row').append(second);

 

반복문 없이 수동적으로 html에 태그와 내용을 넣어준 코드

위 처럼 하면 나중에 넣어줄 코드가 많아질 수록 가독성이 많이 떨어져 수정이 어려워지고 데이터다 추가될 때 마다 추가 작업도 매우 번거로워진다.

 

fruits.forEach((div, i) => {

  let second = `<div class="col">
<div class="card" style="width: 18rem;">
  <img src=" img/${fruits[i].name}.jpg " class="card-img-top">
  <div class="card-body">
    <h5 class="card-title">${fruits[i].name}</h5>
    <p class="card-text">${fruits[i].memo}</p>
    <button class="btn btn-primary">담기</button>
  </div>
</div>
</div>`;

$('.row').append(second);

});

위 코드를 리펙토링 해서 간소화 작업을 진행함. forEach로 반복을 시켜 html에 넣어줄 태그와 내용을 한번에 정리한다.

 

 

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

'프론트엔드 > 자바스크립트' 카테고리의 다른 글

자바스크립트 + 제이쿼리 장바구니 담기/추가 기능  (0) 2022.12.26
자바스크립트 + 제이쿼리 이벤트  (0) 2022.12.26
자바스크립js 요소(태그)들 추가 / 삭제  (1) 2022.12.26
제이쿼리 기능 사용해보기  (0) 2022.12.23
제이쿼리 기능 적용 및 nodejs 적용하기  (0) 2022.12.23
'프론트엔드/자바스크립트' Related Articles more
Comments