본문 바로가기

전체 글

 (176)
[매일메일] React의 Concurrent Mode(동시성 모드) (FE.250207) (개발자 강화/프론트엔드) 2025. 2. 8. 21:08 동시성 모드여러 작업을 비동기적으로 동시에 처리면서, 중간에 중요한 작업이 들어오면 우선순위를 바꿔서 작업을 먼저 처리 이전의 리액트는 스택구조여서, 한 번 렌더링을 시작하면 끝까지 멈추지 않고 다 처리함그러나 리액트 동시성 모드는 중간에 멈추거나 작업을 뒤로 미뤄두며 중요한 작업을 먼저 끝낼 수 있음 동시성을 활용한 기능useTransitionisPending: 대기 중인 Transition이 있는지startTransition: 상태 업데이트를 Transition으로 표시할 수 있게 함import { useState, startTransition } from "react";function SearchComponent() { const [query, setQuery] = useState(""); co..
[매일메일] React의 메모이제이션? (FE.241223/250206) (개발자 강화/프론트엔드) 2025. 2. 6. 14:56 React의 메모이제이션으로 성능 최적화복잡한 계산이 필요한 경우, 컴포넌트가 자주 리렌더링 되는 경우 등 성능 최적화가 필요한 경우 도움이 됨, React.memo컴포넌트의 props가 변경되지 않았을 때 리렌더링 방지해 성능 최적화const Child = React.memo(({ value }) => { console.log("Child rendered"); return {value};});function Parent() { const [count, setCount] = React.useState(0); return ( setCount(count + 1)}>Increment Count );}Child는 React.memo로 감싸져있어 value가 변경되지 ..
[매일메일] 동시성 제어(BE.250114/250115/250205/250106 통합) (개발자 강화/백엔드) 2025. 2. 6. 08:56 시작하기 전에...동시성(Concurrency)이란 무엇인가? 논리적으로 동시에 실행되는 것처럼 보이게 만드는 개념 (동시 실행처럼 보이지만, 실제로는 아님!)단일 코어 위에서 시간 분할을 통해 여러 스레드를 번갈아 가며 작업 수행 사용자의 입력을 기다리거나, 네트워크 요청, 파일 입출력 등 I/O 작업이라고 함I/O 작업 시에는 CPU가 유휴 상태로 대기함. 입력/출력이 끝날 때까지 손 놓고 기다린다는 뜻! 이때 CPU의 효율성을 위해! 아무것도 안하는 대신에 컨텍스트 스위칭으로 다른 스레드 작업을 처리함이 방법을 쓰면 여러 클라이언트 요청을 동시에 처리할 수 있음 여러 스레드를 사용하면서 Deadlock, Race Condition, Starvation 등의 문제가 발생할 수 있음(해당 문제는 아래 ..

티스토리툴바