Research/React40 React-speech-kit 사용하기 소개 OpenAI에서 제공하는 여러 기능 중 TTS(Text-To-Speech) 기능을 알아보자. STT는 Audio API에서 제공한다. 도대체 이런걸 어디에 활용하면 좋을까 생각해봤는데, openAI에서 예시로 언급한 게 있어서 정리하면 : - 블로그 포스트 읽어주기 - 다양한 언어로 말하기 - 스트리밍으로 실시간 오디오 만들기 등 다양한 작업에 활용할 수 있다고 한다. 목소리 유형은 6개 있는데 그냥 각자 취향에 따라 선택하면 된다. 시작하기 `speech`는 3가지 인풋값이 필요한데, 1) 모델명, 2)발음할 텍스트, 그리고 3)목소리 유형이다. 기본적인 코드는 이렇다. openAI 인스턴스를 만들고 파일을 생성한 뒤 3가지 인풋을 넣어서 mp3 변수에 저장한 뒤, 이를 버퍼 파일로 저장한다. c.. 2023. 11. 8. React_참고_여러 input들 데이터 종합하기 import React from 'react'; import EmailFormContainer from './EmailFormContainer'; function App() { return ( Email Form ); } export default App; // EmailForm.jsx import React from 'react'; function EmailForm({ name, label, value, onChange }) { const handleChange = (e) => { onChange(name, e.target.value); }; return ( {label} ); } export default EmailForm; // EmailFormContainer.jsx import React, { .. 2023. 11. 5. 로컬 스토리지, 쿠키로 토큰 저장 시 리스크 차이 웹에서 클라이언트가 토큰을 사용하는 방법은 2가지, 1) localStorage | sessionStorage에 담아서 사용하는 방법, 2) 쿠키에 저장하는 방법이다. 둘 다 브라우저를 통해 사용한다. localstorage | sessionStorage로 토큰 저장 localStorage, sessionStorage 으로 토큰 사용 시 장점은 구현과 사용이 쉽다. 단점은 XSS(Cross Site Scripting)에 취약하다. 페이지에 악성 스크립트를 삽입해서 토큰 탈취가 가능하기 때문이다. 쿠키로 토큰 저장 쿠키 또한 XSS 문제가 발생할 수 있으나, httpOnly 속성 활성화로 막을 수 있다. 이로 인해 자바스크립트로 쿠키 조회가 불가능해지기 때문에 악성 스크립트로부터 안전하다. 단, CSRF(.. 2023. 11. 2. React_간단한 비동기 api 만들기 Promise Promise로 간단히 api를 비동기적으로 호출하면.. import { useState } from 'react'; import axios from 'axios'; const App = () => { const [data, setData] = useState(null); const onClick = () => { axios .get('https://jsonplaceholder.typicode.com/todos/1') .then((response) => { setData(response.data); }); }; return ( Load data {data && ( )} ); }; export default App; async/await 문 이를 async/await 문으로 바꾸면? impo.. 2023. 10. 30. 이전 1 2 3 4 ··· 10 다음
