JS4 [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. [Vue.js] Datepicker를 이용한 캘린더 만들기 - 데이터 바인딩 및 오늘 날짜로 설정하기 먼저 datepicker를 다운받아야 하는데요 npm install vue3-datepicker 를 해서 패키지를 받아줍니다. 다음은 본론인 코드로 넘어가겠습니다. 입사일자 ... 이렇게 를 만들어 줍니다. - 상황에 따라 변형은 자유롭게 하면 됩니다. import {ref} from 'vue'; import Datepicker from 'vue3-datepicker'; import axios from 'axios'; let picked = ref(new Date()); // 오늘날짜 const locale = reactive(ko); const inputFormat = ref('yyyy-MM-dd'); export default { ... 변수 선언을 해줍니다. 조회할 때 데이터 바인딩 하는 방법입니다.. 2023. 12. 7. [Vue.js] input 태그에 데이터 바인딩하기(feat. v-model, type, :value) 먼저 공식 사이트의 내용을 들고와보자면 메시지: {{ message }} 출저: https://v2.ko.vuejs.org/v2/guide/forms.html#%EB%AC%B8%EC%9E%90%EC%97%B4 이런식으로 생긴 것이 나오는 것을 알 수 있습니다. v-model 을 고집하며 제가 만든 코드는 이러한 코드였습니다. 이러한 코드의 문제점은 1글자만 수정해도 커서가 끊기는 현상이였습니다. 10000이 있는데 11111로 바꾸고자하면 다 지우고 11 다시 클릭해서 111 다시 클릭해서 1111 ... 이런식으로 동작을 하는 것입니다. 이것 저것을 시도해 본 결과 type을 text로 선언하고 :value를 이용하여 데이터를 바인딩해주면 제대로 동작하는 것을 확인할 수 있었습니다. 단순 조회용도라면 .. 2023. 12. 5. 이전 1 다음
