전체 글140 [네이버 클라우드] STT, React-Media-Recorder CLOVA Speech Recognition(CSR) 개요 api.ncloud-docs.com 자세한 API 사용법은 위의 링크에서 확인할 수 있습니다. STT(Speech To Text)란? 사용자로부터 음성 데이터를 입력 받고, 그에 맞는 인식 결과를 텍스트로 반환하는 것을 일컫는다. CSR(Clova Speech Recognition)이란? 사람의 목소리를 인식하여 작동하는 비서 애플리케이션, 챗봇, 음성 메모 등의 서비스를 만들 때 활용할 수 있는 음성인식 API 서비스입니다. 음성 데이터는 API를 통해 CLOVA Speech Recognition(CSR) 엔진으로 전송되며, 해당 음성 데이터를 인식해서 텍스트로 변환하여 전달해줍니다. GOAL 1. 네이버 클라우드 플랫폼 콘솔에서 애플리케이션 .. 2023. 3. 30. [REACT] preventDefault() // JSX return ( ) 만약, 위와 같은 코드가 존재한다고 가정했을 때 입력한 데이터를 submit 하기 전에 실행해야 할 프로세스들이 있다고 한다면 어떻게 해야 될까? const submit = (e) => { e.preventDefault() }; 바로 submit 함수를 하나 만들어주고, form 태그에는 onSubmit={submit} 과 같이 입력하면 된다. 이 함수의 구현부를 살펴보면, preventDefault() 라는 함수가 존재하는데 이번 포스트에서는 이 함수에 대해 간략하게 기술해보려고 한다. preventDefault() form 태그에는 submit 버튼이 무조건 존재하기 마련이다. 이 버튼을 클릭하게 되면 브라우저는 기본적으로 폼을 제출하고 페이지를 새로고침하는데 이 때 .. 2023. 3. 10. [REACT] form 데이터를 비동기로 서버에 전달 위와 같이 아이디, 제목, 내용을 입력하고 등록버튼을 누르면 작성한 데이터들을 서버로 전달하는 하나의 폼이 있다고 가정하자. 원초적인 방법으로는 각 입력 태그마다 name이라는 Attribute를 부여해서 값을 전달했는데 React에서는 FormData 라는 객체를 이용해서 서버로 데이터를 전달할 수 있다. 그래서, 이번 포스트에서 다뤄볼 내용은 다수의 데이터들을 서버에 전달할 때 어떻게하면 쉽고 간단하게 비동기 방식으로 처리할 수 있을까에 대한 내용이다. FormData FormData 객체는 폼 요소들의 값을 쉽게 저장하고 서버에 전송할 수 있는 방법을 제공한다. 파일 업로드와 같은 복잡한 데이터를 처리할 수 있다는 장점이 있다. 사용법 // FormData 객체 생성 let formData = ne.. 2023. 3. 10. [REACT] Axios Axios Axios는 React에서 자주 사용되는 HTTP 클라이언트 라이브러리 중 하나이다. (* HTTP 클라이언트 라이브러리 : 서버로부터 데이터를 가져오는데에 사용) Axios를 이용해 서버에 데이터를 요청하고 받을 수도 있고, 서버에 데이터를 보낼 수도 있다. Axios의 장점 Axios는 비동기 HTTP 통신을 수행하는 라이브러리 중 하나이다. 비동기 통신은 요청을 보내고 서버로부터 응답을 받을 때, 프로그램의 실행 흐름을 차단하지 않고, 다른 작업을 수행할 수 있도록 한다. 이를 통해 웹 애플리케이션의 성능을 향상시킬 수 있다. 기본 문법 // GET 요청을 보냅니다. axios.get(url[, config]) // POST 요청을 보냅니다. axios.post(url[, data[, c.. 2023. 3. 10. [REACT] 쿠키와 세션에 값 저장하기 SessionStorage, localStorage 순수 JS로 세션에 값을 저장하기 위해서 sessionStorage 또는 localStorage와 같은 함수를 사용했었는데 react로 프로젝트를 진행할 때는 react 모듈로 session, cookie에 값을 저장할 수 있어야 한다. TO-DO 1. npm을 이용해 react-session-api(세션) / react-cookie(쿠키) 설치 2. 값이 잘 저장 되는지 확인 npm react-session-api / npm react-cookie 위와 같이, 터미널에서 해당 프로젝트 경로에서 npm 명령어를 입력한다. 쿠키를 이용하려면 react-cookie, 세션을 이용하려면 react-session-api를 입력하면 된다. 1. Session 문.. 2023. 3. 9. [REACT] Hooks(2) - useEffect useEffect React에서는 컴포넌트가 mount(화면에 나타남), unmount(화면에서 사라짐), 업데이트 될 때마다 실행되는 코드를 작성할 수가 있는데 이를 효율적으로 관리하기 위해 useEffect라는 hook을 제공한다. 예를 들어, 게시물을 보여주는 컴포넌트가 있다고 가정하였을 때 이 컴포넌트가 처음으로 mount될 때 게시물 데이터를 가져와서 화면에 보여주어야 하는데 이 때 useEffect를 사용하면 컴포넌트가 처음으로 mount될 때 게시물 데이터를 가져오는 코드를 실행할 수 있다. 또 다른 예로는, 사용자가 검색어를 입력했을 때 검색 결과를 가져오는 컴포넌트가 있다고 가정하자. 이 때, useEffect를 사용하면 검색어가 변경될 때마다 다른 검색 결과를 가져오는 코드를 실행할 수.. 2023. 3. 9. [REACT] Hooks(1) - useState 훅(Hook) 이란? 함수 컴포넌트에서 상태 관리, 렌더링 제어, 부작용 처리 등의 기능을 제공한다. 알고 있으면 도움이 될 Hook의 종류로는 useState, useEffect, useContext, useReducer 크게 4가지가 있다. 이것들을 모아 Hooks 라고 일컫는다. Hooks의 장점 ㆍ코드의 가독성 향상 : 클래스 컴포넌트에서는 상태와 생명주기 메서드가 함께 작성 되어, 코드가 복잡해지는 경우가 많은데 Hooks 를 사용하면 상태와 관련된 코드, 생명주기 메서드가 분리되어 가독성이 좋아진다. ㆍ 클래스 컴포넌트의 단점 보완 : 클래스 컴포넌트에서는 this 키워드를 사용해야 하기 때문에 this 바인딩과 관련된 문제들이 발생할 수 있는데, Hooks 를 사용하면 이러한 문제를 해결할 .. 2023. 3. 8. [REACT] Map() java에서의 map과 javascript에서의 map은 키와 값을 가진다는 점에서는 비슷하다고 말할 수 있다. 하지만 java-map은 그 자체가 인터페이스이고, javascript-map()은 그 자체가 함수이다. JS - map javascript에서의 map은 반복문과 같은 역할을 한다고 말할 수 있다. // for loop를 활용한 배열값 확인 const numbers = [ 1, 2, 3 ]; for (let i = 0; i { ret.. 2023. 3. 8. [REACT] Component를 생성하는 여러가지 방법 [REACT] Component 지난 포스트에서 생성한 React 프로젝트인데, 여기서 눈 여겨봐야 할 파일이 세가지가 있다. 바로 index.html, index.js, App.js 이다. 1. index.html 우리가 흔히 알고 있는 html의 구조인데 그 중에서 주목해 itsmesunky.tistory.com 링크를 클릭하면 Component에 대한 개념을 이해할 수 있습니다. 이번 포스트에서는 Component를 생성하는 여러 방법에 대해 기술할 예정이다. 1. 기본 function App(){ return( ) } // end of App() export default App; 2. 함수 선언과 동시에 생성 export default function App(){ return ( ); } // .. 2023. 3. 7. [REACT] Component 지난 포스트에서 생성한 React 프로젝트인데, 여기서 눈 여겨봐야 할 파일이 세가지가 있다. 바로 index.html, index.js, App.js 이다. 1. index.html 우리가 흔히 알고 있는 html의 구조인데 그 중에서 주목해야 할 부분은 이다. 2. index.js 7행의 코드를 살펴보면 ReactDOM의 createRoot() 메소드를 살펴보면 태그 id가 root인 요소가 parameter 값으로 잡혀있다. 바로, 위에서 살펴본 index.html의 이 부분이 Argument인 것이다. 그 div태그로 createRoot() 한 결과값을 root라는 변수에 넣고, render()를 실행했다. render()는 화면을 그려주는 메소드라고 보면 되는데 메소드의 parameter 값은 .. 2023. 3. 7. 이전 1 2 3 4 5 ··· 14 다음
