[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] ResizeObserver

ResizeObserver- DOM 요소의 크기 변화를 감지하는 웹 API이다.1. ResizeObserver 생성const resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]): void => { entries.forEach(entry => { const { width, height } = entry.contentRect as { width: number; height: number }; console.log(width, height); });}); 2. 요소 크기 변화 관찰 시작- observe() 함수를 사용해 요소의 크기가 변화할 때마다 콜백 함수 실행const element = documen..

• format_list_bulleted Front-End/JavaScript
• · 2024. 12. 9.
• 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

리액트 프로젝트 생성

❗리액트 프로젝트 생성 전 Node.js 설치 필요❗환경: visual studio code 1. 프로젝트 폴더 생성Open Folder or Clone Git Repository를 통해 프로젝트를 생성할 폴더를 연다. 2. 프로젝트 생성생성된 폴더를 열고 상단 메뉴바에서 Teminal > New Terminal을 선택한다.  아래의 명령어를 입력해 프로젝트를 생성한다.npx create-react-app [프로젝트명] [--template typescript]   3. 프로젝트 실행아래의 명령어를 입력해 프로젝트를 실행한다.cd [프로젝트명]npm start my-react-app/├── node_modules/├── public/│ └── index.html├── src/│ ├── App.ts..

• format_list_bulleted Front-End/React.js
• · 2024. 3. 21.
• textsms

[JS] var, let, const

자바스크립트는 변수를 선언할 때 별도로 자료형 명시하지 않는다.변수에 입력되는 값에 의해 자료형이 판별되기에수나 객체를 선언할 때는 ES5 전에는 「var」라는 키워드를 사용했다.Number ➡️ var int_data = 1;String ➡️ var character1 = 'a';Boolean ➡️ var result2 = true;Array ➡️ var array1 = [1, 2, 3];그러나 「var」 의 문제점을 있어서 이를 보완할 「let」과 「const」키워드가 도입되었다.⚠️  「var」 주의사항1. Function Scope변수를 선언한 함수 내에서만 유효한 함수 스코프를 가지기 때문에 블록 스코프를 무시한다.function exampleScope() { if (true) { var..

• format_list_bulleted Front-End/JavaScript
• · 2024. 2. 22.
• textsms

[JS] JavaScript Engine

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

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