3. 개발 - 엑셀 업로드

업로드

로직 흐름

• 1) <input type='file'/>을 활용해 엑셀 파일을 받아 왔다.
• 2) 업로드 버튼을 누르면 xlsx의 메소드들을 활용해 엑셀 파일을 json으로 파싱한다.
• 3) 변환한 json을 전달하여 createList 메소드를 호출한다.
• 4) createList는 등록하고자 하는 데이터들을 순회하면서 먼저 유효성 검사 validate(type)(data) 를 한다.
• 5) 유효성 검사를 통과하면 업로더를 사용하는 곳에서 받아온 create 함수를 호출한다.
• 6) 결과들은 createResult 배열에 저장한다. 저장 실패 or 유효성 검사 실패시 오류 사유를 담아놓는다.
• 7) 순회가 끝나면, 엑셀 업로드 결과를 보여주는 모달을 만든다. 모달에 createResult를 전달해서 업로드 결과, 실패 사유를 보여준다.

// 2) 엑셀 파일 변환
    const readExcel = useCallback(() => {
        const fileReader = new FileReader()
        fileReader.onloadend = (e) => {
            try {
                // 읽어서 jsonArr로 변환
                const data = e.target.result
                // console.dir(e)
                const wb = XLSX.read(data, {type: "binary"})
                const ws = wb.Sheets[wb.SheetNames[0]]
                const jsonArr = XLSX.utils.sheet_to_json(ws, {header: 1, defval: ''})
                // jsonArr 일괄 등록 하기 , header빼고 넣음
                if(jsonArr.length > 0 && typeof(jsonArr[0][0]) === "string" && jsonArr[0][0].includes("SCDSA002")) {
                    errorToast("보안 문서는 사용할 수 없습니다. 보안 문서 암호화를 해제하거나 다른 문서를 사용해주세요.")
                    return
                }

                const dtos = jsonToDtos[type](jsonArr.slice(1))
                const params = makeParams(dtos, createParams, createParamsOrder)
                createList(type, params)

            } catch(e) {
                console.error(e)
                errorToast("엑셀 파일을 읽는 중 오류가 발생했습니다. 파일을 확인해주세요.")
            }
        }
        fileReader.readAsBinaryString(excelFile)
    },[excelFile])

** 우리 회사에서 사용하는 보안 문서의 경우 엑셀의 제일 처음 cell에 "SCDSA002"가 들어가고 암호화된다. 그래서 해당 경우를 예외처리 해줬다. **

 // 3) ~ 6) 일괄 등록 
    const createList = async(type, paramsList) => {
        setLoading(true)
        let createResult = [] 
        for(let i = 0; i < paramsList.length; i++) {
            const params = paramsList[i]
            //verification의 경우 worksapceProfile key로 가짐
            const dto = params.find(e => (typeof(e) === "object" && (("uuKey" in e) || ("workspaceProfile" in e))))
            // dto 유효성 검사
            const validateResult = await validate(type)(dto,user.currentBotId)
            if(validateResult !== "성공") {
                createResult.push({dto, result:validateResult})
                continue
            }
            const response = await create[type](...params)
            // 결과 처리
            if(response.result?.code === "0000") {
              createResult.push({dto, result:"성공"})
            } else {
              createResult.push({dto, result:"실패 - 서버 통신"})
            }
        }
        // 다시 변환해서 넣기
        let dtos = createResult.map(cR => cR.dto)
        dtos = dtosToJson(type,dtos)
        setLoading(false)
        showCreateResult(createResult)
        // 목록 갱신
        updateList()
    }

유효성 검사

유효성 검사 로직은 각 type별로 로직들을 한 곳에 뭉쳐놓았다. 이 것은 딱히 방법이 없는 것 같다. 모아놓고 관리하거나 모듈을 사용하는 곳에서 전달하거나 2가지 뿐인 것 같다.

샘플 다운로드

샘플 다운로드는 이전에 만든 다운로드 함수를 활용해서 쉽게 다운로드할 수 있다. 사용자는 어떤 데이터를 샘플에 넣을지만 코드에 배열 형태로 작성하면 된다.

SENTENCE: [
  ["유사 예문"],
  ["테스트 예문1 입니다."],
  ["테스트 예문2 입니다."],
],

샘플을 엑셀로 작성할 필요없이 코드로 쉽게 만들 수 있어 좋은 기능이라 생각한다.