[electron] 시작하기

electron

자바스크립트와 함께 제공된 풍부한 네이티브 API를 사용하여 멋진 데스크탑 애플리케이션을 만들 수 있도록 해주는 프레임워크

해당 프레임워크의 Node.js는 웹 서버 개발이 아닌 데스크탑 애플리케이션 개발에 초점

→ GUI 라이브러리의 자바스크립트 바인딩이 아닌, 웹 페이지의 GUI를 사용

electron은 자바스크립트를 사용하여 조작하는 작은 Chromium 브라우저

Chromium ?

Chromium 프로젝트에서 유지관리하는 무료 오픈소스 웹 브라우저

해당 오픈소스를 가져다가 자신들만의 새로운 브라우저를 만들 수 있으며, 대표적인 것으로 네이버 웨일, 스윙 브라우저, 오페라, 비발디, 얀덱스, 삼성 인터넷 브라우저(모바일의 경우) 등이 있다.

 

Chrome ?

Google에서 개발, 유지, 관리하고 출시한 독점적인 웹 브라우저

Google이 Chromium을 가져와서 만든 브라우저

소스코드를 디컴파일, 리버스, 엔지니어링하거나 자신의 프로젝트를 빌드할 수 없다.

크로미움(좌), 크롬(우)

 

 

main process

• package.js 파일에 (main 필드)정의된 스크립트를 실행하는 프로세스
• 이 스크립트는 메인 프로세스에서 작동하며, GUI 컴포넌트를 조작하거나 웹 페이지 창을 생성할 수 있다.
• 항상 하나의 메인 프로세스를 갖지만 그 이상은 가질 수 없다.
• 웹 페이지를 보여주기 위해 Chromium을 사용

package.json에서 메인프로세스인 main.js를 실행시킨다. 만약 package.json에 main 필드가 설정되어 있지 않으면 electron은 자동으로 같은 디렉터리의 index.js를 로드한다.

메인 프로세스에서 실행시키는 main.js는 다음과 같은 구조를 지닌다.

 

renderer process

• 웹페이지를 보여줄 때, Chromium의 multi-processes 구조도 같이 사용한다.
• 메인 프로세스로부터 생성된 웹페이지가 동작되는 프로세스
• 메인 프로세스와 달리

 

프로세스 실행 구조

• BrowserWindow 인스턴스를 생성하여 웹페이지 생성
• 각각의 BrowserWindow 인스턴스는 자체 렌더러 프로세스에서 웹페에지를 실행
• BrowserWindow 인스턴스가 소멸되면, 해당 렌더러 프로세스도 종료
• 메인 프로세스는 모든 웹페이지와 그에 일치하는 렌더러 프로세스들을 관리
• 각각의 렌더러 프로세스는 서로 격리된 상태로 자신에 속한 웹페이지만 관리

---

# 참고 사이트

- [ELECTRON 문서] https://tinydew4.github.io/electron-ko/docs/tutorial/quick-start/

- [크로미움 사진] https://ykarma1996.tistory.com/72

- [크로미움 vs 크롬] https://la-nube.tistory.com/137

- [메인 프로세스 & 렌더러 프로세스] https://dayjms.tistory.com/entry/Electron-%EC%95%B1-%EA%B0%9C%EB%B0%9C-Main-%ED%94%84%EB%A1%9C%EC%84%B8%EC%8A%A4-Renderer-%ED%94%84%EB%A1%9C%EC%84%B8%EC%8A%A4