[Electron][TypeScript] 출력/입력 파일

소개

이번에는 로그 출력, 외부 설정 파일 불러오기를 해보겠습니다.

환경

Node.js 버전 16.1.0

TypeScript 버전 4.2.4

전자 ver.12.0.2

전자 로그 ver.4.3.5

전자상점 ver.8.0.0

로그 출력

Electron 애플리케이션에서 로그를 출력하기 위해 "electron-log"를 선택했습니다.

GitHub - megahertz/electron-log: Just a simple logging module for your Electron application

전자 쪽에서

아래와 같이 로그를 출력할 수 있습니다.

메인.ts

...
import * as log from 'electron-log';
...
log.debug('hello');

function createWindow (filePath: string): BrowserWindow {
  log.error('create window');
...
}

결과

콘솔

08:09:23.097 > hello
08:09:23.160 > create window

메인.로그

[2021-05-16 08:09:23.097] [debug] hello
[2021-05-16 08:09:23.160] [error] create window

기본적으로 로그 파일은 "C:/Users/example/AppData/Roaming/{ApplicationName}/logs"에 저장됩니다.

그리고 "main.log"와 "renderer.log"로 나뉩니다.

따라서 "preload.ts"에서 "log.debug('hello')"를 호출하면 로그가 "renderer.log"에 기록됩니다.

저장 디렉토리 및 파일 이름 변경

저장 디렉토리와 파일 이름을 변경할 수 있습니다.

log.debug('before');
log.transports.file.resolvePath = () => 'C:/Users/example/OneDrive/Documents/sample.log';
log.debug('after');

물론 경로를 변경하기 전에는 기본 경로에 로그가 저장됩니다.
그리고 "log.transports.file.resolvePath"는 같은 파일에서만 영향을 받습니다.

그래서 "main.ts"에서만 "log.transports.file.resolvePath"를 실행하면 "preload.ts"의 로그가 "C:/Users/example/AppData/Roaming/{ApplicationName}/logs/"에 저장됩니다. renderer.log".

고객 입장에서

"electron-log"는 Node.js 애플리케이션에서만 사용할 수 있습니다.
그래서 클라이언트 측에서 사용할 수 없습니다.

그래서 contextBridge에 출력 로그 기능을 추가합니다.

글로벌.d.ts

declare global {
    interface Window {
        myapi: Sandbox
    };
}
export interface Sandbox {
    greet: (message: string) => void,
    saveFile: (name: string, data: Uint8Array) => void,
    logDebug: (callFrom: string, message: string) => void,
    logError: (callFrom: string, message: string) => void,
};

프리로드.ts

import { ipcRenderer, contextBridge } from 'electron';
import * as log from 'electron-log';

window.addEventListener('DOMContentLoaded', () => {
    log.warn('Loaded');
});
contextBridge.exposeInMainWorld('myapi', {
    greet: async (data: any) => await ipcRenderer.invoke('greet', data),
    saveFile: async (name: string, data: Uint8Array) => await ipcRenderer.invoke('saveFile', name, data),
    logDebug: (callFrom: string, message: string) => log.debug(`[${callFrom}] ${message}`),
    logError: (callFrom: string, message: string) => log.error(`[${callFrom}] ${message}`)
  }
);

main.page.ts

...
export async function load(filePath: string) {
    window.myapi.logDebug('main', 'call from client');
...
}

결과

[2021-05-16 08:59:06.969] [warn]  Loaded
[2021-05-16 08:59:06.978] [debug] [main] call from client

외부 설정 파일 로드

Electron 애플리케이션에서 구성 파일을 로드하는 방법을 검색했을 때 "electron-store"를 찾았습니다.

GitHub - sindresorhus/electron-store: Simple data persistence for your Electron app or module - Save and load user preferences, app state, cache, etc

"config.json"에 사용자 설정을 저장할 수 있습니다.

메인.ts

...
import ElectronStore from 'electron-store';

const settings = new ElectronStore();
settings.set({
  filePath: 'example'
});
...

파일은 "C:/Users/example/AppData/Roaming/{ApplicationName}"에 저장됩니다.

config.json

{
    "filePath": "example"
}

하지만 이번에는 ASP.NET Core에서 "appsettings.json"과 같은 외부 설정 파일을 로드하고 싶습니다.

그래서 fs로 JSON 파일을 로드합니다.

settingsLoader.ts

import * as fs from 'fs';
import { AppSettings } from "print.type";

export async function load(): Promise<AppSettings> {
    const fileData = await fs.promises.readFile('./appsettings.json', {
        encoding: 'utf-8'
    });
    return JSON.parse(fileData);
}

앱 설정.json

{
    "filePath": "sample.pdf"
}