[개인] 카스 전자 저울 연동 Packing List 자동 생성 프로그램 #3 | Packing List 생성, xlsx 내보내기 | 조회 정보 페이징

| 구현 기능 목록 및 진행 현황

☑ xlsx 파일을 읽어와 사용자가 입력한 로트번호를 조회

☑ 조회한 정보 수정 기능

☑ 고객사 정보 관리(모달): ☑ checkbox 고객사 삭제 기능

☑ 조회 정보 페이징

□ Packing List 생성, 인쇄, xlsx  내보내기(모달): ☑ Packing List 생성, □ 인쇄, ☑ xlsx  내보내기

□ 스타일 작업(Bootstrap)

 

| 문제와 해결

해결된 문제 들은 대개 허무할 만큼 별거 아니다. 하지만 풀리지 않은 문제는 많은 시간을 고뇌하게 만든다. Packing List 생성 기능 구현 단계에서 제품의 전체 중량을 구하는 과제에 직면했을 때 엑셀에서는 sum함수를 쓰면 간단히 해결되는 문제인데 javascript에서는 이 같은 계산을 어떻게 해야 할지-처음에는-어떤 아이디어도 떠오르지 않았다. 결론은 이중 for문을 이용했고 이때 문자열인 중량을 Number함수를 이용해 숫자로 변경해 누적 합계를 구했다. 그런데 소수점 한자리였던 중량이 누적합계에서는 쓸데없이 긴 자리의 소수점으로 표기되어 있었다. 소수점을 다루는 함수로 math도 있었지만 toFixed를 이용해 해결했다. toFixed(1)이라고 Argument 1을 주면 소수점 한자리까지 표시한다. 주의할 점은 결괏값이 숫자가 아니라 문자열이라는 것이다.

packingComputed() {
  let tempSumTotalValue = 0
  let count = 0
  for (let resultArray of this.filteredLotNo) {
    for (let reultObject of resultArray) {
      tempSumTotalValue += Number(reultObject.GROSS_WEIGHT)
      count++
    }
  }
  ...
  this.packingList[0].sumTotal = tempSumTotalValue.toFixed(1) // 총 중량
  this.packingList[0].countTotal = count // 총 수량
},

 

조회 정보 페이징 기능 구현도 난감했다. 부트캠프를 통해 알게 된 동료의 페이징 관련 코드를 최대한 활용했고, 디자인은 부트스트랩을 이용했다. 페이징 관련 코드의 구조를 파악하기 위해 시간을 많이 들였는데 눈으로 코드를 따라가면서 Pagination 관련된 componet를 추려내 이 프로젝트에-에러를 잡아가며-복붙 했다. 코드를 이해하기 위해 원본 프로젝트의 실행상태에서 일부분의 코드를 고의로 삭제한 후 변화를 관찰하기도 했고, console.log를 찍어 가며 진행하기도 했다.

https://getbootstrap.com/docs/5.2/components/pagination/#working-with-icons

Pagination

 

| 다음 단계

이제 Packing List를 인쇄하는 기능과 스타일 작업을 남겨두고 있다. 스타일 작업은 Bootstrap를 최대한 이용할 예정이다.

1. Packing List 인쇄 기능
2. Bootstrap 스타일 적용

 

[그림 1] Bootstrap의 Pagination이 적용된 결과물