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

1편에서 작성한 기능 2개를 간단하지만 작성하게 되었다.

완성 데모는 언제나 그렇듯 Netlify
➡ Demo

1. reset 기능 구현
setCity를 계속 변경하던 중 npm의 Readme를 다시 확인하게 되었다.

resetTranscript를 이용해 값을 리셋하는 방식이 있었다. 심지어 기본 예시에도 나와있어서 처음 사용할 때도 썼는데 그 사이에 잊어버린 것. (사실 setCity 변경으로도 가능할 줄 알았다.)

새로 값을 넣을 때마다 버튼을 클릭해야하는 점이 번거롭다 생각할 수 있지만 단어 혹은 음절로 파악하는 것이 아닌 계속 켜져있는 마이크 상태에 가장 적합하지 않나 싶었다.

쓰기 모드의 경우 ref를 활용하여 버튼 클릭시 값이 비워지고, input 영역에 다시 포커스가 가도록 하였다. 첫 렌더링시 autofocus를 맞췄지만 음성인식의 경우 바로 말하면 해결되지만 쓰기의 경우 다시 작성할 때 클릭해야하기 때문.

 const startRecord = () => {
    SpeechRecognition.startListening({
      continuous: true,
      language: 'en-US',
    });
    resetTranscript();
  };
  const stopRecord = () => {
    ref.current.focus();
    setCity('');
  };

2. 날씨에 따른 변화 혹은 시간에 대한 변화 등 값을 토대로 2차 기능 만들기

console.log (weather)에서부터 자세히 살펴보며 대기압이 아닌 다른 쓸만한 정보가 있는지 파악하며 풍속과 풍향을 알려주는 wind로 교체하기로 하였다. 실생활에서 방향보다는 세기가 중요하기 때문에 속도로 결정하여 값을 변경하였다.

<div className='parameters'>
  <span className='param-label'>Wind: </span>
  <span className='param-val'> {weather ? weather.wind.speed : '-'} m/s </span>
</div>

다시 서버를 다시 시작해보니 답을 제대로 불러오지 못해 일단 배포는 미뤄두기로 했다.

➡ useEffect로 voice 값을 바꾸던 것을 없애고 바로 넣으려 했으나 없애니 값이 달라지지 않았다. startRecord 내에서 voice의 값을 받아 setCity(voice) 하는 과정이 없었고
useEffect를 사용하는 것이 더 코드가 잘보였다.

필요한 기능을 모두 넣은 것 같아 기능 추가는 이제 없는 것으로.