Electron Store

electron-store는 Electron 애플리케이션의 데이터를 저장하는 간단한 방법을 제공하는 라이브러리이다. 로컬 파일 시스템에 JSON 형식으로 데이터를 저장하며, 사용자가 데이터를 직접 관리할 필요 없이 간단한 API를 제공한다
electron-store의 전신인 electron-config도 npm 문서가 따로 있긴 하지만 electron-config는 JSON 파일을 관리하는데 있어서 제한적인 기능을 제공하고, 타입 안전성 등의 문제로 사용자 경험에 제약이 발생하여 electron-store로 전환하게 되었다는 히스토리가 있다. 사용하는데에 두개의 차이점을 크게 느끼지 못했지만, 요새는 electron-store를 사용하는 추세라고 하니 이것으로 벨로그를 작성해 볼 예정

Electron Store 설치

npm i electron-store

npm Electron Store 문서

기본 사용법

electron-store 사용하기

electron-store를 사용하는 기본적인 방법은 Store 객체를 생성하여 데이터를 저장하거나 불러오는 것입니다.

import Store from 'electron-store';
//main > main.ts
// 데이터를 저장할 타입 정의
interface StoreType {
  windowBounds: { x: number, y: number, width: number, height: number };
}

// 전역변수로 Store 인스턴스 생성
// as Record<string, any>로 강제로 처리해주지 않으면 뒤에 나올 get(), set() 사용 시 타입에러가 발생함. 추후 명확한 해결방법을 찾아볼 예정
const store = new Store<StoreType>() as Record<string, any>; 

데이터 저장 및 불러오기

데이터를 저장하는 예시

//오늘은 앱 종료 시 좌표값, 창 크기를 저장해서 다시 불러올 예정이니 
//main 창에 'close' 이벤트 추가
//기존 'closed'를 사용할 수 없는 이유-> closed는 창이 완전히 닫힌 후 이벤트가 발생하기 때문에 closed한 시점에서 mainWindow 객체가 이미 닫혔기 때문에 getBounds() 메서드를 호출할 수 없어 오류가 난다(캡처 참고)
  mainWindow.on('close', () => {
    store.set('windowBounds', mainWindow?.getBounds());
    //...생략
  });

데이터를 불러오는 예시

const createWindow = async () => {
 //..생략
  mainWindow = settingNewBrowserWindow({
    ...getWindowBounds(),
    show: false,
    icon: getAssetPath('icon.png'),
  });
  //...생략
}
// 데이터 불러올 수 있는 함수 만들기
function getWindowBounds() {
  return store.get('windowBounds', {x: 608,y: 266, width: 1024, height: 728});
}

store.get() 함수는 첫 번째 인자로 키를, 두 번째 인자로 기본값을 받을 수 있다. 만약 해당 키에 저장된 값이 없다면 기본값을 반환한다.

저장한 config 데이터 디렉토리에서 확인

Windows

Windows에서는 설정 파일이 사용자 프로필의 AppData 디렉토리 안에 저장됩니다.

C:\Users\<사용자이름>\AppData\Roaming\<앱 이름>\config.json

macOS

/Users/<사용자이름>/Library/Application Support/<앱 이름>/config.json

공부를 하면서 가장 크게 느낀 electron-store와 electron-config의 차이점

위에 말했듯 JSON 파일을 관리하는데 있어서 제한적인 기능을 제공하고, 타입 안전성에 차이가 있다고 하였는데 아래와 같은 차이를 느낄 수 있었다.

//electron-config
import Config from 'electron-config';
//변수의 타입을 지정하지 않고 생성함.
const config = new Config();

// get에 타입 정의가 없음기 때문에 
//'windowBounds'가 객체일지, string일지, number일지 알 수 없음
//데이터 구조에 대한 명확한 타입을 설정하지 않으면 타입 추론이 불가능하므로 런타임 오류를 발생시킬 가능성이 생김.
//즉, 설정 값이 예상치 못한 타입으로 반환될 수 있기 때문에 코드의 안정성을 보장하기 어려운 상황이 발생.
const user = config.get('windowBounds'); 

//electron-store
import Store from 'electron-store';
//변수 생성시 타입을 지정하고 생성할 수 있음.
const store = new Store<StoreType>({});

// 변수 선언 시 타입을 지정했으므로 저장된 데이터를 가져오거나 default로 객체 설정 시 타입에 대한 안정성을 확보할 수 있음
store.get('windowBounds', {x: 608, y: 266, width: 1024, height: 728});