이번 글에서는 자바스크립트의 제너레이터(Generator) 에 대해 마저 알아보겠습니다.제너레이터 정의제너레이터 객체는 제너레이터 함수에 의해 반환되며, 이터러블 프로토콜과 이터레이터 프로토콜을 모두 따릅니다. 쉽게 말해, 제너레이터는 반복문에서 사용할 수 있고 동시에 next()를 호출해 값을 하나씩 꺼낼 수도 있는 객체입니다.제너레이터의 장점먼저, 제너레이터를 사용하는 이유부터 살펴보겠습니다.메모리 효율성: 필요한 시점에만 값을 생성하므로 메모리를 절약할 수 있습니다.Iterable 정의 간소화: Iterable을 간단히 작성할 수 있습니다.https://goto-helloworld.tistory.com/146 와 비교하면, 왜 간단한지 이해가 가능합니다. 상태 제어 용이: yield를 통해 실행을 ..

Generator에 대해서 MDN은 The Generator object is returned by a generator function and it conforms to both the iterable protocol and the iterator protocol.이렇게 설명합니다. iterable, iterator protocal이 무엇인지 모르니, 우선 해당 프로토콜들을 이해 해보는 시간을 가져봅시다!혹시 아신다면, https://goto-helloworld.tistory.com/147 넘어가주세요.The Iterable Protocol (이터러블 프로토콜)이터러블 프로토콜은 “이 객체를 반복문에서 사용할 수 있는지”를 결정하는 규칙입니다.객체가 이터러블이 되려면 [Symbol.iterator] 메..

현재, 인공지능 툴을 활용해 카메라로 행동을 감지하고 유의미한 결과를 제공하는 프로젝트를 진행 중이다.이 프로젝트에서 중요한 포인트는 지속적으로(끊임없이) 카메라의 정보를 분석해야 한다는 점이었다. 하지만 실제 구현 과정에서 브라우저 탭이 비활성화되거나 다른 프로그램을 사용하면 감지 분석 및 결과 알림이 작동하지 않는 문제가 발생했다.문제 상황 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)상위(외부) 스코프의 렉시컬 ..