Blob, File, URL File, Blob, 그리고 URL은 웹 애플리케이션에서 파일과 데이터를 표현하고 다루는 데 사용되는 개념들이다. Blob Blob은 일련의 데이터를 나타내는 객체다. Blob은 Binary Large Object의 약자로, 텍스트나 이미지, 오디오, 비디오 등과 같은 다양한 종류의 데이터를 처리할 수 있다. File 객체는 Blob 객체의 하위 클래스로 볼 수 있다. File File은 사용자의 로컬 파일 시스템에서 선택한 파일을 나타내는 객체다. 일반적으로 파일 업로드나 파일 조작을 위해 사용된다. File 객체는 Blob 객체를 상속하며, 파일의 이름, 크기, 타입 등의 추가적인 정보를 가지고 있다. File Blob 설명 파일 데이터 컨테이너 및 추가 메타데이터 포함 ..

현재시간을 한국 시간으로 표시하기 세계 각지에는 협정 세계시（UTC）를 기준으로 하여 그 국가나 지역에서 공통적으로 사용하는 표준시가 있습니다. 대한민국 표준시는 KST (Korea Standard Time) 라고 합니다. KST는 UTC(협정 세계시)보다 9시간 빠릅니다. 예를 들어 한국이 오전 9시일 때 영국은 오전 0시입니다. newDate()를 사용해서 가져온 현재날짜와 시간은 기본적으로 사용자의 PC에 설정된 표준 시간대를 기준으로 표시합니다. 즉 사용자의 위치에 따라 다른 결과를 반환하는 것입니다. 예를 들어, 한국에서 newDate() 함수를 실행하면 KST 기준의 시간 정보가 반환되고, 미국에서 실행하면 PST(Pacific Standard Time) 기준의 시간 정보가 반환됩니다. 그러므..

navigator.getUserMedia() 아래 코드는 사용자에게 오디오 접근 권한을 허용 받는 코드인데, if(!navigator.getUserMedia) navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; if(navigator.getUserMedia){ navigator.getUserMedia({audio:{echoCancellation: false, noiseSuppression: false, autoGainControl: false, mozNoiseSuppression: false, mozAutoGai..

부모창에서 자식창으로 값 전달 방법 1. URL 파라미터를 통한 값 전달 부모창 window.open("child.html?data=value"); 자식창 var data = new URLSearchParams(window.location.search).get("data"); console.log(data); // "value" 2. window.opener를 통한 값 전달 부모창 var data = "value"; var childWindow = window.open("child.html"); 자식창 window.opener.data = "new value"; 3. postMessage를 통한 값 전달 부모창 var childWindow = window.open("child.html"); // mess..

JavaScript에는 '없음'을 나타내는 값이 두 개 있는데, 바로 null과 undefined입니다. 두 값의 의미는 비슷하지만, 각각이 사용되는 목적과 장소가 다릅니다. undefined 값이 대입되지 않은 변수나 속성을 나타냅니다. 즉, 변수를 선언만 하고 값을 할당하지 않은 경우, 또는 객체 내부에 존재하지 않는 프로퍼티를 접근하는 경우 undefined가 반환됩니다. // 변수 선언만 하고 값을 할당하지 않은 경우 let name; console.log(name); // undefined // 객체 내부에 존재하지 않는 프로퍼티를 접근하는 경우 const user = { name: "John Doe", age: 30, }; console.log(user.address); // undefined..

출처: 인파블로그 https://inpa.tistory.com/ 🌐 브라우저 이벤트 종류 & 사용법 총정리 브라우저 이벤트 란? 이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 이벤트란 예를 들어 사용자가 버튼을 클릭했을 때, 웹페이지가 로드되었을 때와 같은 것인데 이것은 DOM 요소와 관련 inpa.tistory.com 브라우저 이벤트 브라우저 이벤트는 웹 브라우저에서 발생하는 사건을 의미합니다. 사용자가 웹 페이지와 상호 작용할 때 이벤트가 발생할 수 있습니다. 예를 들어, 사용자가 버튼을 클릭하면 클릭 이벤트가 발생합니다. 브라우저 이벤트는 DOM 요소에 연결할 수 있습니다. (DOM 요소는 HTML 요소, CSS 요소, JavaScript 객체 등을 포함합니다.) 이벤트가 연결된 DOM..

clientX, clientY 위 메서드는 클라이언트 영역 내의 가로,세로 좌표를 제공합니다. 여기서 클라이언트 영역은 현재 보이는 브라우저 화면이 기준이 됩니다. clientX : 브라우저 페이지에서의 X좌표 위치를 반환하나 스크롤은 무시하고 해당 페이지의 상단을 0으로 측정합니다. clientY : 브라우저 페이지에서의 Y좌표 위치를 반환하나 스크롤은 무시하고 해당 페이지의 상단을 0으로 측정합니다. offsetX, offsetY 위 메서드는 이벤트 대상이 기준이 됩니다. ( 화면 중간에 있는 박스 내부에서 클릭한 위치를 찾을 때 해당 박스의 왼쪽 모서리 좌표가 0이됩니다. 화면의 기준이 아닙니다) 전체 문서를 기준으로 합니다(스크롤 화면 포함) offsetX : 이벤트 대상 객체에서의 상대적 마우스..

wavesurfuer.js wavesurfuer.js 는 Web Audio API 및 HTML5 Canvas를 사용하는 사용자 정의 가능한 파형 오디오 시각화 라이브러리입니다. 브라우저에서 오디오 데이터와 시각적으로 상호 작용할 수 있는 유연한 방법을 제공합니다. 시작하기 패키지를 설치하고 가져온다 npm install --save wavesurfer.js import WaveSurfer from 'wavesurfer.js' 또는 라이브러리를 전역 WaveSurfer변수로 내보내는 UMD 스크립트 태그를 삽입하세요. wavesurfer 인스턴스를 생성하고 다양한 옵션을 전달합니다 . const wavesurfer = WaveSurfer.create({ container: '#waveform', waveC..