react-speech-recognition 활용하기 (1)

인스타그램을 보던 중 리액트로 날씨앱 만들기 소스코드를 보고 음성인식으로 확인하는 방법이 있다면 좋겠다 싶어 추가하게 되었다.

기본 템플릿을 제공하여 tongue-twister를 따라하는 기본적인 모습을 만들어보고,
이번에는 확인한 코드를 보고 기능을 추가하기로 했다.

➡ GitHub

특징이라면

• 오디오에서 소리가 나도 인식을 하더라. 유튜브를 틀고 같이 하면 자동 자막처럼 화면에 뜨고 있어 이걸 토대로 자동자막 기능도 가능할 것 같았다.

• 음성 인식시 단어가 Seoul 처럼 1단어라면 온점이 발생. San Francisco 처럼 2단어라면 온점이 없었다. 뒷 글자가 점이라면 하나를 지우고 아닐 경우 값을 그대로 출력할 수 있도록 endWith 메서드로 처리.

• 두번째 버튼으로 reset 버튼을 만들고 싶었는데 onClick={() => setCity('')}로는 불가능하였다.
  useReducer를 통해 할 수 있다는 스택오버플로우 글을 봤으니 한번 변경해보기로.

• input창은 autofocus로 화면이 렌더링 되면 포커스가 들어가지만 포커스를 벗어나도 음성인식시 바로 값이 들어갔다.

추가 변경사항
1. reset 기능 구현
2. 날씨에 따른 변화 혹은 시간에 대한 변화 등 값을 토대로 2차 기능 만들기