encodeURIComponent요약문자를 유니코드 값으로 인코딩합니다. (영문,숫자 제외) URI로 데이터를 전달하기 위해서 문자열을 인코딩문법encodeURIComponent(string)인자인자명데이터형필수/옵션설명stringstring필수인코딩할 문자열 반환값string, 인코딩된 문자열을 반환설명encodeURIComponentURI(Uniform Resource Identifier) 구성 요소를 인코딩하기 위해 JavaScript에서 사용되는 함수입니다. 이는 URL 내에 특수 문자가 포함된 데이터를 포함하려는 경우 특히 유용합니다.작동 방식은 다음과 같습니다.인코딩 : URI 구성 요소의 특정 문자를 해당 이스케이프 시퀀스로 바꿉니다. 이러한 이스케이프 시퀀스는 퍼센트 기호(%)와 문자의..
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..
HEX COLOR CODE 색상코드 앞에 #과 뒤에 붙는 6자리 16진수(hex)로 나타내는 것으로 16진수에서 사용하는 숫자는 0부터 9까지의 숫자와 A, B, C, D, E, F입니다. HEX COLOR CODE 로 나타낼수있는 색상의 수는 16의 6승인 16,777,216가지입니다. 랜덤 컬러 생성 함수 function getRandomColor() { var letters = '0123456789ABCDEF'; var color = '#'; for (var i = 0; i < 6; i++ ) { color += letters[Math.floor(Math.random() * 16)]; } return color; } 해당 함수는 임의의 16진수 (hex) 색상 코드를 생성합니다. letters는 1..
자바스크립트에서 JSON의 키와 값을 다루는 다양한 메소드가 있습니다. 다음은 그 중 몇 가지를 정리하였습니다. Object.keys() Object.keys() 메소드는 객체의 키를 배열로 가져옵니다. JSON 객체의 키를 가져올 때 사용됩니다. const jsonObject = { name: "John Doe", age: 30, }; const keys = Object.keys(jsonObject); console.log(keys); 출력 : // [object Array] (2) ["name","age"] Object.values() Object.values() 메소드는 객체의 값을 배열로 가져옵니다. JSON 객체의 값을 가져올 때 사용됩니다. const jsonObject = { name: "J..
event.preventDefault() event.preventDefault() 메서드는 이벤트의 기본 동작을 취소하는 JavaScript 메서드입니다. 예를 들어 사용자가 필수 필드를 모두 작성하지 않고 양식을 제출하지 못하도록 이벤트의 기본 작업을 방지할 수 있습니다 e.preventDefault()다음은 이 방법을 사용하는 방법에 대한 몇 가지 예입니다 . 필수 필드를 모두 작성하지 않은 채 양식이 제출되는 것을 방지합니다. 링크를 따라가는 것을 방지합니다. 파일이 업로드되는 것을 방지합니다. 드래그 앤 드롭 작업이 완료되는 것을 방지합니다. [예제1] a태그 링크로 이동하는 기본동작을 방지 이동 $("#urlConnect").click(function(){ console.log(event); /..
