Ch.Covelope

안녕하세요! 오늘은 React와 JavaScript 애플리케이션에서 발생하는 메모리 누수 문제를 깊이 있게 다뤄보겠습니다. 실제 프로젝트에서 마주칠 수 있는 다양한 시나리오와 해결 방법을 함께 알아보겠습니다. 목차메모리 누수의 이해React에서 발생하는 메모리 누수 패턴JavaScript 런타임에서의 메모리 누수실전 디버깅 가이드성능 최적화 전략 1. 메모리 누수의 이해 1.1 메모리 관리 기본 원리JavaScript의 메모리 관리는 가비지 컬렉션(Garbage Collection)을 통해 자동으로 이루어집니다. 하지만 특정 상황에서는 이 메커니즘이 제대로 작동하지 않을 수 있습니다. 가비지 컬렉션(Garbage Collection)의 이해 가비지 컬렉션이란? 메모리에 있는 '쓰레기'를 치우는 청소부라고..

호출 스택, 실행 프로세스 복습 하기  호출 스택(call stack), 콜백 큐(callback queue), 이벤트 루프(event loop)  자바스크립트 코드가 실행되고 자바스크립트 엔진은 각각의 함수 호출을 호출 스택에 추가, call stack 에 푸시(push) 되고 , 실행이 완료되면 stack 에서 팝(pop)된다.    호출스택(call stack) 함수의 호출을 기록 하는 자료 구조 만약 함수가 동기적일 경우 해당 연산이 완료될 때까지 다른 모든 작업은 대기하게 된다.  JS 엔진은 단일 스레드로 동작하기 때문에 한 번에 하나의 작업만 처리한다.   만약 함수가 비동기적일 경우 예를 들어 setTimeout 또는 fetch,promise 등 해당 연산은 백그라운에서 처리되는데해당 함수..

react-query 란 React Query는 React 에서 원격 및 비동기 데이터를 관리하기 위한 라이브러리이다. API와 같은 다양한 데이터 소스에서 데이터를 더 쉽게 가져오고, 캐시하고, 동기화하고, 업데이트할 수 있는 일련의 훅 및 유틸리티를 제공한다. 설치 및 설정 NPM $ npm i @tanstack/react-query # or $ pnpm add @tanstack/react-query # or $ yarn add @tanstack/react-query CDN 설치되면 다음과 같이 컴포넌트에서 react-query를 가져와서 사용할 수 있다. import { QueryClient, QueryClientProvider, useQuery } from 'react-query'; const q..

자바스크립트에는 동기식과 비동기식이 있다. 동기식(Synchronous) 이란단순하게 순서대로 실행되는데 1번이 실행되고 1번이 끝이 나면 2번이 실행되고 끝나면 그다음 작업들이 이런 과정으로 처리되는 것이다. 실행 순서가 보장되자만 한 번에 하나씩 처리 되기 때문에 한번에 여러 개의 작업이 불가능하다. 비동기식(Asynchronous) 이란동기식과 다르게 먼저 실행된 작업이 끝날 때까지 기다리지 않고 다음작업을 시작할 수 있다. 한 번에 여러 일을 처리 할수 있다. 한번에 여러 가지 작업을 처리할 수 있지만 작업 순서가 보장되지 않는다.   JavaScript 는 동기식 언어이다? 자바스크립트는 단일 스레드(싱글) 이다 . 메인 스레드인 이벤트 루프가 싱글 스레드 이기 때문이다.하지만 이벤트 루프만 독..