2024.03.26 _ 미니 프론트엔드 코드 리뷰 + 수정

 

 

 

명세서 확인하기

2024.03.25 - [3월] - 2024.03.25_ 프론트엔드 미니 프로젝트

 

+ 수정할 부분

 

 

문제 : 장바구니에 담은 상품의 수량의 변화에 따른 가격 변화가 있을 것이고 이게 총 금액까지 이어져야 하는데... 총 금액까지 이어지지 않음!

원인 : 현재 코드에서는 수량이 증가 또는 감소할 때마다 'totalPrice' 변수에 상품 가격을 다시 계산하고 있지만,,, 이전의 총 가격을 고려하지 않고 현재 상품 가격만 고려하고 있어서 문제가 된 것!

해결방법 : 각 상품에 대해 수량이 변경될 때마다 총 가격을 업데이트 해야 한다. 수량이 변경될 때마다 해당 상품의 가격과 수량을 곱하여 총 가격을 새롭게 계산하고 업데이트 해야 한다.

 

 

완성 코드 

 

 

• 과자

  상품 가격: 1000원
• 음료수

  상품 가격: 1200원
• 빵

  상품 가격: 1500원

총 가격: 0원

 

 

 

코드 리뷰 하기

 

 

- JQuery -

 

 

$(document).ready(function(){}) 는 jQuery를 사용할 때 보편적으로 사용되는 패턴 중 하나.
jQuery 코드를 작성할 때, 이 코드 내에 코드를 작성하여 HTML 문서가 완전히 로드된 후 실행되도록 한다.
이렇게 하면 코드의 실행 시점을 제어하여 예기치 않은 오류를 방지할 수 있다. 

 

 

 

 

첫 번째 코드는 선택한 상품의 이름을 읽어서 가져오고,
두 번째 코드는 선택한 상품의 가격을 가져오는 코드인데, 가격정보를 가져오고 이를 정수형으로 변환하는 과정임

선택한 상품의 정보가 포함된 <li> 요소 안에서 가격을 나타내는 요소를 찾아서 => ( '$(this).find(' .price')' )

해당 요소의 텍스트를 가져온다. =>( ' .text()' ).

그 후에는 가져온 텍스트를 콜론(:) 기준으로 분할하고 => ( ' .split(':')' )

그 결과 중에서 두 번째 요소(인덱스 1)를 선택한다 => ( '[1]' )

마지막으로 정수형으로 변환 => parseInt()

 

 

item_list

 

 

 

 

