"electron-store는 복잡한 데이터베이스 없이 앱 설정을 저장하는 가장 간단한 방법" — JSON 파일 기반이지만, 스키마 검증과 마이그레이션까지 지원합니다.


설치와 기본 사용

BASH
npm install electron-store
JAVASCRIPT
// main.js
const Store = require('electron-store');

const store = new Store();

// 값 저장
store.set('window.width', 1200);
store.set('window.height', 800);
store.set('theme', 'dark');

// 값 읽기
const width = store.get('window.width');       // 1200
const theme = store.get('theme', 'light');     // 'dark' (기본값: 'light')

// 값 삭제
store.delete('theme');

// 전체 데이터
console.log(store.store); // { window: { width: 1200, height: 800 } }

// 파일 경로 확인
console.log(store.path);
// macOS: ~/Library/Application Support/앱이름/config.json

스키마 검증

JAVASCRIPT
const store = new Store({
  schema: {
    theme: {
      type: 'string',
      enum: ['light', 'dark', 'system'],
      default: 'system',
    },
    fontSize: {
      type: 'number',
      minimum: 10,
      maximum: 32,
      default: 14,
    },
    autoSave: {
      type: 'boolean',
      default: true,
    },
    recentFiles: {
      type: 'array',
      items: { type: 'string' },
      default: [],
      maxItems: 20,
    },
    window: {
      type: 'object',
      properties: {
        width: { type: 'number', default: 800 },
        height: { type: 'number', default: 600 },
        x: { type: 'number' },
        y: { type: 'number' },
      },
      default: {},
    },
  },
});

// 스키마에 맞지 않는 값을 넣으면 에러
// store.set('fontSize', 100); // Error: fontSize must be <= 32

마이그레이션

JAVASCRIPT
const store = new Store({
  migrations: {
    '1.0.0': (store) => {
      // 기존 'color' 키를 'theme'으로 변경
      if (store.has('color')) {
        store.set('theme', store.get('color'));
        store.delete('color');
      }
    },
    '2.0.0': (store) => {
      // window 설정을 객체로 통합
      const width = store.get('windowWidth');
      const height = store.get('windowHeight');
      if (width || height) {
        store.set('window', { width: width || 800, height: height || 600 });
        store.delete('windowWidth');
        store.delete('windowHeight');
      }
    },
  },
});

IPC를 통한 렌더러 연동

JAVASCRIPT
// main.js
const store = new Store({ /* 스키마... */ });

ipcMain.handle('store:get', (_event, key) => {
  return store.get(key);
});

ipcMain.handle('store:set', (_event, key, value) => {
  store.set(key, value);
});

ipcMain.handle('store:getAll', () => {
  return store.store;
});

// 변경 감지
store.onDidChange('theme', (newValue, oldValue) => {
  // 모든 윈도우에 테마 변경 알림
  BrowserWindow.getAllWindows().forEach(win => {
    win.webContents.send('settings:changed', { theme: newValue });
  });
});
JAVASCRIPT
// preload.js
contextBridge.exposeInMainWorld('electronAPI', {
  getSetting: (key) => ipcRenderer.invoke('store:get', key),
  setSetting: (key, value) => ipcRenderer.invoke('store:set', key, value),
  getAllSettings: () => ipcRenderer.invoke('store:getAll'),
  onSettingsChanged: (callback) => {
    const handler = (_event, data) => callback(data);
    ipcRenderer.on('settings:changed', handler);
    return () => ipcRenderer.removeListener('settings:changed', handler);
  },
});

electron-store vs SQLite 선택 기준

항목electron-storeSQLite
용도앱 설정, 환경설정구조화된 데이터
데이터 형식JSON관계형 테이블
쿼리키-값 접근SQL 쿼리
적합한 규모수십~수백 항목수천~수만 행
네이티브 모듈불필요필요 (빌드 도구)

면접 포인트 정리

  • electron-store는 JSON 파일 기반의 키-값 저장소
  • 스키마 검증으로 설정값의 타입 안전성 보장
  • 마이그레이션으로 설정 구조 변경 시 호환성 유지
  • onDidChange로 설정 변경을 감지하고 반응 가능
  • 간단한 설정은 electron-store, 복잡한 데이터는 SQLite 사용

electron-store를 다뤘으면, 다음은 로깅 시스템을 알아봅시다.

댓글 로딩 중...