[개인] 카스 전자 저울 연동 Packing List 자동 생성 프로그램 #9 | FileReader 클래스의 비동기 방식을 동기 처리하여 엑셀 파일 읽어오기

| 이슈

엑셀 파일의 데이터를 읽어오고자 할 때 [그림 1]과 같이 처음에는 빈 객체만 출력되었다가 한번 더 실행하면 비로소 배열 값이 출력되는 문제가 있었다. 이런 현상 때문에 엑셀 파일을 불러온 직후에는 화면에 그리드가 렌더링 되지 않고 조회 버튼을 눌러야만 렌더링 되었다. 원하는 것은 엑셀 파일을 불러오면 자동으로 화면에 그리트를 렌더링 하는 것이다.

문제의 원인은 엑셀 파일을 불러오기 위해 사용한 FileReader 클래스가 비동기 방식으로 데이터를 읽어오기 때문이었다. 그래서 엑셀 파일의 데이터를 읽어오기 위해 생성한 readFile() 메서드에 Promise를 적용하여 비동기 방식을 동기 방식으로 처리되게 하였고, 그 결과 원하는 결과를 얻을 수 있었다.

 

[그림 1] 동일한 메소드 호출, 각각 다른 결과(빈 객체 , 배열 값을 가진 객체)

 

엑셀 파일을 불러오는 메서드 readFile()에 Promise를 적용하고, readFile()를 호출하는 xlsxMount() 메서드에는 readFile().then으로  readFile()의 엑셀 데이터를 읽어 오는 처리가 완료되면 그 값을 화면에 렌더링 될 resultXlsxToJson 변수에 넣도록 하였다. 해당 코드는 다음과 같다.

readFile(e) {
  return new Promise((resolve, reject) => {
    let files = e.target.files
    let reader = new FileReader()
    const temp = []
    reader.readAsBinaryString(files[0])
    reader.onload = function (e) {
      let data = e.target.result
      let workBook = XLSX.read(data, { type: 'binary' })
      workBook.SheetNames.forEach(function (sheetName) {
        let xlsxToJson = XLSX.utils.sheet_to_json(
          workBook.Sheets[sheetName]
        )
        temp.push(xlsxToJson)
      })
      resolve(temp)
    }
  })
},
xlsxMount(e) {
  this.readFile(e).then((res) => {
    this.resultXlsxToJson = res // readFile(e)에서 읽어온 엑셀 데이터 resultXlsxToJson 변수에 담기
    this.lotNoFilter() // resultXlsxToJson에 담긴 데이터를 화면에 렌더링
  })
  ...
},

 

| 다음 단계

이제 계획했던 모든 구현이 완료되었다. 그런데 생각해보니 카스 전자저울의 mdb 데이터가 있는 폴더가 각 PC 환경마다 다를 수도 있지 않을까 하는 생각이 들었다. 그래서 mdb 파일이 존재하는 폴더를 변경하는 기능을 추가하고자 한다. 그리고 고객사 추가 삭제 시 alert이 없어 밋밋한 감이 있다. 그래서 Sweet Alert을 적용하고자 한다.