jsp에서 동적으로 생성하는 각 행의 id값을 JavaScript에서 어떻게 처리해야 될까요?

Question

안녕하세요 선배님들 늦은 밤에 질문이 있어서 글을 써봅니다. 먼저 궁금한 부분이 jsp에서 jstl/el 을 사용해서 동적으로 생성된 상품의 id값 처리를 어떻게 해야 될지 궁금합니다!

님의 장바구니

${cart.beansDO.beanName}

${cart.cartDO.qty}개

${cart.beansDO.beanPrice}

합산 금액: ${totalPrice}원

자바스크립트는 현재let totalPrice = document.querySelector('#totalPrice'); let sum = totalPrice.innerHTML * 1; function clickHandler(e) { if (e.target.nodeName !== 'BUTTON') { return; } let prodClass = e.target.getAttribute('class').split(' '); let products = document.querySelectorAll('.' + prodClass[1]); let price; let qty; for (let i = 0; i < products.length; i++) { if (products[i].nodeName === 'INPUT') { price = products[i]; } else if (products[i].nodeName === 'SPAN') { qty = products[i]; } } if (prodClass[0] === 'cartProductInfo__plus') { sum += price.value * 1; qty.innerHTML = (qty.innerHTML * 1) + 1; } else if (prodClass[0] === 'cartProductInfo__minus') { if ((qty.innerHTML * 1) >= 1) { sum -= price.value * 1; qty.innerHTML = (qty.innerHTML * 1) - 1; } } document.querySelector('#totalPrice').innerHTML = sum; if (e.target.id === 'delete') { if (confirm('장바구니에서 삭제 하시겠습니까?')) { let hiddenForm = document.querySelector('#hiddenForm'); if (hiddenForm) { hiddenForm.action = '/coffee/cart'; hiddenForm.submit(); } else { console.error('#hiddenForm이 존재하지 않습니다.'); } } } } function changeHandler(e) { if (e.target.getAttribute('type') !== 'checkbox') { return; } let products = document.querySelectorAll('.' + e.target.getAttribute('class')); let price = e.target.value; let qty; let plus; let minus; for (let i = 0; i < products.length; i++) { if (products[i].nodeName === 'BUTTON' && products[i].getAttribute('class').split(' ')[0] === 'cartProductInfo__plus') { plus = products[i]; } else if (products[i].nodeName === 'BUTTON' && products[i].getAttribute('class').split(' ')[0] === 'cartProductInfo__minus') { minus = products[i]; } else if (products[i].nodeName === 'SPAN') { qty = products[i]; } } if (e.target.checked) { plus.disabled = false; minus.disabled = false; sum += (price * 1) * (qty.innerHTML * 1); } else { plus.disabled = true; minus.disabled = true; sum -= (price * 1) * (qty.innerHTML * 1); } document.querySelector('#totalPrice').innerHTML = sum; } function init() { const checkBoxes = document.querySelectorAll('#cartList'); checkBoxes.forEach(function(checkBox) { checkBox.addEventListener('change', changeHandler); checkBox.addEventListener('click', clickHandler); }); } window.addEventListener('load', init); 이렇게 되어있는데 init 펑션에서 forEach문 안에 checkBox + index 번호가 붙어야 될꺼 같은데 방법을 모르겠습니다. 1. 고유한 id 값을 줄 수 있는 다른 방법이나 2. jsp에 el을 사용한 형태의 checkBox${index.count}를 자바스크립트에서 어떻게 처리를 할 수 있을지 알고 싶습니다 ㅠㅠ 각각 상품에 대해서 처리가 안되고 제일 처음 생성된 상품에 체크박스와 버튼 값이 반영이 되네요 ㅠㅠ 부족한 면이 많습니다 ㅠㅠ

yeori · Answer

