[WebTranslator 개발기 #02] 단축키(Alt+A) 연타 레이스 컨디션 해결과 스토리지 분리

Alt+A 단축키를 연타해도 DOM이 깨지지 않도록 상태 머신을 만들고, 설정값과 캐시를 Chrome Storage에 저장하도록 구현해라.

// content.js: 단순 boolean 플래그를 통한 상태 제어 시도 (오류 코드)
let isTranslating = false;

async function toggleTranslation() {
  if (isTranslating) {
    isTranslating = false; // 플래그를 꺼도 이미 진행 중인 Promise 체인을 막지 못함!
    revertTranslation();
    return;
  }

  isTranslating = true;
  const texts = collectTextNodes();
  
  // 비동기 요청 시작
  const result = await chrome.runtime.sendMessage({ action: "translate", payload: texts });
  
  // 뒤늦게 도착한 응답이 DOM에 그대로 렌더링됨
  renderTranslation(result);
  isTranslating = false;
}

단순 boolean 변수로 때우지 마라. AbortController를 도입하여 단축키가 다시 눌리는 즉시 진행 중인 fetch 신호를 강제 abort()시키고, document.body의 데이터셋(data-wt-status)으로 현재 상태(idle, translating, translated)를 엄격히 통제해라.

// src/content/index.js: AbortController 기반 단축키 토글 상태 머신
let currentAbortController = null;

export async function toggleTranslation() {
  const body = document.body;
  const state = body.dataset.wtStatus || "idle";

  // 1. 번역 진행 중 재입력: 즉각 취소 및 롤백
  if (state === "translating") {
    if (currentAbortController) {
      currentAbortController.abort(); // 네트워크 및 비동기 작업 물리 취소
    }
    body.dataset.wtStatus = "idle";
    revertTranslation();
    return;
  }

  // 2. 이미 번역된 상태에서 재입력: 원본 복원
  if (state === "translated") {
    revertTranslation();
    body.dataset.wtStatus = "idle";
    return;
  }

  // 3. idle 상태에서 입력: 번역 프로세스 개시
  body.dataset.wtStatus = "translating";
  currentAbortController = new AbortController();

  try {
    const texts = collectTextNodes();
    const translated = await requestTranslation(texts, currentAbortController.signal);
    
    // 요청이 취소되지 않고 정상 완료된 경우에만 렌더링
    renderTranslation(translated);
    body.dataset.wtStatus = "translated";
  } catch (err) {
    if (err.name === "AbortError") {
      // 사용자가 의도적으로 취소한 경우는 정상 흐름으로 간주하고 무시
      return;
    }
    console.error("[WebTranslator] 번역 처리 중 오류 발생:", err);
    body.dataset.wtStatus = "idle";
    revertTranslation();
  }
}

// src/utils/storage.js: 스토리지 레이어 분리 인터페이스
export const SettingsStorage = {
  // 사용자 환경설정은 sync 스토리지 활용 (기기 간 동기화)
  async get() {
    return await chrome.storage.sync.get({ apiKey: "", targetLang: "ko" });
  },
  async set(settings) {
    return await chrome.storage.sync.set(settings);
  }
};

export const CacheStorage = {
  // 대용량 번역 캐시는 local 스토리지로 완전 격리
  async getCache(hashKey) {
    const data = await chrome.storage.local.get(hashKey);
    return data[hashKey] || null;
  },
  async setCache(hashKey, translatedText) {
    return await chrome.storage.local.set({ [hashKey]: translatedText });
  }
};