React

    [ React ]  웹 소켓 통신 + Web Audio API

    [ React ] 웹 소켓 통신 + Web Audio API

    🔴 TTS ⚪ 시나리오 🔔 TTS 테스트를 진행하고 싶은 텍스트를 입력한 후 서버로 전송한다. 🔔 서버에서 일정 chunk 단위로 나눠서 입력한 텍스트에 맞는 음성 Raw 데이터가 웹 소켓 통신으로 도착한다. 🔔 음성 데이터를 버퍼에 저장한 후 오디오로 재생시킨다. ⚪ 코드 const TtsScreen = () => { const inputText = useSelector(state => state.tts.inputText); const isPlaying = useSelector(state => state.tts.isPlaying); const dispatch = useDispatch(); // recorder const [player] = useState(() => new Player()); const..

    [ React ]  Hook

    [ React ] Hook

    🔴 useState const [ state, setState ] = useState(0); // 변수 선언 // setState 함수의 첫 번째 argument는 현재 state 값이다. setState((current) => current + 1); // 값 변경(비동기) + 렌더링 state = state + 1; // 값 변경(비동기) // 🔍 state 값을 변경하는 방법 const [fruit, setFruit] = useState({ color: "red", name: "apple" }); // 1️⃣ 새로운 객체 만들기 setFruit({ color: "red", name: "strawberry" }); // 2️⃣ prevState 값을 이용하여 이전 state를 사용하기 setFruit..