# 크롬 확장프로그램에 케시메모리 추가하기 크롬 확장 프로그램을 통해 [[LazyTrading|트레이딩 도구]]를 개발하는 도중, 한 가지 큰 문제가 있었다. ## 문제 상황 크롬 확장 프로그램은 일반 앱처럼 보이지만, 사용자가 팝업 창이나 사이드바를 닫으면 확장 프로그램의 세션이 완전히 종료된다. 이로 인해 사용자가 입력했던 데이터나 현재 보고 있던 화면 위치가 저장되지 않고, 재접속 시 항상 처음 화면으로 돌아가게 된다. 멀티태스킹 환경에서 트레이더들은 확장 프로그램을 수시로 열고 닫아야 하는데, 매번 처음부터 시작해야 하는 것은 큰 불편함이었다. ## 해결 방안 문제를 해결의 목표를 단순하게 정리하면 다음과 같다 > [!goal] > 크롬 확장프로그램을 사용하는 와중 확장프로그램의 창을 닫고 키면 이전 창의 정보를 복원시킨다. 해당 목적을 달성하기 위해선 단순하게 사용자가 사용하고 있는 정보를 저장할 저장소만 있으면 되겠다고 판단하였다. | 저장소 | 최대 용량 | 데이터 구조 | 비동기 지원 | 지속성 | 다른 탭/창 공유 | | ------------------------ | ------------------------------ | -------------------------------- | ----------- | ------------------------------------------------- | --------------------------------------- | | `localStorage` | 5MB | 문자열(JSON) | ❌(동기) | 브라우저 종료 후에도 유지 | ✅(같은 출처에서 공유) | | `sessionStorage` | 5MB | 문자열(JSON) | ❌(동기) | 탭(세션)이 닫히면 삭제 | ❌(탭마다 독립적) | | `chrome.storage.local` | 10MB (확장 프로그램) | JSON 객체 저장 가능 | ✅(비동기) | 브라우저 종료 후에도 유지 | ✅(확장 프로그램 내에서 공유 가능) | | `chrome.storage.session` | 10MB (확장 프로그램) | JSON 객체 저장 가능 | ✅(비동기) | 확장 프로그램이 종료되면 삭제 | ✅(확장 프로그램 내에서 공유 가능) | | `IndexedDB` | GB 단위 | 객체 저장 가능 (JSON, 배열 포함) | ✅(비동기) | 브라우저 종료 후에도 유지 | ✅(같은 출처에서 가능) | | `background.js` | 제한 없음 (메모리 사용량 만큼) | 모든 JS 객체 저장 가능 | ✅(비동기) | 브라우저 종료되면 삭제 (persistent: false일 경우) | ✅(확장 프로그램 내 모든 페이지와 공유) | 서로 다른 장단점이 있지만 내가 원하는 기능을 하기위해서는 `background.js`가 가장 적합하였다. 그 이유는 다음과 같다. 1. pin 정보같은 민감한 정보도 일시적으로 저장될 수 있기 때문에 localStorage와 sessionStorage그리고 IndexedDB를 이용하지 않아야 한다. 2. 확장프로그램이 닫혀도 정보가 유지되어야 하기 때문에 chrome.storage.session과 sessionStorage를 이용할 수 없다. `background.js`를 이용하는 방법이 내가 내가 원하는 사용자 경험과 가장 잘 맞았다. ### 문제 해결 로직 문제를 해결하기 위해서는 2가지 기능이 필요하다. 1. 앱을 사용하는 동안 사용자의 현제 라우트 위치와 해당 위치에 필요한 데이터 저장하기. 2. 앱을 켤때 `background.js` 에 저장된 앱의 상태가 있는지 확인하고 있다면 복원하기. 현제 프로젝트에서는 `react-query`를 사용중이기 때문에 `react-query`와 `context` 그리고 `hook`을 사용하여 앱의 상태를 저장하고 앱을 실행시킬때 불러오는 작업을 담당하도록 하였다. #### background.js 와 통신하기 `background.js`는 브라우저 영역에서 작동하는 스크립트 이다. `background.js` 와 크롬 확장프로그램은 서로 `chrome.runtime.onMessage` 와 `chrome.runtime.sendMessage` 함수로 통신이 가능하다. 간단하게 `background.js`를 작성해보자 ```js const initialState = { currentRoute: null, data: {}, }; let appState = { ...initialState }; chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { switch (message.type) { case "GET_APP_STATE": sendResponse({ data: { currentRoute: appState.currentRoute, data: appState.data || {}, }, }); break; case "UPDATE_APP_STATE": // state가 undefined인 경우 처리 const newState = message.state || {}; // currentRoute가 변경되면 data 초기화 if ( newState.currentRoute && newState.currentRoute !== appState.currentRoute ) { appState = { currentRoute: newState.currentRoute, data: {}, }; } else { appState = { currentRoute: newState.currentRoute || appState.currentRoute, data: { ...appState.data, ...(newState.data || {}) }, }; } sendResponse({ data: appState }); break; default: sendResponse({ error: "Unknown message type" }); } return true; // 비동기 응답을 위해 true 반환 }); ``` #### 앱 상태에 접근하기 위한 인터페이스 만들기 브라우저의 `background.js`와 통신하기 위한 유틸리티 함수를 만들어야 한다. ```typescript // app-cache.ts // 쿼리 키 상수 export const APP_STATE_KEY = ["appState"]; // 백그라운드와 통신하는 함수들 export interface AppState { currentRoute: string | null; data: Record; } export const getAppState = async (): Promise => { const response = await chrome.runtime.sendMessage({ type: "GET_APP_STATE", }); return response?.data ?? { currentRoute: null, data: {} }; }; export const updateAppState = async (state: Partial) => { const response = await chrome.runtime.sendMessage({ type: "UPDATE_APP_STATE", state: { currentRoute: state.currentRoute ?? null, data: state.data ?? {}, }, }); return response.data; }; ``` #### React Query 통합 React Query를 사용하여 캐시 상태를 관리하는 커스텀 훅을 만들었다. ```tsx // use-cache.tsx import { usePin } from "@/contexts/pin/use"; import { getAppState, updateAppState } from "@/lib/app-cache"; import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; export const useCacheQuery = () => { const { validPin } = usePin(); return useQuery({ queryKey: ["cache"], queryFn: getAppState, enabled: !!validPin, staleTime: Infinity, }); }; export const useCacheMutation = () => { const queryClient = useQueryClient(); return useMutation({ mutationFn: updateAppState, onSuccess: (newState) => { queryClient.setQueryData(["cache"], newState); }, }); }; ``` - `useCacheQuery`: 앱 상태를 가져오는 쿼리 (PIN이 유효할 때만 활성화) - `useCacheMutation`: 앱 상태를 업데이트하는 뮤테이션 #### Context API로 앱 전체에서 접근 가능하게 만들기 캐시 상태에 앱 전체에서 쉽게 접근할 수 있도록 React Context를 만들었다. ```tsx // 타입 정의 (contexts/cache/type.ts) import { createContext } from "react"; export interface AppState { currentRoute: string | null; data: Record; } export interface CacheContextType { cache: AppState | undefined; isLoading: boolean; error: Error | null; updateCache: (newState: Partial) => Promise; } export const CacheContext = createContext( undefined, ); ``` ```tsx // Context Provider (contexts/cache/index.tsx) import React, { useCallback } from "react"; import { AppState } from "@/lib/app-cache"; import { CacheContext } from "./type"; import { useCacheMutation, useCacheQuery } from "@/hooks/use-cache"; export function CacheProvider({ children }: { children: React.ReactNode }) { // Fetch cache data const { data: cache, isLoading, error } = useCacheQuery(); // Update cache mutation const { mutateAsync: updateCacheMutation } = useCacheMutation(); // Update cache wrapper function const updateCache = useCallback( async (newState: Partial) => { await updateCacheMutation(newState); }, [updateCacheMutation], ); return ( {children} ); } ``` ```tsx // 사용을 위한 커스텀 훅 (contexts/cache/use.ts) import { CacheContext } from "@/contexts/cache/type"; import { useContext } from "react"; // Custom hook to use the cache context export function useCache() { const context = useContext(CacheContext); if (context === undefined) { throw new Error("useCache must be used within a CacheProvider"); } return context; } ``` #### 실제 사용 예시 캐시 시스템을 실제로 어떻게 사용하는지 예시 코드를 살펴보자. ```tsx // 특정 컴포넌트에서 캐시 사용하기 import { useCache } from '@/contexts/cache/use'; import { useEffect } from 'react'; import { useLocation } from 'react-router-dom'; function MyComponent() { const location = useLocation(); const { cache, updateCache } = useCache(); // 현재 라우트 저장 useEffect(() => { updateCache({ currentRoute: location.pathname }); }, [location.pathname, updateCache]); // 컴포넌트 상태 저장 const saveData = (newData) => { updateCache({ data: { ...cache?.data, myComponentData: newData } }); }; // 저장된 데이터 사용 useEffect(() => { if (cache?.data?.myComponentData) { // 저장된 데이터로 컴포넌트 상태 복원 // ... } }, [cache]); return ( // ... 컴포넌트 렌더링 ); } ``` 이런 식으로 다양한 컴포넌트에서 캐시를 활용하여 상태를 저장하고 복원할 수 있다. ## 최종 생각 확장 프로그램 세션이 종료되어도 사용자 경험을 유지하는 것은 생각보다 까다로운 문제였다. `background.js`를 활용한 메모리 기반 캐시는 데이터의 민감성과 일시적인 저장 특성을 고려할 때 최적의 선택이었다. React Query와 Context API를 함께 사용함으로써 상태 관리 로직을 깔끔하게 구현할 수 있었고, 사용자 경험을 크게 향상시킬 수 있었다. 트레이딩 도구처럼 빠른 상호작용이 필요한 확장 프로그램에서는 이런 방식의 캐시가 매우 유용하다. 다음 프로젝트에서도 이런 패턴을 적극 활용해봐야겠다.

Aider

QuickStart#