폴리프레임

requestAnimationFrame()은 JavaScript의 window 객체에 속해 있습니다. 이 메서드는 브라우저 환경에서 전역적으로 사용할 수 있으며, 특정 클래스에 속해 있지 않습니다. 이는 window 객체의 메서드로, 브라우저의 전체적인 동작과 관련된 기능들을 포함하고 있습니다. 예를 들어, window.requestAnimationFrame()으로 호출할 수 있습니다만, window 객체는 전역 객체이므로 window.를 생략하고도 사용할 수 있습니다: 용도requestAnimationFrame()은 웹 애플리케이션에서 애니메이션을 효율적으로 수행하기 위해 제공되는 JavaScript 메서드입니다. 이 메서드는 브라우저가 화면을 다시 그릴 준비가 되었을 때 특정 함수를 호출하도록 예약합..

JavaScript 2024. 7. 24. 13:27

웹 브라우저 환경을 이야기 할때 window 객체와 document 객체를 이야기 합니다. 그러나  window 객체가 최상위 객체이며, document 객체는 window 객체의 속성으로 포함됩니다. 이를 통해 다음과 같은 계층 구조가 형성됩니다:  window 객체 window 객체는 브라우저 창 자체를 나타냅니다. 모든 전역 JavaScript 객체, 함수 및 변수는 window 객체의 속성으로 간주됩니다. 브라우저 기능:window 객체는 타이머 (setTimeout, setInterval), 브라우저 제어 (alert, confirm, prompt), 그리고 위치 및 내비게이션 (location, history)와 같은 브라우저와 관련된 다양한 기능을 제공합니다.window.alert("Hell..

JavaScript 2024. 7. 24. 13:15

이 두 키워드는 변수의 스코프(scope)와 호이스팅(hoisting) 동작 방식에서 중요한 차이점을 가지고 있습니다. var - 함수 스코프함수 스코프(Function Scope):var로 선언된 변수는 함수 스코프를 가집니다. 즉, 함수 내에서 선언된 변수는 함수 전체에서 유효합니다.function example() { if (true) { var x = 5; } console.log(x); // 5, 블록{} 외부에서 접근 가능}example(); 호이스팅(Hoisting):var로 선언된 변수는 선언이 변수의 정의 전에도 사용될 수 있습니다. 이는 변수 선언이 실제 코드의 최상단으로 끌어올려지는 것처럼 동작하기 때문입니다.console.log(x); // undefined 에러는 아님v..

JavaScript 2024. 7. 24. 12:46

addEventListener() 메소드를 이용하는 트리거로서 load 와 DOMContentLoaded는 같은 용도로 쓰이지만, 다음의 차이가 있습니다.- DOMContentLoaded : DOM 트리만 로드된 시점에 발생하며, 스타일시트, 이미지, 서브프레임 등의 리소스는 로드될 필요가 없습니다.- load : 페이지의 모든 리소스가 완전히 로드된 후에 발생합니다.// DOMContentLoaded 이벤트 - DOM 만document.addEventListener('DOMContentLoaded', function() { console.log('DOM fully loaded and parsed');});// load 이벤트 - css 등 페이지 관련 모든 것 loadwindow.addEventL..

JavaScript 2024. 7. 22. 07:13

"scripts": { "watch": "npm run build && node_modules/http-server/bin/http-server dist -p 1234 ", "build": "mkdir -p dist/ && cp index.html dist/ && cp index.js dist/" },유닉스 기반으로 작성된 scripts 를 윈도우로 옮길 때 주의 해야 하는 것이 두가지 있습니다.1. "/" --> "\\"2. cp --> copy"scripts": { "build": "mkdir dist && copy index.html dist\\ && copy index.js dist\\", "watch": "npm run build && npx http-server dis..

JavaScript 2024. 7. 16. 12:14

`json()` 메서드와 `JSON.parse()` 메서드는 모두 JSON 데이터를 JavaScript 객체로 변환하지만, 그 사용 맥락과 작동 방식에는 차이가 있습니다.json()일반적으로 `json()` 메서드는 `Fetch API`와 함께 사용됩니다. `fetch`를 통해 서버로부터 응답을 받으면, 이 응답은 `Response` 객체로 반환됩니다. `json()` 메서드는 이 `Response` 객체에서 JSON 데이터를 추출하고 이를 JavaScript 객체로 변환합니다.fetch('https://api.example.com/data') .then(response => response.json()) // Response 객체의 json() 메서드 호출 .then(data => { ..

JavaScript 2024. 7. 5. 18:52

const output =  [  {    score: 0.9977799654006958,    label: 'remote',    box: { xmin: 30, ymin: 68, xmax: 189, ymax: 117 }  },  {    score: 0.9982636570930481,    label: 'remote',    box: { xmin: 328, ymin: 66, xmax: 370, ymax: 195 }  },  {    score: 0.9958969950675964,    label: 'couch',    box: { xmin: -3, ymin: 0, xmax: 636, ymax: 472 }  },  {    score: 0.999091625213623,    label: 'cat',   ..

JavaScript 2024. 7. 5. 14:51

JSON.stringify() 함수는 JavaScript 객체나 배열을 JSON 문자열로 변환할 때 사용됩니다. 이 함수는 객체나 배열을 네트워크 전송, 데이터 저장, 로그 기록 등의 목적으로 문자열로 변환하는 데 매우 유용합니다. 데이터 전송: Fetch API 등를 사용하여 서버로 데이터를 전송할 때 객체를 JSON 문자열로 변환하여 전송합니다. 데이터 저장: 로컬 스토리지 또는 세션 스토리지에 객체를 저장할 때 JSON 문자열로 변환하여 저장합니다. 로그 기록: 디버깅을 위해 객체의 상태를 문자열 형태로 기록하거나 콘솔에 출력할 때 사용합니다.객체를 파일 시스템에 저장하거나 다른 프로그램에서 읽을 수 있는 형태로 변환할 때 사용합니다.3가지 유형JSON.stringify(value)JSON.stri..

JavaScript 2024. 7. 5. 13:59