위와같이 서버사이드에서 렌더링한(jstl/el등) 화면 결과에 프론트엔드에서 추가적인 프로그래밍을 입히는 경우가 더러 있습니다. SSR과 CSR이 뒤섞인 경우인데...다음과 같은 코드가 반드시 등장합니다.function changeEvent() { let products = querySelectorAll('.'+e.target.getAttribute('class')); } function clickHandler() { let products = querySelectorAll('.'+e.target.getAttribute('class')); }출력결과에서(view) 데이터를(model, products) 추출함화면과 같이 장바구니 상품 갯수를 변경하거나 삭제하는 경우, 선택된 제품들에 대해 전체 가격을 재계산해야 하는데, 원본 데이터인 products가 필요하지만 렌더링을 서버에서 끝냈기 때문에 프론트엔드에서 products에 접근할 방법이 없습니다.미봉책으로,렌더링된 view에서 역으로 데이터를 얻어내는 식으로 대응할때가 아주 많습니다(실제 현업에서도 자주 등장함)이런 접근 방법은 향후에 유지보수를 어렵게 하기때문에 피하는게 좋습니다. 이유는 생략하고..다음과 같이 서버에서 렌더링할때 사용한 데이터를 동적으로 받아오는게 좋습니다.const loadCartData = () => { ajax('/my/carts").then(products => { console.log('[한 번 더 가져옴]', products); }) }/my/carts에서 가져온 데이터와 서버에서 렌더링한 화면 결과는 일치해야 합니다(보통 CartService에서 장바구니를 로드하기때문에 일치함)이제 위와같이 읽어온 장바구니(products)를 사용해서 프로그래밍을 전개하면 querySelectorAll 과같이 view에서 model을 얻어오는 코드를 다 걷어낼 수 있습니다.Class vs Dataset서버에서 다음과 같이 장바구니 상품을 식별하는데...

...

checkBoxes1, checkBoxes2, ....아이템을 삭제하면 인덱스로 장바구니 상품을 식별하는데 어려움이 많습니다.(10개 중 2, 3번째를 삭제하면 화면의 인덱스값과 데이터가 맞지 않음)장바구니 상품마다 식별키(seq)가 있으면 jstl을 다음과 같이 수정합니다.

...

프로그래밍으로 접근하는 element들에게는 dataset api를 지정하겠음(data-xxxx).없으면 프론트엔드에서 가라로 식별값을 만들 수도 있는데 문서가 길어지니 내용은 생략함.그리고 각각의 장바구니 상품마다 체크박스, 버튼들도 모두 dataset api를 적용해서 다음과 같이 정리합니다.

${cart.cartDO.qty}개

합산 금액: ${totalPrice}원

data-action 이벤트 리스너를 적용할때 참조할 값들(plus, minus, delete, payment)data-view 모델 데이터 업데이트 시 건드리는 element들(qty, total)이렇게 class 는 디자인 먹일때 사용하고, dataset은 프로그래밍 먹일때 사용하면 유지보수가 수월해집니다.(이것만으로도 어느정도 문서 기능을 함)Programming다음과 같이 장바구니를 관리하는 클래스를 만듭니다. 님이 짠 코드들이 이 안에 다 들어감let cartView = undefined; class CartView { constructor(selector, products) { this.rootEl = document.querySelector(selector) this.products = products; } } // 사용할때 const loadCartData = () => { ajax('/my/carts").then((products) => { cartView = new CartView('#cartList', products) }) }그리고 장바구니 상품 갯수를 변경할때class CartView { constructor(selector, products) { this.rootEl = document.querySelector(selector) this.products = products; this.rootEl.addEventListener('change', (e) => { const checkbox = e.target const action = checkbox.dataset.action // 'plus' or 'minus' if (action) { const cartEl = checkbox.closest('[data-cart]').dataset console.log('[cart]', cartEl, 'action', action); } }); } }위와같이 변경 대상인 장바구니 상품의 el과(cartEl) 실행할 명령어(action)를 잡아냅니다.CartView 클래스에 갯수를 변경하는 메소드를 추가함class CartView { constructor(selector, products) { ... this.rootEl.addEventListener('change', (e) => { ... const action = checkbox.dataset.action // 'plus' or 'minus' if (action) { const cartEl = checkbox.closest('[data-cart]').dataset const cartSeq = cartEl.dataset.cart; //

this.changeQty(cartSeq, action) } }); } /* * 장바구니 상품 갯수 변경 */ changeQty(cartSeq, action) { // 데이터 업데이트(model) const delta = action === 'plus' ? 1 : -1 const cart = this.products.find(elem => elem.seq === cartSeq) cart.cartDO.qty += delta // 예외처리 생략(음수인경우) // 화면 업데이트(view) const cartEl = this.rootEl.querySelector(`[data-cart="${cartSeq}"]`) this.repaintCart(cartEl, cart) } }위와같이 장바구니 상품 갯수를 바꿔주고 화면을 렌더링하는 메소드를 준비함(repaintCart)class CartView { /* * 장바구니 상품 갯수 변경 */ changeQty(cartSeq, action) { // 데이터 업데이트(model) ... // 화면 업데이트(view) const cartEl = this.rootEl.querySelector(`[data-cart="${cartSeq}"]`) this.repaintCart(cartEl, cart) } repaintCart(cartEl, cart) { const qtySpan = cartEl.querySelector('[data-view="qty"]') qtySpan.innerHTML = `${cart.cartDO.qty}개` // 1. 전체 금액 const totalPrice = this.products.reduce((total, cart) => { total += card... // 여기서 알아서 잘 더함 return total }, 0 ) // 2. 총액 렌더링 const totalEl = this.rootel.querySelector('[data-view="total"]') totalEl.innerHTML = `총액: ${totalPrice}` } }전체적인 구조는 이렇고, 장바구니 아이템 삭제나 결제도 비슷하게 구현하면 됩니다.

jsp에서 동적으로 생성하는 각 행의 id값을 JavaScript에서 어떻게 처리해야 될까요?

1개의 답변

기타 목록