개발하기

개발하기

Electron 는 Node.js 기반이기 때문에, Node.js 에서 사용했던 대부분의 라이브러리를 사용하실 수 있습니다. (메인 프로세스 한정)
또한 메인 프로세스, 렌더러 프로세스 각각 웹팩으로 빌드된 결과를 사용하기 때문에, es6, less, sass 등을 상황에 맞춰 빌드할 수 있습니다.

IPC 통신

ipc 통신은 일렉트론에서 제공하는 라이브러리로, 메인 프로세스와 렌더러 프로세스간 통신하는 방법중 하나 입니다.
Event Emitter 방식을 차용하고 있으며, 앱의 종료나 하드웨어 프로그램의 기동등에 사용되고 있습니다.

메인 프로세스 개발하기

src/main

Electron 에서 메인 프로세스는 일종의 back-end 의 기능을 수행하도록 되어 있습니다.
소스는 watch 상태인 경우, 소스 수정 후 페이지 새로고침을 하면 수정한 사항이 바로 반영되도록 되어 있습니다.
사용자의 눈에 보이지 않는 작업이나 앱의 일반적인 이벤트등을 관리하도록 되어 있습니다.
현재 엔트리 오프라인은 메인 프로세스에서 앱의 초기 설정 엔트리 하드웨어 기동과 ipc 통신을 수행하는 기능이 들어 있습니다.

렌더러 프로세스 개발하기

src/renderer

렌더러 프로세스는 front-end 개발과 동일하다고 생각하면 됩니다.
소스는 watch 상태인 경우, 소스 수정 후 페이지 새로고침을 하면 수정한 사항이 바로 반영되도록 되어 있습니다.
아래 개발의 핵심이 되는 몇가지 위치를 기술해두었습니다.

• workspace.jsx : 워크스페이스를 담당하는 리액트 컴포넌트입니다. Entry 의 실질적인 initializing 및 기타 모든 동작이 포함되어 있습니다.
• header.jsx : 메인 페이지 상단 헤더부분의 소스가 작성되어 있습니다.
• rendererUtils.js : 렌더러 프로세스 전반적인 위치에서 사용될 수 있는 로직이 기술되어 있습니다.
• ipcRendererHelper.js : 렌더러 프로세스에서 메인 프로세스로 ipc 이벤트를 보낼때 사용되는 파일입니다.
  주로 Node.js 에서만 사용되는 라이브러리(fs, path 등)을 사용할 때 호출합니다.

디버깅 하기

Electron 디버깅은 크게 메인 프로세스 디버깅과, 렌더러 프로세스 디버깅 이렇게 2 가지로 구분할수 있습니다.

메인 프로세스 디버깅

메인 프로세스는 npm run debug || yarn debug 명령으로 실행하면 inspection 모드로 실행됩니다.
Node.js 의 인스펙터 관련은 공식 문서 를 참고해주세요.

렌더러 프로세스의 디버깅 방식과 동일한 방식(Chrome Devtools) 를 활용할 수도 있습니다.

• 크로미움 기반 브라우저에서 chrome://inspect를 엽니다.
• Devices > Remote Target 에서 해당 인스펙터 포트와 동일한 타겟을 선택하여 디버깅합니다.

렌더러 프로세스 디버깅

렌더러 프로세스 디버깅은 chrome 의 내장툴인 devtool 로 디버깅을 수행합니다. globalShortCutRegister.js의 코드 중 openDevTools() 함수를 호출하는 부분이 있습니다.
해당 함수호출이 실제 devtool 을 오픈하는 명령어 입니다. 현재는 프로그램이 실행된 상태에서 단축키로 devtool 을 열수 있도록 처리하였습니다.

macOS : cmd + option + i
Windows : ctrl + shift + i

devtool 은 크롬에서 사용하는것과 동일하게 디버깅이 가능합니다. 다만 macOS 의 경우 clipboard 사용이 제한되어있어 복사 밑 붙여넣기가 정상적으로 동작하지 않는 문제가 있습니다.