폴리프레임

Methods1. URL.createObjectURL(blob)브라우저 환경에서 Blob 객체나 File 객체를 나타내는 임시 URL을 생성하는 데 사용됩니다. 이를 통해 바이너리 데이터를 직접 표시하거나 다운로드할 수 있는 URL을 만들 수 있습니다. 이 URL은 메모리에 존재하며, 브라우저를 닫거나 명시적으로 해제하지 않는 한 유효합니다.const inputElement = document.querySelector('input[type="file"]');inputElement.addEventListener('change', (event) => { const file = (event.target as HTMLInputElement).files?.[0]; if (file) { const obje..

JavaScript 2025. 2. 9. 18:54

document.readyState는 문서의 현재 상태를 나타내는 속성입니다. 다음 세 가지 값이 있습니다:"loading": 문서가 아직 로드 중입니다."interactive": 문서가 로드되었지만, 리소스(이미지, 스타일 등)가 아직 로드되지 않았습니다."complete": 문서와 모든 리소스가 로드되었습니다.여기서 "interactive", 즉 document.readyState === "interactive" 와  같은 속성으로 이벤트 핸들러에서 사용하는 "DOMContentLoaded" 가 있습니다.  if (document.readyState === "interactive" ) doSomthing();// 위와 같은 이벤트 리슨너document.addEventListener("DOMConte..

JavaScript 2025. 1. 8. 09:37

Math.sin()주어진 각도의 사인(sine) 값을 반환합니다.라디안 단위의 각도를 인자로 받습니다. (각도를 라디안으로 변환하려면 Math.PI를 사용할 수 있습니다.)-1과 1 사이의 실수 값을 반환합니다. 사인 함수는 삼각법에서, 주어진 각도의 y좌표를 나타냅니다.즉, Math.sin()은 각도의 삼각 함수 값을 계산하며, 실수 범위의 결과를 반환합니다.console.log(Math.sin(0)); // 0console.log(Math.sin(Math.PI / 2)); // 1 (90도)console.log(Math.sin(Math.PI)); // 0 (180도)Math.sign()주어진 숫자의 부호를 반환합니다.숫자 하나를 인자로 받습니다.반환값은 양수일 경우는 1, 음수일 경..

JavaScript 2024. 12. 25. 01:26

mouseMove다루는 장치: 마우스지원하는 브라우저: 모든 주요 브라우저에서 지원이벤트 속성: clientX, clientY, pageX, pageY 등용도: 대부분의 마우스 이동 동작을 추적하는 데 사용됩니다.const mousePosition = new THREE.Vector2();window.addEventListener('mousemove', (e)=>{ mousePosition.x = (e.clientX / window.innerWidth) * 2 - 1; mousePosition.y = -(e.clientY / window.innerHeight) * 2 + 1 ;})pointermove다루는 장치: 마우스, 터치, 스타일러스 펜 등 다양한 입력 장치지원하는 브라우저: 최신 브라우저에서 지..

JavaScript 2024. 12. 17. 10:20

eslint의 효용성은 말할 필요가 없을 정도로 중요하지만, 최근의 라이브러리 사용, react-three/fibre 등을 사용시에는 거슬리는 것 중에 하나 입니다. 다음과 같은 방법으로 대처 할 수 있습니다. 1. 특정코드 라인 무시하기: 코드 라인 위에 다음과 같은 주석을 추가합니다// eslint-disable-next-lineconst myVariable = 'value'; 2. 특정 블록 무시하기: 블록 주석을 사용하여 코드 블록 전체를 무시합니다/* eslint-disable */const myVariable = 'value';console.log('This will not trigger any ESLint rules.');/* eslint-enable */ 3. 파일 전체를 무시하기: 파일 ..

JavaScript 2024. 12. 6. 07:27

React에서는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 props를 사용합니다. 이때  prop-types는 props가 예상된 데이터 타입과 일치하는지 확인하는 데 도움을 줍니다.  즉, prop-types 패키지는 React 컴포넌트의 props 타입을 검증하기 위해 사용됩니다. TypeScript를 사용하지 않는 React 프로젝트에서 유용합니다. 아래 명령으로 별도의 설치가 필요합니다.npm install --save prop-types사용예제 - 일반import React from 'react';import PropTypes from 'prop-types';const MyComponent = ({ name, age, isActive }) => ( {name} Age: ..

JavaScript 2024. 11. 28. 07:42

sphereIdx = (sphereIdx + 1) % spheres.length; const spheres = ['a', 'b', 'c']; // 길이 3let sphereIdx = 2;sphereIdx = ( sphereIdx + 1 ) % spheres.length; // 결과:0 (3 % 3 = 0)console.log(sphereIdx); // 0이 코드는 sphereIdx를 1 증가시키고, 그 값을 spheres.length로 나눈 나머지를 결과로 설정합니다.인덱스가 리스트의 길이를 초과하지 않도록 순환합니다. 즉, sphereIdx가 리스트의 끝에 도달하면 다시 0으로 돌아갑니다. sphereIdx = (sphereIdx + 1); const spheres = [ 'a', 'b', 'c' ];..

JavaScript 2024. 11. 21. 20:40

requestPointerLock() 메서드는 웹 애플리케이션에서 마우스 포인터를 고정하거나 잠그는 데 사용됩니다. 이를 통해 사용자가 브라우저 경계를 넘어 마우스 포인터가 이동하지 않도록 하고, 마우스 이동 이벤트를 연속적으로 받을 수 있게 됩니다. 주로 3D 게임이나 인터랙티브 애플리케이션에서 사용됩니다. 3D 게임: 마우스를 자유롭게 움직여 시점을 변경하거나 캐릭터를 제어하는 데 유용합니다.인터랙티브 애플리케이션: 정밀한 마우스 제어가 필요한 그래픽 편집기나 시뮬레이션 프로그램에서 사용됩니다.커서 고정: 특정 작업 중에 마우스 커서를 화면의 특정 위치에 고정할 수 있습니다.document.body.requestPointerLock();document.addEventListener('pointerlo..

JavaScript 2024. 11. 21. 20:15