본문 바로가기

자바스크립트55

자바스크립트 Media Capture and Streams API: MediaStream, MediaStreamTrack # 자바스크립트에서 미디어를 다루는 방법 자바스크립트에서 미디어를 다루는 주요 API는 4가지가 있다. 1. Media Capture and Streams API (=Meida Stream API) - 마이크, 카메라 등을 이용해 들어오는 (Media Stream: 오디오, 비디오, 화면 등) 데이터를 다룬다. 2. MediaStream Recording API - 미디어 스트림(Media Stream: 오디오, 비디오, 화면 등) 데이터를 녹음/녹화 한다. 3. Web Audio API - 오디오 데이터를 처리/분석하는 API이다. - 오디오 데이터로 사용될 수 있는 음원은 MediaStream(마이크 소리 등), 오디오 파일(mp3 등), 컴퓨터로 직접 만든 소리(Oscillator) 등이 있다. 4.. 2021. 12. 3.
자바스크립트 File API 파헤치기: Blob, File, FileReader, FileList, BlobURL 자바스크립트는 바이너리 데이터를 다루기 위한 방법으로 Buffer와 FileAPI를 제공한다. 1. Buffer: 개발자가 메모리 관점에서 바이너리 데이터를 다룰 수 있다. 2. File API: 파일(png, mp3등)이나 입출력장치(마이크, 카메라, 화면 등)의 바이너리 데이터를 다룰 수 있다. ▼이 중 Buffer(ArrayBuffer, TypedArray 등)에 대해서는 아래 글에서 아주 상세하게 정리해 두었다.▼ 자바스크립트 버퍼(Buffer): ArrayBuffer, TypedArray 파헤치기! 이번 글에서는 File API를 정리한다. # FILE API 란? FILE API란 단순 텍스트 데이터 뿐만 아니라 이미지, 오디오, 비디오 등의 대용량 바이너리 데이터를 다루기 위한 API이다. .. 2021. 12. 1.
자바스크립트 버퍼(Buffer): ArrayBuffer, TypedArray 파헤치기! 자바스크립트는 바이너리 데이터를 다루기 위한 방법으로 버퍼(Buffer)를 구현한 ArrayBuffer, ArrayBufferView를 제공한다. 이번 글에서 다룰 내용을 요약하면 아래와 같다. 1. 버퍼(Buffer)란? - 임시로 바이너리 데이터를 저장하기 위한 메모리 공간 혹은 바이너리 데이터 자체 2. ArrayBuffer란? - 자바스크립트에서 구현된 버퍼이다. - 고정된 크기의 메모리 공간에 바이너리 데이터를 저장하는 객체다. 3. ArrayBufferView란? - ArrayBuffer에 저장된 바이너리 데이터에 접근하는 객체다. - TypedArray, DataView 2개가 제공된다. 4. TypedArray란? - ArrayBufferView의 한 종류이다. - 배열 요소의 타입/크기를.. 2021. 11. 30.
[자바스크립트] HTML에서 특정 텍스트가 포함된 요소(태그)를 클릭하는 방법 어떤 분께서 질문을 해주셔서 올리는 글 (댓글로는 코드를 설명하기 힘들어서...블로그 글로 작성한다.) # 질문 내용 - Javascript를 이용해 HTML에서 "특정 텍스트"를 찾아서, 해당 요소를 클릭할 수 있는 방법이 있나요? # 해결 방법 1) HTML의 모든 요소를 취득한다. 2) 해당요소의 TextNode 값이 "특정 텍스트"를 포함하는지 체크 3) "특정 텍스트"를 포함하는 요소에 클릭을 발생시킨다. 단, 주의할 점! 엘리먼트.textContent만 체크하면, 엘리먼트의 자식에 자식이 보유한 textContent까지 체크하여 body, html 등 상위 태그도 선택된다. 따라서, 엘리먼트 본인 소유의 textContent인지 확인하기 위해 아래의 코드로 체크해줘야 한다. 엘리먼트.child.. 2021. 10. 18.
자바스크립트 로드 script 태그: async/defer 비동기 속성 HTML에서 자바스크립트를 사용할 때 1. script태그 내부에 JS코드를 작성하거나, 2. script태그의 src속성을 통해 외부 JS파일을 불러온다. # 기존 JS 로드의 문제점 그런데 브라우저는 HTML, Javascript를 위에서 부터 순차적으로 파싱하는 관계로, HTML이 파싱되지 않은 상태에서 Javascript를 사용할 경우, HTML 엘리먼트를 참조하지 못하는 문제가 발생한다. HTML 입니다. # 기존의 JS 로드 문제 해결 방법 그래서 보통 2가지 방법을 사용했다. 1. body의 최하단에서 javascript 사용 : HTML이 모두 파싱된 다음 Javascript가 HTML태그를 사용한다. HTML 입니다. 2. window.onload 이벤트 리스너 등록 : window 로드.. 2021. 6. 30.
VS CODE: JS 함수 주석 문서화하는 방법(자동완성 툴팁 노출) 자바스크립트 작업을 할 때, 함수에 주석을 달아서 문서화(Doc?)해두면, 함수를 호출할 때 아래처럼 자동완성 툴팁이 노출되어 아주 편하다. 즉, 함수의 파라미터 타입, 반환값에 대한 정보를 보면서 프로그래밍할 수 있게 된다. (작업 환경: VSCode 자바스크립트 개발) # JS 함수의 문서화 주석 만드는 방법 1. 함수 선언 ▶︎ 평소처럼 함수를 만들어준다. ▶︎ 여기서는 id, name을 파라미터로 받아서 반환하는 getInfo 함수를 선언했다. 2. 주석 생성 ▶︎ 함수의 바로 윗부분에서 /** 까지만 입력한다. ▶︎ 아래와 같은 자동완성이 노출되면 엔터를 쳐준다. 3. 파라미터 타입 ▶︎ @param {*} 파라미터 형식의 주석이 자동완성 되면, ▶︎ 대괄호 { } 사이에 number, stri.. 2021. 5. 9.
[자바스크립트] 코드 실행 2단계와 변수/함수 생성 과정 자바스크립트는 소스 코드를 2단계로 실행합니다. 1 단계: 실행 컨텍스트 생성하고, 변수 등을 등록하는 단계 2 단계: 소스 코드를 한 줄씩 실행하는 단계 이 글은 각각의 과정을 최대한 단순화하여 정리해봅니다. (세부적인 과정은 엔진마다 다르고, 훨씬 더 복잡할 것입니다.) 자바스크립트의 메모리 구조 및 콜스택/메모리힙에 대해서는 아래 글을 먼저 참고하시면 좋을듯 합니다. [자바스크립트] 메모리 구조, 원시타입 변수 생성 원리, 가비지컬렉터 [자바스크립트] 콜스택/메모리힙 구조, 데이터 저장/참조 원리 먼저 아래 코드를 실행한다고 가정하자. // 변수 선언문 var a = 10; let b = 20; const c = 30; // 함수 선언문 function func_1(arg){ return arg; .. 2021. 4. 8.
[자바스크립트] 콜스택/메모리힙 구조, 데이터 저장/참조 원리 이 글은 자바스크립트의 콜스택/메모리힙에서 데이터가 어떤 방식으로 저장되고 참조되는지를 정리한다. 기본적인 메모리 구조와 변수 생성 원리에 대해서는 아래 글을 꼭 참고(필수) [자바스크립트] 메모리 구조, 원시타입 변수 생성 원리, 가비지컬렉터 # 콜스택, 메모리힙이란? 자바스크립트는 콜스택과 메모리힙이라는 메모리 구조를 통해 데이터 및 코드 실행을 관리한다. 1. 콜스택(Call Stack) : 원시타입(숫자 등) 데이터가 저장된다. : 실행컨텍스트(Execution Context)를 통해 1) 변수 식별자(이름) 저장, 2) 스코프 체인 및 this 관리, 3) 코드 실행 순서 관리 등을 수행. * 실행 컨텍스트의 상세 구조 및 원리는 이 글의 범위를 넘어가므로 다루지 않습니다. 2. 메모리힙(Mem.. 2021. 4. 7.
[자바스크립트] 메모리 구조, 원시타입 변수 생성 원리, 가비지컬렉터 자바스크립트가 기본 타입 데이터를 저장, 참조하는 과정을 메모리의 관점에서 아주 단순화하여 정리해 본다. # 메모리 구조, 데이터 저장/참조 원리 컴퓨터의 메모리는 1Byte(8bit)크기의 메모리셀 여러개로 구성된다. 각 메모리셀은 본인만의 고유한 주소값을 가지며, 8개의 비트(2진수: 0, 1)로 데이터를 저장한다. 1. 메모리 구성 : 컴퓨터 메모리는 1byte(8bit) 크기의 메모리셀 여러개로 구성된다. 2. 메모리 셀 : 각 메모리셀은 고유한 주소값을 갖으며, 메모리셀(1byte) 단위로 데이터를 저장하고 읽는다. 3. CPU와 메모리 역할 : CPU는 메모리에 저장된 값을 꺼내와 연산을 하고, 연산 결과를 다시 메모리에 저장한다. 4. 데이터 저장 방식 : 용량이 큰 데이터는 메모리셀(1by.. 2021. 4. 7.

티스토리툴바