FE (23) 썸네일형 리스트형 인공지능 기반 카메라 감지 프로젝트: 백그라운드 동작 이슈 해결기 현재, 인공지능 툴을 활용해 카메라로 행동을 감지하고 유의미한 결과를 제공하는 프로젝트를 진행 중이다.이 프로젝트에서 중요한 포인트는 지속적으로(끊임없이) 카메라의 정보를 분석해야 한다는 점이었다. 하지만 실제 구현 과정에서 브라우저 탭이 비활성화되거나 다른 프로그램을 사용하면 감지 분석 및 결과 알림이 작동하지 않는 문제가 발생했다.문제 상황 1: requestAnimationFrame의 한계 💡 추론브라우저 탭이 백그라운드로 전환되면 requestAnimationFrame이 멈출 것 같다. 실제로 다음과 같이 작성한 코드에서 문제가 발생했다:window.requestAnimationFrame(() => this.predictWebcam()); 공식 문서에 따르면:"requestAnimationFra.. 왜 memo에서 객체 리터럴은 리렌더링되고, useState 객체는 리렌더링되지 않을까? 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)상위(외부) 스코프의 렉시컬 .. JavaScript - this 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.. 자바스크립트 호이스팅 정리 🔍 호이스팅이란?호이스팅(hoisting)은 자바스크립트에서 변수나 함수의 선언이 실행 전에 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 메커니즘이다.정확히는, 자바스크립트 엔진이 실행 컨텍스트를 생성할 때 변수 및 함수의 선언을 먼저 메모리에 등록한 후, 코드가 실행된다. 🔄 어떤 코드가 호이스팅 되는가?console.log(message); // undefinedvar message = "Hello, world!";위 코드는 undefined를 출력한다. 이는 var message; 선언이 먼저 끌어올려졌기 때문이다. 자바스크립트는 다음과 같이 처리한 것처럼 동작한다:var message;console.log(message); // undefinedmessage = "Hello, world!".. React 컴포넌트 생명주기 (Lifecycle) React는 컴포넌트 기반 UI 라이브러리이며, 컴포넌트는 생명주기(Lifecycle)를 갖는다. 이 생명주기는 컴포넌트가 생성되고, 업데이트되며, 제거되는 일련의 과정을 의미한다.컴포넌트 생명주기 요약마운트(Mount): 컴포넌트가 생성되어 가상 DOM을 거쳐 실제 DOM에 추가되는 시점업데이트(Update): props 또는 state가 변경되어 다시 렌더링되는 시점언마운트(Unmount): 컴포넌트가 가상 DOM과 실제 DOM 양쪽에서 제거되는 시점 1. 마운트 (Mount)React가 컴포넌트를 처음 렌더링할 때 실행되는 흐름:Lazy initializer (게으른 초기화) – useState(() => ...): 마운트 시 1회만 실행됨Render – 컴포넌트 함수 실행 → JSX 반환 → 가상.. 🔐 CORS, 대체 왜 이렇게 귀찮게 해? 프론트엔드 개발을 하다 보면 한 번쯤은 꼭 마주치는 CORS 에러.Postman에서는 응답이 잘 오는데, 웹에서만 시도하면 브라우저가 막아버리니 "왜?"라는 생각이 먼저 들 수밖에 없다.🌝 CORS란 무엇인가?**CORS(Cross-Origin Resource Sharing)**는 다른 출처(Origin) 간의 리소스 요청을 제어하는 브라우저의 보안 정책이다.예를 들어, 내 로컬에서 돌아가는 localhost:3000 프론트에서 api.myservice.com으로 API 요청을 보내면, 브라우저는 "이건 다른 출처인데, 이 요청을 정말 허용해야 할까?"라고 의심한다.🔍 여기서 출처(Origin)는 protocol + domain + port 조합이다.🚫 CORS 에러가 나는 상황브라우저는 다른 출처.. 이전 1 2 3 다음