Web Programming/JavaScript7 [javascript] audioRecorder 만들기 / js 함수로 녹음저장 만들기 패키지를 사용하지 않고, 단순 코드로만 개발한다는 점을 먼저 말씀드리고 시작하겠습니다. // 녹음된 오디오를 저장할 변수 let audioChunks = []; let mediaRecorder; 먼저 오디오를 저장할 변수를 선언해줍니다. audioChunks 는 음성녹음을 담을 변수이고, mediaRecorder는 녹음 기능 자체를 선언할 변수입니다. audioRecorder.js // 오디오 녹음 시작 함수 function startRecording() { navigator.mediaDevices.getUserMedia({ audio: true }) .then(stream => { // mediaRecorder 초기화 mediaRecorder = new MediaRecorder(stream); medi.. 2024. 4. 2. [Html5, JavaScript] image resizing (이미지 리사이징) HTML5와 Vanilla.js로 이미지를 넣고, 크기를 리사이징하는 걸 만들어보겠습니다. index.html script를 작성하기 전에 html은 간단한 input 버튼만 있는 화면만 만들었습니다. 이제 script를 작성해줄건데요 resizeImage 함수를 이용해서 파일을 리사이징 하는 걸 만들어봤습니다. html화면을 열어주면 이러한 모양이 되구요 파일을 선택해서 올려주면 이런식으로 이미지 리사이징된 모습을 볼 수 있습니다. 2024. 2. 7. [React + SpringSecurity + DB] 로그인 구현하기 (frontend) 리엑트와 스프링을 연결할 때 리엑트 설정을 하셨을 겁니다. axiosInstance.jsx를 만들었다던가, App.jsx를 수정했다던가 저는 둘다 수정했기 때문에 전부 있는 상황에서 구현하겠습니다. App.jsx function App() { useEffect(() => { // 서버에서 렌더링된 HTML 문서에서 CSRF 토큰을 가져오는 로직 const csrfTokenMeta = document.querySelector("meta[name='_csrf']"); // CSRF 토큰이 존재하는지 확인 후 요청 헤더에 추가 if (csrfTokenMeta) { const csrfToken = csrfTokenMeta.content; axios.defaults.headers.common["X-XSRF-TOK.. 2024. 1. 18. [Kendo Vue + SpringBoot + Oracle] 동적인 메뉴 아코디언 만들기(Creating a dynamic menu accordion) kendo Vue의 treelist를 이용하여 만드는 예제입니다. https://www.telerik.com/kendo-vue-ui/components/treelist/get-started/ Vue TreeList Component Getting Started - Kendo UI for Vue Docs & Demos vue 2.6.11 or 3.0.0Contains the functionality necessary to define Vue components.@progress/kendo-licensingContains the internal infrastructure related to licensing.@progress/kendo-svg-iconsContains the SVG icons for the .. 2024. 1. 3. 이전 1 2 다음
