[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

유클리드 호제법 - 최대 공약수 구하는 알고리즘

- 큰 수를 작은 수로 나누는 과정을 반복하며, 나머지가 0이 될 때 나누는 수가 최대공약수가 되는 알고리즘// 방법1. 반복문const gcd = (num1, num2) => { let r; while(num2 > 0) { r = num1 % num2; num1 = num2; num2 = r; } return num1;}// 방법2. 재귀 함수const gcd = (num1, num2) => (num2 > 0 ? gcd(num2, num1%num2) : num1); ex) GCD(18, 12) = 6a = 18, b = 12 ➡️ r = 6a = 12, b = 6 ➡️ r = 0a = 6, b = 0 ➡️ X

• format_list_bulleted Algorithm
• · 2024. 12. 16.
• 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

npm ERR! -node_modules 재설치 중 에러

환경- node v20.11.0- npm v9.6.0 에러 현상- node_modules 재설치 중 아래와 같은 에러가 나타난다.npm ERR!code ERESOLVE npm ERR! ERESOLVE could not resolvenpm ERR!npm ERR! While resolving: @vue/eslint-config-prettier@6.0.0npm ERR! Found: eslint-plugin-prettier@4.2.1npm ERR! node_modules/eslint-plugin-prettiernpm ERR! dev eslint-plugin-prettier@"^4.0.0" from the root projectnpm ERR! npm ERR! Could not resolve dependency:n..

• format_list_bulleted Error
• · 2024. 3. 26.
• 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