하루에 하나씩 정리하는 CS 지식
동기화(Synchronization)
1. 핵심
동기화(Synchronization) 는 여러 프로세스나 스레드가 공유 자원에 동시에 접근할 때 충돌이 일어나지 않도록 조정하는 기술이다.
브라우저 환경에서도 “동시 접근 문제”는 흔히 발생한다. 특히 자바스크립트는 단일 스레드 기반이지만, 비동기 코드나 Web Worker, IndexedDB, React의 상태 관리에서는 논리적 동시성(race condition) 이 자주 생긴다.
2. Issue
1. Race Condition (경쟁 상태)
-
비동기 코드의 실행 순서가 예측 불가능할 때 발생
-
예: 두 API 요청이 순서 보장 없이 상태를 덮어씀
2. Shared Worker나 BroadcastChannel 사용 시 데이터 충돌
여러 탭이 동시에 공유 자원을 수정하면 상태 불일치 발생
3. React 상태 업데이트 경쟁
setState가 비동기로 작동하기 때문에 이전 상태를 잘못 참조하면 의도치 않은 값이 생김
3. 해결책
상태 일관성 보장: Atomic Update 패턴
// 상태 덮어쓰기 문제
setCount(count + 1);
// 함수형 업데이트로 안전하게 처리
setCount(prev => prev + 1);
Lock / Queue 기반 제어 (Web 환경)
IndexedDB나 SharedWorker 같은 병렬 환경에서는 “락(lock)” 개념을 흉내내기 가능
const lock = new AsyncLock();
await lock.acquire('resource', async () => {
await updateData();
});
Async/Await 순서 제어
병렬 실행이 아닌 순차적 실행이 필요한 경우 await 명시
await fetchUser();
await fetchPosts(); // 순서 보장
4. QA
❓ 동기화(Synchronization)란 무엇인가요?
여러 프로세스나 스레드가 공유 자원에 동시에 접근할 때, 데이터 일관성을 보장하기 위한 제어 기법.
운영체제에서는 Mutex, Semaphore, Monitor로 관리함.
❓ Race Condition(경쟁 상태)이란 무엇인가요?
두 개 이상의 실행 흐름이 동시에 같은 자원에 접근하거나 수정하려 할 때 발생하는 문제.
결과가 실행 순서에 따라 달라짐.
❓ JavaScript는 싱글 스레드인데 왜 동기화 문제가 발생하나요?
JS 자체는 싱글 스레드지만, Web API, Worker, IndexedDB, Promise 등 비동기 시스템은 OS 수준 스레드를 사용 → 논리적 동시성 발생.
❓ 여러 API 요청이 동시에 같은 데이터를 수정하면 어떤 문제가 생기나요?
Race Condition 발생 → 마지막 요청이 덮어쓰기(Overwriting) → 데이터 일관성 깨짐.
❓ 이 문제를 JS에서 어떻게 방지할 수 있나요?
① Lock/Queue 기반 제어
② 상태 업데이트 시 함수형 업데이트(setCount(prev=>prev+1))
③ 비동기 순서 명시(await, async-lock 등).
❓ React에서 이런 동기화 문제를 어떻게 해결하나요?
함수형 업데이트(setState(prev => prev + 1)) 또는 Redux Toolkit의 Immutable Update 사용.