썬키의 개발노트

SpeechSynthesisUtterance - Web APIs | MDN The SpeechSynthesisUtterance interface of the Web Speech API represents a speech request. It contains the content the speech service should read and information about how to read it (e.g. language, pitch and volume.) developer.mozilla.org API에 대한 자세한 설명은 위의 링크에서 확인할 수 있습니다. SpeechSynthesisUtterance API 란? 해당 API는 웹 브라우저가 기본적으로 제공하는 API인데, 이 API를 사용하면 inp..

// JSX return ( ) 만약, 위와 같은 코드가 존재한다고 가정했을 때 입력한 데이터를 submit 하기 전에 실행해야 할 프로세스들이 있다고 한다면 어떻게 해야 될까? const submit = (e) => { e.preventDefault() }; 바로 submit 함수를 하나 만들어주고, form 태그에는 onSubmit={submit} 과 같이 입력하면 된다. 이 함수의 구현부를 살펴보면, preventDefault() 라는 함수가 존재하는데 이번 포스트에서는 이 함수에 대해 간략하게 기술해보려고 한다. preventDefault() form 태그에는 submit 버튼이 무조건 존재하기 마련이다. 이 버튼을 클릭하게 되면 브라우저는 기본적으로 폼을 제출하고 페이지를 새로고침하는데 이 때 ..

위와 같이 아이디, 제목, 내용을 입력하고 등록버튼을 누르면 작성한 데이터들을 서버로 전달하는 하나의 폼이 있다고 가정하자. 원초적인 방법으로는 각 입력 태그마다 name이라는 Attribute를 부여해서 값을 전달했는데 React에서는 FormData 라는 객체를 이용해서 서버로 데이터를 전달할 수 있다. 그래서, 이번 포스트에서 다뤄볼 내용은 다수의 데이터들을 서버에 전달할 때 어떻게하면 쉽고 간단하게 비동기 방식으로 처리할 수 있을까에 대한 내용이다. FormData FormData 객체는 폼 요소들의 값을 쉽게 저장하고 서버에 전송할 수 있는 방법을 제공한다. 파일 업로드와 같은 복잡한 데이터를 처리할 수 있다는 장점이 있다. 사용법 // FormData 객체 생성 let formData = ne..

Axios Axios는 React에서 자주 사용되는 HTTP 클라이언트 라이브러리 중 하나이다. (* HTTP 클라이언트 라이브러리 : 서버로부터 데이터를 가져오는데에 사용) Axios를 이용해 서버에 데이터를 요청하고 받을 수도 있고, 서버에 데이터를 보낼 수도 있다. Axios의 장점 Axios는 비동기 HTTP 통신을 수행하는 라이브러리 중 하나이다. 비동기 통신은 요청을 보내고 서버로부터 응답을 받을 때, 프로그램의 실행 흐름을 차단하지 않고, 다른 작업을 수행할 수 있도록 한다. 이를 통해 웹 애플리케이션의 성능을 향상시킬 수 있다. 기본 문법 // GET 요청을 보냅니다. axios.get(url[, config]) // POST 요청을 보냅니다. axios.post(url[, data[, c..

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 문..