[React Native Expo] 아이템 피커, 바코드 제작

아이템 Picker

https://blog.logrocket.com/build-text-detector-react-native/

블로그를 참고해서 아이템을 픽하고, 구글 vision과 연결했다.

바코드 Scanner

https://docs.expo.dev/versions/latest/sdk/bar-code-scanner/?redirected#barcodetypes

Expo Docs에서 기본으로 제공하는 Scanner를 사용해서 값을 읽어오려고 했다.
그런데 웹에서는 실행이 안된다고해서 IOS로 실행하기로 했다

IOS에서 실행, ESMA Script 에러

node_modules\react-native\Libraries\Alert\Alert.js: C:\Users\ES58\Documents\GitHub\2022HCI-giftyClip\babel.config.js: Error while loading config - You appear to be using a native ECMAScript module configuration file, which is only supported when running Babel asynchronously.
IOS 핸드폰으로 실행했더니 이렇게 생긴 에러가 나왔다.

https://bongra.tistory.com/102

글을 참고해서 cjs로 변환하고, 내용을 수정했던 실행됐다.

바코드 인식 에러

우선 IOS에서 QR밖에 인식이 안되는걸 배제하고서도 uri로부터 바코드를 가져오는 데에 에러가 있었다

BarCodeScanner.scanFromURLAsync가 Promise<BarCodeScannerResult[]> 을 반환하는데, Promise가 뭔지를 몰라 해맸다.

Promise 처리법

promise는 반드시 then, catch, finally들을 선언해줘야하는 구문이다.
그 자체가 값을 가지고 있지는 않기 때문에, result, error 값을 then과 catch의 인자로 넣어 처리해줘야 했다.

let ret=await BarCodeScanner.scanFromURLAsync(result.uri, [BarCodeScanner.Constants.BarCodeType.qr,BarCodeScanner.Constants.BarCodeType.codabar,BarCodeScanner.Constants.BarCodeType.code39])
      .then((result)=>{ //무사히  수행됐다고 가정했을 때 처리할 구문
        //alert(result.length);
        if(result.length>0) handleBarCodeScanned(result[0]);
      })
      .catch((error)=>{ //처리가 안 됐을 때의 구문
        console.log("Api call error");
        alert(error.message);
     });

우선 이렇게 처리할경우, 반드시 OCR를 해줘야해서 결국 구글 API를 쓸 수밖에 없을 것 같다
이메일 승인되는대로 재도전 해야겠다