Electron Fiddle

의존성 설치 없이 Electron 탐색

Fiddle은 Electron 플랫폼을 살펴보는 데 필요한 구성을 모두 자체 포함하고 있어, 별도 설치 없이 바로 Electron을 실행해 볼 수 있습니다. 또한 Electron이 제공하는 모든 API에 대한 예제가 함께 제공되므로, BrowserView나 desktopCapturer 같은 구성 요소의 동작을 빠르게 확인할 수 있습니다.

타입 지원을 받는 코드 편집

Fiddle은 Microsoft의 Monaco Editor(VS Code와 동일한 엔진)를 내장하고 있어 코드 하이라이팅·자동완성 등 익숙한 편집 경험을 제공합니다. 현재 선택한 Electron 버전에 맞는 타입 정의가 자동으로 설치되므로, 키 몇 번이면 모든 Electron API에 접근할 수 있습니다.

npm 패키지 활용

실험에 서드파티 모듈이 필요하다면 npm 레지스트리의 패키지를 검색할 수 있습니다. Algolia 기반의 자동완성과 버전 선택 기능이 제공되어, 필요한 의존성을 빠르게 골라 코드에 포함시킬 수 있습니다.

컴파일 및 패키징

Fiddle은 electron-forge를 활용해 실험용 코드를 실행 파일 형태로 패키징할 수 있도록 도와줍니다. 그 결과물을 Windows, macOS, Linux용 앱으로 빌드해 동료나 가족에게 공유할 수 있습니다.

Fiddle에서 시작해 다른 환경으로 확장

Fiddle은 풀 기능 IDE가 아니라 출발점에 가까운 도구입니다. 실험이 충분히 성장하면 electron-forge 포함 또는 미포함 형태로 프로젝트를 내보내, 익숙한 다른 편집기에서 이어서 개발을 진행할 수 있습니다.

Electron Fiddle은 어떤 도구인가요?

Electron 앱의 작은 실험을 만들고 즉시 실행해 볼 수 있도록 돕는 Electron Community의 공식 샌드박스 도구입니다. 빠른 시작 템플릿, 내장 에디터, 실행 환경, 콘솔을 하나로 묶어 제공합니다.

어떤 파일을 편집할 수 있나요?

기본 템플릿으로 제공되는 index.html, main.js, preload.js, renderer.js를 내장 에디터에서 직접 수정할 수 있고, 필요에 따라 npm 패키지를 추가해 활용할 수도 있습니다.

작성한 결과는 어떻게 공유하나요?

Publish 기능을 사용해 현재 Fiddle을 GitHub Gist로 게시할 수 있으며, 게시 후에는 Gist URL만으로 다른 사람이 바로 실행해 볼 수 있습니다. Load Fiddle로 이전 작업을 다시 불러올 수도 있습니다.

어떤 운영체제에서 사용할 수 있나요?

Windows(x64, ia32), macOS(arm64, x64), Linux(x64, arm64, armv7l)용 패키지가 각각 제공되며, Windows에서는 winget을 통한 설치도 지원합니다.

화면으로 보는 주요 기능

Electron Fiddle 인터페이스

Electron Fiddle 애플리케이션의 전체 인터페이스를 보여주는 스크린샷입니다. 왼쪽에는 index.html, main.js, preload.js, renderer.js 파일이 있는 에디터 탭이 있습니다. 중앙에는 main.js 파일이 열려 있으며, Electron 모듈을 사용하여 브라우저 창을 생성하는 JavaScript 코드가 보입니다. 오른쪽에는 index.html 파일이 열려 있으며, HTML 구조와 스크립트 태그가 포함된 코드가 보입니다. 하단에는 renderer.js와 preload.js 파일이 각각 열려 있으며, 이 파일들에 대한 설명이 포함된 주석이 있습니다. 상단에는 Electron v867.530.9 버전 정보와 Run, Console, Load Fiddle, Publish 버튼이 있습니다.

main.js 파일 편집 중

main.js 파일이 선택된 상태에서 코드를 편집하고 있는 스크린샷입니다. main.js 파일은 Electron 애플리케이션의 메인 프로세스를 제어하는 데 사용되며, 브라우저 창을 생성하는 코드가 포함되어 있습니다. 코드는 const mainwindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js') } }); 라는 구문을 포함하고 있습니다. 이 구문은 브라우저 창을 생성하고, preload.js 파일을 로드하는 설정을 포함하고 있습니다.

Hello World! 애플리케이션 실행 결과

Electron 애플리케이션이 실행된 결과 화면입니다. 'Hello World!'라는 제목과 함께 'We are using Node.js 16.15.0, Chromium 104.0.5112.81, and Electron 20.0.1.'라는 메시지가 표시되어 있습니다. 이는 애플리케이션이 Node.js, Chromium, Electron의 특정 버전을 사용하고 있음을 나타냅니다. 배경은 분홍색과 보라색의 그라데이션으로, 애플리케이션 창이 중앙에 위치해 있습니다.

app.on 이벤트 자동완성

main.js 파일에서 app.on 이벤트를 사용하는 코드를 작성하는 중인 스크린샷입니다. 코드 에디터에서 app.on('')을 입력한 후 자동완성 기능이 작동하여 accessibility-support-changed, activate, activity-was-continued, before-quit, browser-window-blur 등의 이벤트 목록이 표시됩니다. 이는 Electron 애플리케이션에서 사용할 수 있는 다양한 이벤트를 보여줍니다.