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

React는 컴포넌트 기반 UI 라이브러리이며, 컴포넌트는 생명주기(Lifecycle)를 갖는다. 이 생명주기는 컴포넌트가 생성되고, 업데이트되며, 제거되는 일련의 과정을 의미한다.컴포넌트 생명주기 요약마운트(Mount): 컴포넌트가 생성되어 가상 DOM을 거쳐 실제 DOM에 추가되는 시점업데이트(Update): props 또는 state가 변경되어 다시 렌더링되는 시점언마운트(Unmount): 컴포넌트가 가상 DOM과 실제 DOM 양쪽에서 제거되는 시점 1. 마운트 (Mount)React가 컴포넌트를 처음 렌더링할 때 실행되는 흐름:Lazy initializer (게으른 초기화) – useState(() => ...): 마운트 시 1회만 실행됨Render – 컴포넌트 함수 실행 → JSX 반환 → 가상..

이번 글에서는 Tailwind CSS와 Styled Components를 사용하면서 느낀 장단점을 정리해본다.1️⃣ CSS 렌더링 방식 차이방식Tailwind CSSStyled Components스타일 적용 방식정적 CSS 파일 (빌드 타임 적용)런타임에 JavaScript가 스타일 생성브라우저 성능 영향미리 컴파일된 CSS를 사용하여 빠름실행 중 스타일을 생성해야 하므로 성능 저하 발생🔹 Tailwind CSS빌드 시 필요한 클래스만 포함하여 최적화된 CSS 파일을 생성덕분에 실제 배포 환경에서는 매우 작은 CSS 파일이 만들어져 페이지 로딩 속도가 빨라진다. 🔹 Styled ComponentsJavaScript 실행 후 스타일을 생성하고, DOM에 스타일 태그를 주입하는 방식이로 인해 초기 렌더링..

기존 코드다음은 showTradeList 함수가 currentPage 상태를 기반으로 API 요청을 보내는 코드const showTradeList = async () => { if (loading || currentPage > allPageCount) { return; } setLoading(true); const formData = new FormData(); formData.append("page_num", currentPage.toString()); await apiService.post( "/posts/search_second_hand/", formData, ).then(res => { if (res.data.code === 200) { ..