유튜브블로그Top 10
내 프로필

데브허브 안내
소개업데이트 소식

데브허브 커뮤니티

The BEST way to Create Desktop Apps (Electron)

Better Stack

2025. 7. 2.

0

#frontend
#backend
  • Electron은 HTML, CSS, JavaScript로 데스크톱 앱을 만들 수 있게 해준다. 💻
  • npm init -y로 새 npm 프로젝트를 시작하고 npm install electron -D로 Electron을 설치한다. 🚀
  • index.js에서 Electron 창을 생성하고 package.json에서 시작 스크립트를 설정한다. ⚙️
  • appBrowserWindow를 사용하여 앱의 생명주기를 관리하고 창을 만든다. 🖼️
  • win.loadFile을 사용하여 HTML 파일을 창에 로드하여 앱의 UI를 구성한다. 🌐
  • preload.js를 사용하여 Electron API를 안전하게 노출하고 파일 열기 기능을 구현한다. 🛡️
  • 메인 프로세스에서 파일 다이얼로그를 처리하여 허용할 파일 형식을 필터링한다. 🎚️
  • JavaScript를 사용하여 오디오 재생, 일시 정지, 시간 표시 기능을 구현한다. 🎵

Recommanded Videos