[JS] OffscreenCanvas

OffscreenCanvas Canvas API는 보통 메인 스레드에서 실행한다. 캔버스 애니메이션과 렌더링과 관련된 계산은 메인 스레드의 부하를 불러오기도 한다. 이를 개선하기 위해 화면 밖에서 렌더링할 수 있는 캔버스를 제공하고 DOM과 Canvas API를 분리하여 canvas 요소가 DOM에 완전히 의존하지 않도록 한다. 1. HTML에서 요소 생성  2. 웹 워커 생성 및 OffscreenCanvas 전달(main.js) postMessage를 사용할 때 transfer 옵션을 보내야 하는 이유는 OffscreenCanvas 객체를 웹 워커로 소유권을 이전하기 위해서다. JavaScript에서 객체는 기본적으로 복사로 전달된다. 하지만 OffscreenCanvas는 복사할 수 없고, 대신 전송..

• format_list_bulleted ☀️Front-End/📗JavaScript
• · 2024. 12. 26.
• textsms

[JS] Web Worker

Web Worker- 웹 애플리케이션이 메인 스레드와 별도로 스크립트를 백그라운드에서 실행할 수 있게 하는 작업이다. ex) 모니터링 실시간 데이터 처리 ➡️ 1초마다 메인 스레드에서 실시간 데이터를 처리한다면 데이터가 많아질수록 앱은 느려지고 UI는 지연된다.😼Main Thread- 브라우저가 기본적으로 실행하는 UI 스레드- Web Worker를 생성하고 통신을 주도🐭Worker Thread- 메인 스레드가 생성한 백그라운드 스레드- 독립된 환경에서 작업하며, 메인 스레드와 메시지 교환으로 통신 1. Web Worker 생성- 설정된 시간(1초)마다 refresh token을 Main Thread로 보내는 Web Worker이다.- selft를 사용하는 이유는 Worker 객체 스스로에게 들어오는..

• format_list_bulleted ☀️Front-End/📗JavaScript
• · 2024. 11. 18.
• textsms

[JS] JavaScript Engine

자바스크립트 엔진  자비스크립트 작성하고 해석해서 실행하는 것으로 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터다. 자바스크립트 코드를 한줄씩 읽어가며 컴퓨터가 알아들을 수 있는 기계어로 번역하는 것이다. * 프로그램: 특정 작업을 수행하는 명령어들의 집합* 인터프리터: 코드를 한줄씩 내려가며 명령어 처리 자바스크립트 엔진 원리 엔진은 메모리 힙과 호출 스택으로 구성되어 있다.호출 스택을 사용하여 실행 중인 코드의 흐름을 알 수 있다. 메모리 힙- 동적으로 할당된 메모리가 저장되는 공간- 객체, 함수, 배열 등이 할당- 메모리는 자동으로 관리 호출 스택- 함수 호출 관련 정보를 저장하는 공간- 함수 호출 => 호출 스택에 추가 => 함수 실행 완료 => 호출 스택에서 제거 자바스크립트 엔진의 종류..

• format_list_bulleted ☀️Front-End/📗JavaScript
• · 2023. 10. 23.
• textsms

[JS] ECMAScript

자바스크립트가 나온 이후 인기를 끌자, IE 말고도 다양한 브라우저들이 개별적으로 자바스크립트 문법을 만든다. 그 결과로, 각 브라우저 간 호환성을 위해 개발자들은 많은 고생하게 된다. 자바스크립트를 개발한 넷스케이프 사는 ECMA International(국제 표준화 기구)에 표준화를 요청했고, 1997년 7월에 ECMAScript가 완성된다.   ECMAScript ECM-262 기술 규격에 따라 표준화된 스크립트 언어이다.스크립트 언어는 자바스크립트, 액션 스크립트, J 스크립트 등이 있다.* 스크립트 언어: 컴파일이나 링크 단계 없이 인터프리터에 의해 바로 코드를 실행하는 언어 * 컴파일(소스코드를 0,1로 이루어진 기계어로 번역)* 링크(소스파일, 라이브러리 하나로 병합) * 인터프리터: 소스..

• format_list_bulleted ☀️Front-End/📗JavaScript
• · 2023. 10. 17.
• textsms

[JS] JavaScript

자바스크립트(Javascript)는 스크립트 언어이자 프로토타입 기반의 프로그래밍 언어이다. HTML은 웹 페이지의 기본 구조를 담당하고, CSS는 디자인을 담당하며, 자바스크립트는 웹 페이지의 동작을 담당한다. 자바스크립트란 프로토타입 기반 객체지향 언어이다.자바와 혼동되는 경우가 많으나 자바는 클래스 기반 객체지향 언어이다.JavaScript와 JAVA의 공통점: 객체지향class Dog { constructor(name) { this.name = name; } bark() { console.log(`${this.name} is barking!`); }}const myDog = new Dog("Buddy");myDog.bark(); //Buddy is b..

• format_list_bulleted ☀️Front-End/📗JavaScript
• · 2023. 5. 31.
• textsms