폴리프레임

1. 이벤트 지원 장치mousemove: 마우스 입력에만 반응하며, 일반적인 데스크탑 환경에서 마우스의 움직임을 추적할 때 사용됩니다.pointermove: 포인터 입력을 포괄하여, 마우스뿐만 아니라 터치, 스타일러스 등 여러 입력 장치에 대해 반응합니다. pointermove는 다양한 장치에서 입력을 통합적으로 처리할 수 있어, 반응형 디자인과 같은 다양한 입력 지원이 필요할 때 유리합니다.2. 브라우저 호환성mousemove: 오랫동안 모든 브라우저에서 지원해왔으며, 모든 마우스 이벤트를 지원하는 환경에서는 무난히 사용할 수 있습니다.pointermove: 최신 브라우저에서 지원되며, 특히 Edge 및 크롬 기반 브라우저는 pointermove와 관련된 기능을 잘 지원하지만, 일부 오래된 브라우저에서..

JavaScript 2024. 10. 28. 12:04

위 함수의 결과를 보려고 아래 코드로 반환값을 확인해 봅니다.const rect = section.getBoundingClientRect();console.log( rect )//////// bottom : 3986height : 1190left : 0right : 1707.3333740234375top : 2796width : 1707.3333740234375x : 0y : 2796  아래 그림은 MDN 의 그림입니다. 여기서 width 와 height 는 아래 그림에서 Element 의 폭과 높이입니다.

JavaScript 2024. 10. 27. 12:43

window.addEventListener("click", fireLaser)또는window.addEventListener("click",()=> fireLaser()) 두 방식 모두 JavaScript에서 window 객체의 "click" 이벤트를 처리하기 위해 fireLaser 함수를 호출하는 역할을 합니다. 하지만 두 방식 사이에는 미묘한 차이가 있습니다. 그 차이는 함수 참조와 익명 함수의 사용에 있습니다. 1. window.addEventListener("click", fireLaser)여기서는 fireLaser 함수의 참조를 전달합니다.클릭 이벤트가 발생하면 fireLaser 함수가 직접 호출됩니다.클릭 이벤트가 발생할 때 브라우저가 fireLaser를 호출할 뿐, 추가적인 함수 호출이 일어나..

JavaScript 2024. 10. 11. 21:13

모든 객체가 이터러블인 것은 아닙니다.  객체 자체가 Symbol.iterator를 구현하지 않아서 for...of 같은 반복문에서 사용할 수 없는 경우에는, 위의 3가지 경우을 이용, 반복하여 내부의 요소에 접근 할 수가 있습니다.  const obj = { a: 1, b: 2 };// for...of 사용 불가 (오류 발생)for (let value of obj) { console.log(value);}// TypeError: obj is not iterable이터러블 내장객체와 달리, 일반 객체를 반복하려면 Object.keys()나 Object.values(), 또는 Object.entries() 같은 메서드를 사용해야 합니다. 이 메서드들은 객체의 속성을 배열로 반환하며, 배열은 이터러블이기 ..

JavaScript 2024. 9. 30. 21:37

JavaScript에서 Iterable(이터러블)이란  반복(iteration)할 수 있는 객체를 의미합니다. 즉, 이터러블 객체는 내부의 요소를 하나씩 순회할 수 있는 구조를 가지고 있으며, for...of 루프 등 반복문을 통해 값을 차례차례 접근할 수 있습니다.이터러블의 핵심 개념은 Symbol.iterator 메서드를 가진 객체라는 점입니다.   이터레이터(iterator)는 이터러블 객체로부터 반환되는 객체로, 값을 하나씩 반환하는 역할을 합니다. 이터레이터는 next() 메서드를 통해 다음 값을 반환하며, 순회가 끝나면 done이 true로 설정됩니다. // 배열은 이터러블입니다.const arr = [10, 20, 30];// 배열의 이터레이터 얻기const iterator = arr[Sym..

JavaScript 2024. 9. 30. 21:08

JavaScript에서 객체 리터럴을 사용할 때, 속성(property) 이름을 표기하는 방식에 대해 두 가지 방법이 있습니다: 1. 식별자(identifier) 이름처럼 속성 이름을 사용하는 경우 (따옴표 없이)let sports = { Baseball: ['Seoul', 'Daegu'], Basketball: [ 'Suwon', 'Busan', 'Ulsan'], Football : 'Seoul'}for (let sport in sports) { console.log(sport)}// Baseball// Basketball// Footballlet obj = { name: "John", age: 30, $salary: 5000, _department: "IT", ..

JavaScript 2024. 9. 30. 20:12

dat.gui와 lil-gui는 둘 다 JavaScript를 사용하여 웹 브라우저에서 인터페이스 컨트롤을 쉽게 추가할 수 있는 라이브러리입니다. 그러나 이 두 라이브러리 간에는 차이점이 있습니다.  dat.guinpm install dat.gui또는 CDN 이용- 상대적으로 더 크고 무거운 라이브러리입니다. 다양한 기능과 옵션을 제공하지만, 크기 면에서는 조금 부담이 될 수 있습니다.- 더 많은 설정과 기능을 제공하지만, 그만큼 약간 더 복잡할 수 있습니다. 개발자가 다양한 사용자 인터페이스 요소를 쉽게 추가하고, 제어할 수 있는 기능을 많이 갖추고 있습니다.- 오랜 역사를 가지고 있고, 다양한 프로젝트에서 사용되어 왔지만, 최근에는 유지보수와 업데이트가 비교적 느립니다.  lil-guinpm inst..

JavaScript 2024. 9. 23. 11:18

불필요하게 빨간 밑줄이 많이 가는 경우, page의 맨 위에 다음과 같이 삽입하면, 모든 빨간 밑줄이 사라집니다./* eslint-disable */ 저의 경우는 VS code 에서 R3F 사용 중에 특히 많이 발생하여 사용하였습니다.

JavaScript 2024. 9. 18. 10:49