현재, 인공지능 툴을 활용해 카메라로 행동을 감지하고 유의미한 결과를 제공하는 프로젝트를 진행 중이다.이 프로젝트에서 중요한 포인트는 지속적으로(끊임없이) 카메라의 정보를 분석해야 한다는 점이었다. 하지만 실제 구현 과정에서 브라우저 탭이 비활성화되거나 다른 프로그램을 사용하면 감지 분석 및 결과 알림이 작동하지 않는 문제가 발생했다.문제 상황 1: requestAnimationFrame의 한계 💡 추론브라우저 탭이 백그라운드로 전환되면 requestAnimationFrame이 멈출 것 같다. 실제로 다음과 같이 작성한 코드에서 문제가 발생했다:window.requestAnimationFrame(() => this.predictWebcam()); 공식 문서에 따르면:"requestAnimationFra..

React.memo는 전달된 props가 이전과 얕은 비교(shallow equal) 시 같다면, 컴포넌트를 리렌더링하지 않는다.JavaScript의 얕은 비교는 === 연산자로 판단되며, 객체는 참조값이 같아야 === 연산자의 결과가 true가 된다.객체 리터럴 사용 시 문제'use client'import { memo, useState } from "react";const Test = () => { const object = { count: 0 }; // 매 렌더마다 새 객체 생성 const [count, setCount] = useState(0); return ( setCount(c => c + 1)}>Click {count} ..

클로저는 함수와 그 함수가 선언될 당시의 렉시컬 환경(Lexical Environment)에 대한 참조를 함께 저장하는 구조이다.내부 함수가 실행될 때, 이 참조를 통해 자신이 선언될 당시 주변 스코프의 변수들에 접근할 수 있으며,외부 함수의 실행이 완료된 후에도 해당 변수들이 메모리에 남아있어 접근이 가능하다. 더보기렉시컬 환경"함수나 블록이 선언될 때, 그 위치에서 접근 가능한 변수들이 담긴 객체" ✅ 렉시컬 환경의 구성1️⃣ 환경 레코드 (Environment Record)현재 스코프(블록/함수 등)에서 선언된 변수(예: var, let, const)를 저장하는 객체.2️⃣ 외부 렉시컬 환경에 대한 참조 (Outer Lexical Environment Reference)상위(외부) 스코프의 렉시컬 ..

this는 JavaScript에서 함수가 호출될 때 결정되는 특별한 키워드이다. JavaScript에서 this는 함수가 어떻게 호출되었는지에 따라 바인딩된다. 선언 위치가 아닌 호출 시점에 따라 결정되므로, 예상과 다른 동작이 발생하기 쉽다. 1. 호출 방식에 따라 달라지는 thisconst obj = { name: 'obj', logThis: function () { console.log(this.name); }};obj.logThis(); // 'obj'const extracted = obj.logThis;extracted(); // undefinedconst wrapper = { name: 'wrapper', call: obj.logThis };wrapper.call(); // 'wra..

실행 컨텍스트(Execution Context)는 자바스크립트 동작의 기반이다.this, 호이스팅처럼 JS에서 특이하게 느껴지는 대부분의 개념과 밀접하게 연결되어 있다.1. 실행 컨텍스트란?실행 컨텍스트는 ECMAScript 엔진이 코드의 실행 상태를 추적하기 위해 사용하는 내부 구조이다. 실행 컨텍스트는 항상 스택으로 관리되며, 새로운 코드(함수, 모듈 등)로 제어가 넘어가면 새로운 컨텍스트가 생성되고 스택에 쌓인다. 2. 실행 컨텍스트의 생성과 구조자바스크립트 엔진은 코드를 실행하기 전에 평가(creation) 단계를 거쳐 실행 컨텍스트를 생성하고, 이후 실행(execution) 단계에서 코드를 실제로 수행한다. ✅ 평가 단계 (Creation Phase)실행 컨텍스트 객체가 생성된다.LexicalE..