[Electron] BrowserWindow 옵션 정리

Copyright (c) 2013-2020 GitHub Inc.

[Electron] BrowserWindow 옵션 정리

(Electron 버전 : 9.0.0, 글쓴날 : 2020.05.25)

 

---

* 이 글은 글쓴이가 공부한 내용을 정리하며 올리는 글입니다.

* 글의 내용은 공식 홈페이지 BrowserWindow 문서 기반으로 공부하여 작성하였습니다.

---

 

 

Electron BrowserWindow 옵션

---

1) width, height

윈도우의 기본 너비, 높이를 지정하는 옵션입니다.

(기본값은 너비 : 800, 높이 : 600입니다.)

ex)

// 윈도우 기본 너비
width: 900,
// 윈도우 기본 높이
height: 600,

---

2) minWidth, minHeight

윈도우의 최소 너비, 높이를 지정하는 옵션입니다.

(기본값은 너비와 높이 모두 0입니다.)

ex)

// 윈도우 최소 너비
minWidth: 900,
// 윈도우 최소 높이
minHeight: 600,

---

3) maxWidth, maxHeight

윈도우의 최대 너비, 높이를 지정하는 옵션입니다.

(기본값은 너비와 높이 모두 제한이 없습니다.)

ex)

// 윈도우 최대 너비
maxWidth: 900,
// 윈도우 최대 높이
maxHeight: 600,

---

4) resizable

윈도우의 크기를 조절 허용 여부를 지정하는 옵션입니다.

(기본값은 true입니다.)

ex)

// 윈도우 크기 조절 허용
resizable: true,

---

5) center

앱 실행 시 윈도우를 화면 정 중앙에 위치시키는 옵션입니다.

ex)

// 앱 실행 시 윈도우 가운데 위치
center: true,

---

6) alwaysOnTop

윈도우를 다른 창들 위에 항상 유지되는 옵션입니다.

(기본값은 false입니다.)

ex)

// 윈도우를 다른 창들 위에 항상 유지
alwaysOnTop: true,

---

7) fullscreen

윈도우를 전체 화면으로 활성화시키는 옵션입니다.

(기본값은 false입니다.)

ex)

// 윈도우 전체 화면 활성화
fullscreen: true,

---

8) autoHideMenuBar

윈도우의 메뉴바를 숨기는 옵션입니다.

MAC OS의 경우 메뉴바가 작업표시줄에 나타나므로 상관이 없지만, Windows OS의 경우 메뉴바가 윈도우 상단바 바로 아래에 나타납니다.

미관상 별로이기도 하고, 메뉴바가 차지하는 공간 때문에 운영체제마다 CSS 높이 조절이 달라지게 되므로 여러모로 숨기는 편이 좋은 것 같습니다.

(기본값은 false이며, true인 상태에서 Alt 키를 누르면 다시 나타납니다.)

ex)

// 윈도우 메뉴바 
autoHideMenuBar: true,

---

9) backgroundColor

윈도우 배경색을 설정하는 옵션입니다.

(기본값은 #FFF, 흰색입니다.)

ex)

// 윈도우 배경색 설정
backgroundColor: #000000,

---

10) webPreferences

Electron 웹 환경설정을 하는 옵션으로 하위에 여러 가지 옵션이 있습니다.

그중 nodeIntegration 옵션이 있는데 Electron 내부에 Node.js를 통합할 것인지 설정하는 옵션이므로,

만약, Electron 내부에서 Node 기반 라이브러리를 사용하신다면, 꼭 true로 설정해 주셔야 합니다.

(기본값은 false입니다.)

ex)

// Electron Node.js 통합 설정
webPreferences: {
    nodeIntegration: true,
},

---

 

 

---

 

 

여기까지, Electron BrowserWindow 옵션 정리였습니다.

물론, 제가 직접 사용했었던 옵션들만 정리해 놓았으므로, 수많은 다른 옵션들이 궁금하신 분들은...

 

* Electron 공식 홈페이지 BrowserWindow 문서 : https://www.electronjs.org/docs/api/browser-window

BrowserWindow | Electron

위의 Electron 공식 홈페이지 BrowserWindow 문서를 참조하시면 되겠습니다.

감사합니다!