QR코드를 스캔하고 입력값을 음성으로 출력하는 프로젝트를 진행하며 Tts기능을 사용했던 경험입니다.
https://github.com/hyeonginju/QR-Scanner_Eye-Share-Net
React native로 앱을 만들고 Tts를 사용해 음성출력 기능을 구현했다. test용으로 간단하게 만든 앱이라서 메인스크린과 QR스캔 스크린, 세팅 스크린 정도만 구성했다.
Tts 기능은 'react-native-tts' 라이브러리를 사용하여 간단하게 구현할 수 있었다.
Tts(text-to-speech)구현 방법
Tts 라이브러리를 설치한다.
npm install --save react-native-tts
react-native link react-native-tts( 공식 사이트: https://github.com/ak1394/react-native-tts )
Tts를 사용할 컴포넌트에 선언한다.
import Tts from 'react-native-tts';옵션을 원하는 대로 세팅하고 입력값을 넣는다. (예시코드)
export default class Home extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
Tts.setDefaultLanguage('en-IE');
Tts.addEventListener('tts-start', event => console.log('start', event));
Tts.addEventListener('tts-finish', event => console.log('finish', event));
Tts.addEventListener('tts-cancel', event => console.log('cancel', event));
}
...
private _onPressSpeech = () => {
Tts.stop();
Tts.speak('Hello, world!');
}
}이번 프로젝트에서는 QR코드 스캔값을 바로 Tts에 넣어서 음성으로 출력하게 구현했다. (예시)
import Tts from 'react-native-tts';
const [QRcode, setQRcode] = useState(null);
Tts.stop();
Tts.speak(QRcode.data);그냥 이렇게 구현했더니 QR입력값이 밀려들어오면서 3초만 스캔해도 음성출력이 몇분동안 지속됐다.
그래서 조건을 붙여서 중복으로 스캔되지 않고 우리가 원하는 특정 QR 값만 출력하도록 바꿔주었다.
이번 프로젝트를 진행하면서 겪었든 문제는 라이브러리들끼리 버전 충돌을 일으킨 점이다.
좀전까진 잘 돌아가다가 갑자기 QR을 스캔하기 위한 'react-native-camera'와 화면 이동을 위한 '@react-navigation/native'가 오류를 내뿜었다.
낮은 버전때문에 그런가하고 업데이트를 진행하니 이번엔 다른 라이브러리들과 충돌을 일으켜서 당황스러웠다. 간단하게 끝내려고 했더니 일이 점점 꼬였고 결국 package.json 갈아엎고 난리를 쳤다...ㅋ
모든 라이브러리를 LTS로 업데이트해서 해결해야되나 생각하던 차에 몇번의 버전 수정을 거쳐 해결이 되긴 했다.
라이브러리 버전 충돌을 겪을 때면 항상 귀찮고 당황스럽다. 방금까지 잘되던게 대체 왜... :(
이번 프로젝트를 진행하면서 또 한번 느낀건 라이브러리 의존도를 낮춰야 한다는것이다. 생각은 해봤지만 이렇게 피부에 와닿지 않으면 중요성을 느낄 수 없다.
앞으로는 라이브러리를 최대한 줄이고 직접 기능을 구현해봐야겠다. (가능할까..?)
*그리고 LTS버전을 잘 확인해서 사용하기
언제나 그렇지만 어제까지 돌아가던 코드가 오늘 안되는 일이 발생하니까 말이다 ㅎ..
