FE/React (11) 썸네일형 리스트형 인공지능 기반 카메라 감지 프로젝트: 백그라운드 동작 이슈 해결기 현재, 인공지능 툴을 활용해 카메라로 행동을 감지하고 유의미한 결과를 제공하는 프로젝트를 진행 중이다.이 프로젝트에서 중요한 포인트는 지속적으로(끊임없이) 카메라의 정보를 분석해야 한다는 점이었다. 하지만 실제 구현 과정에서 브라우저 탭이 비활성화되거나 다른 프로그램을 사용하면 감지 분석 및 결과 알림이 작동하지 않는 문제가 발생했다.문제 상황 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} .. React 컴포넌트 생명주기 (Lifecycle) React는 컴포넌트 기반 UI 라이브러리이며, 컴포넌트는 생명주기(Lifecycle)를 갖는다. 이 생명주기는 컴포넌트가 생성되고, 업데이트되며, 제거되는 일련의 과정을 의미한다.컴포넌트 생명주기 요약마운트(Mount): 컴포넌트가 생성되어 가상 DOM을 거쳐 실제 DOM에 추가되는 시점업데이트(Update): props 또는 state가 변경되어 다시 렌더링되는 시점언마운트(Unmount): 컴포넌트가 가상 DOM과 실제 DOM 양쪽에서 제거되는 시점 1. 마운트 (Mount)React가 컴포넌트를 처음 렌더링할 때 실행되는 흐름:Lazy initializer (게으른 초기화) – useState(() => ...): 마운트 시 1회만 실행됨Render – 컴포넌트 함수 실행 → JSX 반환 → 가상.. Tailwind CSS vs Styled Components 이번 글에서는 Tailwind CSS와 Styled Components를 사용하면서 느낀 장단점을 정리해본다.1️⃣ CSS 렌더링 방식 차이방식Tailwind CSSStyled Components스타일 적용 방식정적 CSS 파일 (빌드 타임 적용)런타임에 JavaScript가 스타일 생성브라우저 성능 영향미리 컴파일된 CSS를 사용하여 빠름실행 중 스타일을 생성해야 하므로 성능 저하 발생🔹 Tailwind CSS빌드 시 필요한 클래스만 포함하여 최적화된 CSS 파일을 생성덕분에 실제 배포 환경에서는 매우 작은 CSS 파일이 만들어져 페이지 로딩 속도가 빨라진다. 🔹 Styled ComponentsJavaScript 실행 후 스타일을 생성하고, DOM에 스타일 태그를 주입하는 방식이로 인해 초기 렌더링.. useState가 의도대로 동작을 하지 않는다. 기존 코드다음은 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) { .. React useRef vs useState 이전에 react-hook-form의 input 입력에서는 ref를 사용하는 것을 확인했다. 그렇다면 라이브러리에서도 ref를 사용하는데, useState보다 ref가 더 좋은 방법일까?useRef와 useState의 차이React 공식 문서에서는 ref를 "컴포넌트가 일부 정보를 기억하고 싶지만, 해당 정보가 렌더링 로직에 영향을 미치지 않는 경우" 사용하는 것이 적절하다고 설명한다. 주로 포커스 제어, 값 가져오기, DOM 요소 조작 등에 사용된다고도 적혀있다. 반면, useState는 컴포넌트의 상태를 저장하고, 값이 변경될 때 리렌더링을 발생시키는 역할을 한다. 코드 예제: useRef와 useState 비교import { useState, useRef } from 'react';export de.. react-hook-form, register 렌더링 분석 Recoil 메모리 누수 확인을 하려고, 성능 확인 라이브러리 이것 저것을 확인해보다가 React Dev tools를 사용하게 되었다.Dev tools를 사용하면서 메모리 누수 보단 오히려 렌더링 관점의 확인을 더 할 수 있었다. 예를 들어, 컴포넌트의 리렌더링 빈도와 원인을 시각적으로 파악할 수 있었다. 내가 발견한 상황은,input의 값을 useState-onChange로 변경하면, 글자 하나 변경당 useState를 갖는 컴포넌트가 리렌더 되는 것을 확인했다.하지만 react-hook-form에서는 register가 적용된 input의 값이 변경되어도, 컴포넌트가 리렌더 되지 않았다. [ 여기서 'register가 적용된 input'은 react-hook-form에서 제공하는 함수로 관리되는 입력 .. Recoil 메모리 누수 확인하기 이전 글에서 Recoil을 선택한 이유와 장점에 대해 설명했다.마지막에는 Recoil의 메모리 누수 문제점에 대해 언급하며, 내 프로젝트에서도 이 문제가 발생하고 있는지 파악해보겠다고 했다. 결론적으로, 현재 진행 중인 외주 프로젝트에서는 메모리 누수가 발생하지 않았다.[ 확실히 알게 된 건, atom만 쓴다면 메모리 누수 문제는 없다. ]메모리 누수가 일어나고 있다고 가정하고, atom의 메모리 사용 상태를 지속적으로 점검했지만,기존에 사용하던 atom들에서 문제가 발견되지 않았다. [ = 사용되지 않으면서도 메모리에 남아 있는 atom은 없었다. ] 상당히 뻘짓을 많이 했다. 메모리 누수가 일어난다고 해서, 없는 누수를 찾으려고 크롬 개발자 도구 메모리 탭 기능들을 몇일이나 봤다. 이해를 돕기 위해,.. 이전 1 2 다음
