Fiddle — Electron API 실험 도구

"Electron Fiddle은 웹의 CodePen 같은 도구" — 프로젝트를 만들지 않고도 Electron 코드를 즉시 실행하고 테스트할 수 있습니다.

Electron Fiddle이란

Electron Fiddle은 Electron API를 빠르게 실험할 수 있는 데스크톱 IDE입니다.

주요 기능

**즉시 실행 **: 코드를 작성하고 바로 Electron 앱으로 실행
** 버전 전환 **: 다양한 Electron 버전으로 테스트
** 템플릿 **: IPC, 메뉴 등 API별 예제 코드 내장
** 공유 **: GitHub Gist로 코드 공유
** 버그 리포트 **: 재현 코드를 Fiddle로 만들어 이슈에 첨부

설치

BASH

# 공식 사이트에서 다운로드
# https://www.electronjs.org/fiddle

# 또는 Homebrew (macOS)
brew install --cask electron-fiddle

기본 사용법

Fiddle을 실행하면 4개 탭이 보입니다:

PLAINTEXT

┌─────────────┬──────────────┐
│  main.js    │  preload.js  │
├─────────────┼──────────────┤
│  renderer.js│  index.html  │
└─────────────┴──────────────┘

각 탭에 코드를 작성하고 "Run" 버튼을 누르면 즉시 Electron 앱이 실행됩니다.

활용 예시

IPC 테스트

JAVASCRIPT

// main.js
const { app, BrowserWindow, ipcMain } = require('electron');

app.whenReady().then(() => {
  const win = new BrowserWindow({
    webPreferences: { preload: PRELOAD_WEBPACK_ENTRY },
  });

  ipcMain.handle('ping', () => 'pong!');

  win.loadFile('index.html');
});

JAVASCRIPT

// preload.js
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('api', {
  ping: () => ipcRenderer.invoke('ping'),
});

JAVASCRIPT

// renderer.js
document.getElementById('btn').addEventListener('click', async () => {
  const result = await window.api.ping();
  document.getElementById('output').textContent = result;
});

새 API 탐색

Electron의 새 버전이 나왔을 때, Fiddle에서 버전을 바꿔가며 API 변경사항을 테스트할 수 있습니다.

Gist로 공유하기

Fiddle에서 코드 작성
File → Publish as GitHub Gist
생성된 Gist URL을 공유

다른 사람은 이 URL로 Fiddle에서 바로 코드를 열고 실행할 수 있습니다.

면접 포인트 정리

Fiddle은 프로젝트 생성 없이 Electron 코드를 즉시 실행하는 도구
다양한 Electron 버전으로 API 호환성 테스트 가능
GitHub Gist로 코드를 공유하여 버그 리포트에 활용
학습과 프로토타이핑에 매우 유용

Fiddle을 다뤘으면, 다음은 Electron 앱의 아키텍처 패턴을 알아봅시다.