위에서 선택한 상품의 이름을 변수 'itemName' 에 저장한 후,
이 이름을 가진 상품이 이미 장바구니에 있는지 확인하기.
( $( '.selected_list li [data-name=" ' + itemName + ' " ] ' )
는 장바구니( .selected_list ) 내에서 이름이 itemName과 동일한 상품을 찾는다.

.length
를 사용하여 선택된 요소의 개수를 확인.
만약 선택된 요소가 하나 이상이라면 (장바구니에 해당 상품이 이미 존재한다면),
경고창(alert)을 띄워 사용자에게 알린다.

 

 

 

 

 

var listItem = $(' <li data-name=" ' + itemName + ' " data-price=" ' + itemPrice + ' "></li>');
=> 새로운 장바구니 listItem을 만든다. 여기에는 선택한 itemName과 itemPrice이 들어간다.


var itemNameDiv = $('<div class="item-name">' + itemName + '</div>'); 
=> 상품 이름을 담는 상자 itemNameDiv를 만든다. 거기에는 itemName이 들어간다.


var quantitySpan = $('<span class="quantity">수량: 1</span>');
=> 수량을 표시하는 상자 quantitySpan를 만든다. 처음 생성할 때는 '수량: 1'로 표시된다


var increaseButton = $('<button class="increase">▲</button>'); 
=> 수량을 늘리는 버튼 increaseButton을 만든다. 화살표(▲)를 누르면 수량이 늘어난다.


var decreaseButton = $('<button class="decrease" disabled>▼</button>'); 
=> 수량을 줄이는 버튼 decreaseButton을 만든다. 화살표(▼)를 누르면 수량이 줄어든다.
단, 처음 생성할 때는 수량이 1이라 비활성화 시켜둠.


var priceSpan = $('<span class="price">가격: ' + itemPrice + '원</span>'); 
=> 상품의 가격을 표시하는 상자 priceSPan을 만든다. 여기에는 itemPrice이 들어간다.



listItem.append(itemNameDiv);
=> 방금 만든 상품 이름 상자(itemNameDiv)를 새로운 장바구니 항목(listItem)에 넣는다.
이렇게 하면 상품 이름이 장바구니 목록에 표시된다.

listItem.append(quantitySpan);
=> 수량을 나타내는 상자(quantitySpan)를 장바구니 항목에 추가한다.
이렇게 하면 수량이 장바구니 목록에 표시된다.

listItem.append(increaseButton);과 listItem.append(decreaseButton);
=> 수량을 늘리고 줄이는 버튼을 추가한다. 이 버튼들은 장바구니 항목 안에 표시됩니다.
처음에는 수량을 줄이는 버튼이 비활성화돼 있어서 누를 수 없음.

listItem.append(priceSpan);
=> 방금 만든 상품의 가격을 표시하는 상자(priceSpan)를 장바구니 항목에 추가한다.
이렇게 하면 상품 가격이 장바구니 목록에 표시된다.

$('.selected_list').append(listItem);
=> 새로운 장바구니 항목(listItem)을 실제 장바구니 목록에 추가한다.
이렇게 하면 새로운 상품이 장바구니에 추가 됨!

totalPrice += itemPrice;
=> 새로운 상품의 가격을 전체 가격에 더한다. 이렇게 하면 장바구니에 새로운 상품을
추가할 때마다 전체 가격이 업데이트 됨!

$('.total-price').text('총 가격: ' + totalPrice + '원');
=> 전체 가격을 나타내는 상자(.total-price)에 새로운 전체 가격을 업데이트.
이렇게 하면 사용자가 장바구니에 상품을 추가할 때마다 전체 가격이 바뀌어요!

 

 

 

이 코드는 장바구니 목록(.selected_list) 안에서 수량 증가 버튼(.increase)을 클릭했을 때 실행되는 동작을 정의한다.

여기서 .on('click', '.increase', function(){}은 "클래스 이름이 increase인 요소가 클릭되었을 때"라는
이벤트를 감지하는 jQuery 메소드이다.

 

 

 

var listItem = $(this).closest('li'); 
=> 현재 클릭된 수량 증가 버튼이 속해 있는 부모 <li> 요소를 찾는 역할.

var itemName = listItem.data('name');
=> listItem의 'name' 데이터값을 읽어와서 itemName에 할당한다.

var itemPrice = parseInt(listItem.data('price'));
=> <li> 요소의 data-price 속성을 읽어와서 상품의 가격을 가져오는 역할.
그리고 parseInt() 함수를 사용해서 숫자로 변환해준다

var quantitySpan = listItem.find('.quantity');
=> 이 부분은 수량을 나타내는 요소인 .quantity를 찾는 역할을 해요.

var quantity = parseInt(quantitySpan.text().split(': ')[1]);
=> 그 다음에는 수량을 나타내는 요소에서 현재 수량을 가져오는 역할을 한다.
split(': ')을 사용해서 '수량: ' 이 부분을 제거하고, parseInt() 함수를 사용해서 숫자로 변환한다.

quantity++;
이 부분은 현재 수량을 1 증가시키는 역할.

quantitySpan.text('수량: ' + quantity);
다음으로는 수량을 나타내는 요소의 텍스트를 업데이트.
새로운 수량을 표시하기 위해 '수량: ' 이라는 텍스트와 함께 업데이트된 수량을 넣는다.

listItem.find(' .price').text('가격: ' + totalPrice + '원');
=> 상품의 총 가격을 업데이트하기 위해
해당 상품의 HTML 요소에서 가격을 나타내는 요소를 찾고, 새로 계산한 총 가격(totalPrice)을
해당 요소의 텍스트로 설정한다.
이를 통해 화면에 총 가격이 업데이트된다.

var totalPrice = itemPrice * quantity;
=>  상품 가격(itemPrice)과 수량(quantity)을 곱하여 totalPrice에 할당한다

listItem.find('.price').text('가격: ' + totalPrice + '원');
=> listItem에서 '.price'요소를 찾아서 text로 변경한다

var total = 0;
=> 전체 가격을 계산하기 위한 변수 total을 초기화한다.
이 변수에는 모든 상품의 총 가격을 합산하여 총 가격을 구한다.

$('.selected_list li').each(function() {
       total += parseInt($(this).find('.price').text().split(': ')[1]);
});
=> 선택된 상품 목록(.selected_list)에 있는 각 상품에 대해 반복문을 실행한다.
각 상품의 총 가격을 가져와서 total 변수에 더한다.
이때, parseInt 함수를 사용하여 문자열로 된 가격을 정수형으로 변환한다.

$('.total-price').text('총 가격: ' + totalPrice + '원');
최종적으로 전체 가격을 나타내는 요소에 업데이트된 전체 가격을 표시해요.
이렇게 함으로써, 상품의 수량을 증가시키고, 총 가격을 계산하고 업데이트하는 일련의 과정이 이루어지게 됩니다.

listItem.find('.decrease').prop('disabled', false);
이 코드는 상품 항목 안에서 클래스가 decrease인 요소를 찾아서 해당 버튼을 활성화시킨다.
처음에는 수량을 줄이는 버튼이 비활성화돼 있었는데, 수량을 늘리는 버튼을 누르면
이 코드가 실행되어 수량을 줄이는 버튼을 활성화시키게 됩니다.

 

 

 

 

* 수량 증가와 비슷한 코드는 리뷰 생략함 

if (quantity < 1) {
=> 만약 수량이 1보다 작다면 아래의 코드 블록이 실행된다.
quantity = 1;
=> 이 줄은 수량을 1로 고정시킵니다. 즉, 수량을 1로 변경하여 최소 수량을 유지한다.
$(this).prop('disabled', true);
=> 이 코드는 현재 클릭된 버튼을 비활성화시킨다. 여기서 $(this)는 현재 클릭된 버튼을 가리킨다.

따라서 이 코드는 현재 클릭된 버튼을 비활성화하여 사용자가 더 이상 수량을 줄일 수 없도록 한다.