저번시간에 이어 장바구니를 마저만들어보았다.
장바구니 다 만들고 버벅였던점
현재는 장바구니를 이렇게 다 만들어줬는데
아직 덜만들긴했지만 여기까지 오는데에도 살짝 버벅임이있었다.
그 버벅임이있었던 부분은 모든 상품의 가격을 합쳐서 보여주는
total부분이었는데 장바구니의 상품들은 모두 cartItem이라는 곳에 담겨져있는데 배열안 객체상태로 들어있어서
이걸 어떻게 다 더해줘야할지 고민이었다.
검색해봤을 때 reduce함수와 map함수 반복문돌려서 그 값을
변수로 0이라는 공간을 만들어서 거기에 다 더해주기,
뭐 기타등등 많이나왔는데
전부 다 에러가나는바람에 고생을 좀 했다. 지금은 해결을 했는데
해결방법은 reduce함수와 map함수를 사용했다.
reduce함수를 사용해보니까 배열 안에 있는요소들을 모두 더해주는 함수였고
map함수는 내가 원하는 객체의 값만 뽑아와서 배열로 만들어주는 함수여서
cartItem에 map함수를 돌려준 다음 안에서 price값만 뽑아와 배열로 만들어주었다.
그리고 그 map함수로 만든 배열로 reduce함수를 사용해서 모든 값을 더해주었다.
다 만들어준 코드의 모습이다.
조건문을 달아준이유는 장바구니에 아무 아이템을 넣지않았을 때
에러가나서 달아주었다.
이렇게 해서 완성을 해주었는데 이제 또 테스트 해본결과
에러가 한군데 있었다.
에러
에러는 일단 상세페이지에서 발생했는데
이곳에서는 수량을 올리면 바로 곱해준 값의 결과가 가격으로 나타나는데
수량은 잘 넘어가는데 가격은 잘 안넘어왔다. 이걸 고쳐줘야할거같다.
수량처럼 바꿔주면 되지않을까 하는 생각이들긴하는데 해봐야알거같다.
일단 이 에러가 난 이유는
상세페이지의 데이터들은 targetGame 이라는 store의 slice를 받아온것인데.
나는 그걸 생각못하고 데이터바인딩에서 바로
{targetGame.count * targetGame.price} 로 데이터바인딩을 해주는 바람에 화면에는 잘 나타나지만
그 값이 targetGame이라는 데이터의 price를 변경시켜주지는 않는것이었다.
가격이 안넘어가던문제 해결
이 문제를 해결하기위해 여러가지의 방법을 사용해봤는데
생각보다 간단한 방법으로 해결이되서 너무 어이없었다..
처음에는 store에서 reducers에 함수를 추가해서 만들어줘야하나 싶어서 count를 올려주는 countUp에
이렇게 되어있는 코드를
이렇게 변경해봤었는데 수량이 2개까지는 만원짜리가 이만원으로 잘 나왔는데 그 뒤로 이만원짜리가 육만원 육만원이 십몇만원 이런식으로 굉장한 액수로 나타나는 버그가생겨서,, 왜 이렇게 나오나 생각해보니
10000 2 > 20000 3 > 60000 > * 4
이런식으로 계산이 진행이됐던거같다.
그래도 위의 저 코드덕분에 해결책을 찾았다.
10000원인 상태는 유지를하면서 계산을 해줘야한다. 라는 결론이 나왔고 그 결론을 바탕으로
만원곱하기 새롭게 바뀐 count를 계산해주면 되는건데
내가 고친 정답부터 보면
이런식으로 변경해주었다. cartItem에 보내는 dispatch에
원래는 targetGame을 보내주었었는데 지금은
xptmxm 라는 변수에 오브젝트안에 스프레드연산자로
기존의 targetGame을 뿌려준 뒤 price부분만
count * price를 해준값을 변경시켜줬다.
그리고 그 변수를 dispatch로 카트아이템에 전송해줬더니 결과적으로 잘 나타나게됐다.
바바이즈유를 5개를 담아보면
장바구니에도 그대로 잘 넘어왔다.
그 외에도 여러방법들을 사용해봤었는데
value값을 가져와서 사용해보거나,, 뭐 ,, 이것저것있는데 그때마다 기록해두진않아서 넘어가겠다.
이제 남은건 지우기버튼과 구매하기/결제창
지우기버튼과 구매하기/결제창을 만들어주면 끝이다.
로그인기능은 파이어베이스를 사용하기로했는데
파이어베이스 수업을 아직 듣지않아서 들어준 다음 마무리지어줄까싶다.
지우기버튼은 금방만들거같고 결제창은 그냥,, 받아온 값들을
모두 그 다음창에 넘겨주는 느낌으로만 제작해주고 끝낼까싶다.
여태 만들었던건 복습 겸 만들었던거
여태 작업했던 쇼핑몰 프로젝트는 복습 겸 연습용으로 만들어 본 사이트이다.
홈페이지 자체는 잘 작동하지만 서버가없다보니 뭔가.. 아쉬운느낌이라 파이어베이스수업을 들어본 뒤에
또 다른걸 작업해봐야겠다.
