VS Code 확장 프로그램의 상태 관리 재구축: Redux와 Redux-Saga를 통한 성능 및 안정성 혁신

섹션별 상세

기존 아키텍처의 한계와 문제점: 암시적 상태 소유권과 컴포넌트 생명주기에 숨겨진 사이드 이펙트로 인해 긴 대화 시 CPU 스파이크와 메모리 누수가 발생했으며, 병렬 도구 호출과 같은 복잡한 기능을 구현하기 어려웠다.

리팩터링 전 VS Code 확장의 성능을 보여주는 플레임 차트 — Chart긴 작업(Long Task)으로 인해 메인 스레드가 점유되어 UI 프리징이 발생하는 모습을 보여준다. 특히 1.5MB JSON 문서 임포트 시 UI가 약 4.5초간 차단되는 병목 현상을 시각적으로 증명한다.

Redux 기반 설계 원칙 도입: 모든 상태를 하나의 스토어에서 관리하고, 명시적인 액션을 통해서만 상태를 변경하며, 데이터를 정규화하여 저장함으로써 예측 가능성과 관찰 가능성(Observability)을 확보했다.

Svelte와 Redux의 효율적 통합: Svelte의 반응형 성능을 유지하면서 Redux를 사용하기 위해 createSelector라는 브릿지를 구축하여, 컴포넌트가 실제로 사용하는 상태가 변경될 때만 선택적으로 재계산되도록 최적화했다.

javascript

// Creates a selector that returns a Svelte readable
const selectActiveConversation = createSelector(
  (state) => state.conversations.active
);

// In a Svelte 5 component, it just works
const conversation = selectActiveConversation(store);

Redux 상태를 Svelte의 반응형 Readable 객체로 연결하는 커스텀 셀렉터 구현 예시

Redux-Saga를 이용한 비동기 워크플로우 관리: LLM 응답 스트리밍, 병렬 도구 실행 등 복잡한 비동기 로직을 제너레이터 함수 기반의 Saga로 관리하여 레이스 컨디션을 방지하고 테스트 가능한 구조를 만들었다.

javascript

function* handleUserMessage(action) {
  const { message, conversationId } = action.payload;
  
  // Create exchange
  const exchange = yield call(createExchange, message);
  yield put(exchangeCreated({ conversationId, exchange }));
  
  // Stream LLM response
  const stream = yield call(api.streamCompletion, message);
  yield fork(handleStream, stream, exchange.id);
  
  // Parse and execute tools in parallel
  const tools = yield take(TOOLS_PARSED);
  yield all(tools.map(tool => call(executeTool, tool)));
}

Redux-Saga를 사용하여 메시지 전송, 스트리밍, 병렬 도구 실행을 오케스트레이션하는 로직

AI 에이전트를 활용한 대규모 리팩터링: 에이전트가 읽기 쉬운 문서 구조(_docs/ 패턴)를 구축하고, 에이전트가 기존 로직을 분석하여 새로운 아키텍처로 포팅하도록 유도함으로써 수백 개의 파일을 안전하게 수정했다.

정량적 및 정성적 개선 결과: 대규모 대화 로드 속도가 수 초 내로 단축되었고, 도구 중심 워크플로우 속도가 최대 2배 향상되었으며, 액션 로그를 통한 디버깅 시간이 며칠에서 몇 분 단위로 획기적으로 줄어들었다.

리팩터링 후 개선된 성능을 보여주는 플레임 차트 — ChartRedux와 Redux-Saga 도입 후 동일한 작업에서 UI 차단 시간이 1초 수준으로 대폭 감소했음을 보여준다. 작업이 더 작은 단위로 쪼개져 실행되어 사용자 인터페이스의 반응성이 유지됨을 확인할 수 있다.

용어 해설

리덕스 사가(Redux-Saga): — 애플리케이션의 사이드 이펙트(데이터 가져오기, 브라우저 캐시 액세스 등)를 더 쉽게 관리하고 실행하기 위해 설계된 라이브러리이다. ES6 제너레이터를 사용하여 비동기 흐름을 읽기 쉽고 테스트하기 좋게 만든다. 복잡한 비동기 워크플로우를 오케스트레이션하는 데 필수적이다.
정규화된 저장소(Normalized Storage): — 데이터베이스 정규화와 유사하게 상태 트리에서 데이터 중복을 제거하고 중첩된 구조를 평탄화하여 저장하는 방식이다. 각 엔티티를 ID 기반의 맵으로 관리하여 특정 데이터 업데이트 시 연관된 모든 곳에 즉각 반영되도록 한다. 데이터 일관성 유지와 업데이트 성능 향상에 기여한다.
경쟁 상태(Race Condition): — 두 개 이상의 프로세스나 스레드가 공유 자원에 동시에 접근하여 실행 순서에 따라 결과값이 달라지는 결함이다. 비동기 처리가 많은 복잡한 시스템에서 예측 불가능한 버그를 유발하는 주된 원인이다. 명시적인 상태 관리와 동기화 메커니즘을 통해 해결해야 한다.
플레임 차트(Flame Chart): — 소프트웨어 실행 중 CPU 사용량과 함수 호출 스택을 시간 순서대로 시각화한 도구이다. 각 막대의 너비는 실행 시간을 나타내며, 이를 통해 성능 병목 지점이나 메인 스레드를 점유하는 긴 작업을 식별할 수 있다. 성능 최적화 및 디버깅의 핵심 지표로 활용된다.
셀렉터(Selector): — 전체 상태 트리에서 필요한 특정 부분만 추출하거나 계산하여 반환하는 순수 함수이다. 메모이제이션 기법을 적용하여 입력값이 변하지 않으면 이전 계산 결과를 재사용함으로써 불필요한 리렌더링을 방지한다. 복잡한 상태 구조에서 파생 데이터를 효율적으로 관리하는 핵심 수단이다.

기술

Redux
Redux-Saga
Svelte
TypeScript
Augment Code Agent

활용 사례

VS Code Extension
AI Chat Interface
Parallel Tool Calling
Complex Async Workflows

언급된 리소스

문서Augment Code Blog