쇼핑몰 어드민 쪽 상품 추가 기능을 만들면서 재고추가 기능이 들어갔다.
기능을 간단하게 풀어보면
1. 재고 추가 버튼을 누른다.
2. 한 쌍의 인풋이 추가된다. (각각 사이즈 : 수량)
3. 버튼을 더 누르면 재고 인풋이 추가된다.
4. 인풋에 값을 입력하면 stockValues라는 변수에 객체 형태로 값이 담긴다. 예 : { S:2, M:2, L:1 }
이런저런 우여곡절 끝에 아래와 같은 코드로 구현할 수 있었다.
//재고 정보 추가 및 삭제 기능
let stockValues = {}; // 객체로 재고 정보를 저장
let stockCount = 0; // 고유한 ID를 관리하는 변수
addStock.addEventListener('click', () => {
const currentId = stockCount; // 현재 스톡 항목의 고유 ID
const stockInputs = `
<div class="stock-inputs" id="stock-data${currentId}">
<span>
<label>사이즈</label>
<input type="text" class="stock-input" id="item-size${currentId}" value="">
</span>
<span>
<label>수량</label>
<input type="number" class="stock-input" id="item-qty${currentId}" value="">
</span>
<button id="item-delete${currentId}">삭제</button>
</div>
`;
stockContainer.insertAdjacentHTML("beforeend", stockInputs);
updateStockValues(); // 추가 시 stockValues 업데이트
// 생성된 인풋 필드에 이벤트 리스너 추가
const sizeInput = document.getElementById(`item-size${currentId}`);
const qtyInput = document.getElementById(`item-qty${currentId}`);
// 인풋 값 변경 시 객체 업데이트
sizeInput.addEventListener('input', () => {
updateStockValues();
});
qtyInput.addEventListener('input', () => {
updateStockValues();
});
// 재고 삭제 기능
document.getElementById(`item-delete${currentId}`).addEventListener('click', () => {
// 삭제할 요소 제거
const stockDataElement = document.getElementById(`stock-data${currentId}`);
if (stockDataElement) {
stockDataElement.remove();
}
updateStockValues(); // 삭제 시 stockValues 업데이트
});
stockCount++; // 고유한 ID 증가
});
// 현재 인풋 필드 기준으로 stockValues 업데이트하는 함수
function updateStockValues() {
stockValues = {}; // 객체 초기화
// 모든 인풋 필드를 순회하며 객체를 다시 생성
document.querySelectorAll('.stock-inputs').forEach(stockInput => {
const size = stockInput.querySelector('input[type="text"]').value;
const qty = parseInt(stockInput.querySelector('input[type="number"]').value, 10);
if (size && !isNaN(qty)) {
stockValues[size] = qty; // 유효한 값만 객체에 추가
}
});
console.log("업데이트된 스탁 밸류스:", stockValues);
}
- stockValues라는 객체 전역변수로 만들기
- 인풋들의 생성과 삭제를 효과적으로 관리할 수 있도록 아이디 고유 값을 주기 위해 stockCount라는 변수도 만들어줌. 초기값 0
- curruntId라는 값을 인풋 html id 뒤에 넣어주고 재고추가 버튼이 눌러질 때마다 stockCount를 증가시키면서 curruntId에 넣어주어 고유id를 가진 인풋으로 생성 (그렇게 해야 삭제 버튼 클릭 시 원하는 인풋을 삭제 가능)
- 인풋의 값들은 입력이나 변경될 때마다 updateStockValue라는 함수를 실행시킴
- updateStockValue 함수는 실행되면 stockValues객체를 일단 초기화 하고 사이즈 인풋과 갯수 인풋에 입력한 값이 실시간 적용될 수 있도록 forEach를 사용해서 해당 값을 순회시킴
- 사이즈와 갯수 모두 유효한 값이 들어왔을 때만 객체에 추가
대략은 이렇게 만들어진 코드인데 마지막 부분을 좀 더 살펴보면
NaN은 Not a Number의 줄임말로 숫자가 아니라는 뜻. 즉 !isNaN(갯수)라는 것은 갯수 인풋에 들어오는 값이 숫자가 아닌것의 반대라는 뜻이니 결과적으로 숫자만 들어온다는 것이다.
즉 사이즈와 갯수(숫자)의 값이 존재할 때만 stockValues객체에 값을 넣어준다는 말인데 값을 넣어주는 방식은
객채명[키] = 밸류
이런식으로 해주면 객체에 값을 추가할 수 있다.
여기선 stockValues[size] = qty 를 해줌으로써 값을 넣게되면 { 사이즈값 : 갯수값 } 형태의 객채 값을 넣어줄 수 있다.
객체의 키값은 중복입력이 되지 않는다.