포스기 만들기.

포스기 간단하게 만들어보기.

 

구현해야할 기능

1. 버튼 누르면 주문목록에 리스트 뜨기.

2. 주문목록에 뜬 리스트 +나 - 버튼 누르면 수량 증가 및 감소하기.

3. 삭제버튼 누르면 리스트 삭제하기.

4. 2,3번에 맞춰서 총 합계 가격 나타내기.

5. 결제버튼 누르면 주문목록 초기화 하기

6. 결제취소 버튼 누르면 결제전 화면으로 돌아가기.

7. 같은 버튼 누르면 두개 이상안들어가게 하기. => 아직 미구현.

 

 

느낀점

1. 간단한 페이지는 제이쿼리로 하는 것이 효과적이지만, 요즘 추세가 제이쿼리를 안쓰는추세라 바닐라 자바스크립트로 코딩해서 그런지 줄이 길어지는 단점이 있음.

2. 시행착오 

  1) 가격합계를 구할 때, 어떻게 할까 고민하다가, 배열을 하나 만들어서 넣었음. 그리고 넣은 값을 reduce로 합했음.

  2) - 버튼 클릭시 가격이 빠지는 부분을 고민, 기존 가격넣는 배열에서 해당 값 찾아서 빼주는 방식으로 구현.

  3) 삭제버튼 클릭시 수량 * 가격만큼 총합계에서 빠져야하는데,  while문을 써서 삭제되는 리스트의 가격을 다 빼주는

     방식을 취했는데, 다른 항목 동일가격인 제품의 값까지 빠져버려, for문으로 주문리스트 배열에 담긴 카운트숫자만큼

     만 값을 찾아서 빼주는 것으로 해결.

  4) 가격 넣는 배열에 합을 리듀스로 구하다보니, 삭제버튼 클릭하고 리스트의 개수가 0개 되어버리면, 리듀스

     에러가 남. if else로 분기해서 처리함.

  5) 결제 버튼 누르면 ul 자식노드 전부 삭제되게 함.

  6) 아직 미구현은 왼쪽에 제품 목록 버튼 클릭하면, 같은 제품 1개이상 안들어가게 하려고 하는데 마땅한 방법이 생각나지 않음.