MediaRecorder는 브라우저의 오디오/비디오 스트림(MediaStream)을 받아서 녹화하고, 그 결과를 Blob(데이터 조각) 형태로 이벤트를 통해 내보내는 객체 마이크 → MediaRecorder → Blob(오디오 파일) 주요 이벤트 흐름단계메소드/이벤트역할1new MediaRecorder(stream, options)MediaRecorder 객체 생성2recorder.start([timeslice])녹음 시작. 선택적으로 timeslice(ms 단위)로 chunk 단위 지정 가능3recorder.ondataavailableBlob 데이터가 준비될 때마다 호출4recorder.stop()녹음 중단 요청5recorder.onstop실제로 녹음이 완전히 종료된 후 호출 이벤트 발생 순서 ..

onaudioprocess 이벤트와 inputBuffer.getChannelData()는 Web Audio API에서 실시간 오디오 데이터를 읽고 분석할 때 꼭 알아야 할 핵심 개념입니다.이번 글에서는 이 두 가지가 어떻게 동작하고, 어떻게 활용할 수 있는지를 예제와 함께 알아보겠습니다. 🔁 onaudioprocess와 event.inputBufferonaudioprocess 이벤트는 오디오 데이터가 처리될 때마다 자동으로 호출됩니다.그때 event.inputBuffer 안에는 현재 입력된 오디오 프레임(버퍼) 이 들어 있습니다. 이 inputBuffer는 AudioBuffer 객체이고, 여기에는 오디오 데이터가 채널별로 저장되어 있습니다.따라서 getChannelData(channelIndex)를 ..

웹에서 마이크 입력을 받아서 실시간으로 오디오 데이터를 분석하거나 가공하려면Web Audio API의 두 가지 기능을 꼭 알아야 합니다.바로 👉 createMediaStreamSource() 와 createScriptProcessor() 입니다. 🎙️ 1. createMediaStreamSource(stream)✅ 역할createMediaStreamSource()는getUserMedia()로 얻은 MediaStream(마이크 입력) 을 Web Audio API의 AudioNode로 변환해주는 메서드입니다. 즉, 브라우저의 마이크 입력을 Web Audio 파이프라인으로 끌어오는 역할이에요. 💡 예시 코드const audioContext = new AudioContext();navigator.med..

요즘 자바스크립트로 테이블을 만들면서 cloneNode()로 행을 추가하고, 그 안에 있는 input 값들을 초기화해주는 작업을 하고 있었는데 ...자꾸 체크박스만 요상하게 초기화가 안되는 문제가 발생했당 삐용삐용.. 🚨 디버깅 시작! 체크한 상태에서 행을 추가해보면 input.checked = false; 를 했을 때는 겉보기에는 체크가 풀려있지만 F12로 확인했을 때는 checked 속성이 여전히 남아있다 ?! 🤔 분명히 해제했는데 왜? 하지만 ! input.removeAttribute("checked"); 를 했을 때는 F12로 보면 checked 속성은 사라져있는데실제로 화면에서는 여전히 체크가 되어있는 상태? 🧠 결론: 속성(Attr..

https://apexcharts.com/ ApexCharts.js - Open Source JavaScript Charts for your websiteApexCharts is a a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web pages.apexcharts.com    원하는 차트 선택해서 들어가면    하단에 있는 코드 복사!    get started - creating your first chart     edit on codepen 클릭!     여기서 아까 복사한 코드 js에 넣어서 테스트해볼 수 있당

ready() : DOM이 완전히 로드된 후 호출 $(document).ready(function(){})$(function(){}) 외부 리소스 및 이미지 로딩과 상관없이 DOM만 로드되면 바로 실행중복 사용 가능하며 선언 순서대로 실행    onload() : 페이지 내의 모든 리소스(이미지, 스크립트, css 등)가 완전히  로드된 후 호출 $(window).onload(function(){})window.onload()=function(){} 한 페이지에서 하나의 window.onload()함수만 사용 가능가장 나중에 호출된 함수만 적용페이지 안의 이미지나 외부 파일이 로드될때까지 기다린 후 실행되어 로딩시간이 길어질 수 있음     실행 순서DOM 생성 → ready() → 이미지를 포함한 요소..

수민 만만세2 미리보기  이미지를 브라우저로 옮겼을때 창 열리는 것 막기function jcOver(){    event.preventDefault();}function jcDrop(){    event.preventDefault();}window.addEventListener("dragover", jcOver);window.addEventListener("drop", jcOver);    원래는 이렇게 창이 열리지만 preventDefault로 막았당   사진 드롭function jcDrop(){    event.preventDefault();    mgJS.innerHTML="";    let jcFiles = event.dataTransfer.files;    console.log("끌고 온 파일들..

displayflex: 아이템들을 가로 방향 혹은 세로방향으로 배치할 수 있음(1차원)grid: 컬럼과 로우의 비율이나 크기를 지정(2차원)none: 요소를 렌더링하지 않음. 영역 차지 xinline: 줄 바꿈되지 않는 한줄짜리로 width, height, 여백 지정 x (span, a, b, i, img 태그)block: 가로 영역을 모두 차지하며 항상 줄바꿈이 되어 새로운 라인에서 시작 (div, p, h, li, form 태그)inline-block : 요소 자체는 inline처럼 동작하지만(줄바꿈x) 해당 요소 내부에서는 블록 요소처럼 동작(크기나 여백을 지정할 수 있음) positionstatic(기본값) : 기본값으로 배치를 브라우저에게 맡기겠다는 의미 (브라우저 너에게 배치를 맡길겡) re..