зеркало из https://github.com/electron/electron.git
Plusb Preco
Родитель
4c5fd1bf14
Коммит
08782e319a
|
|
@ -6,22 +6,61 @@
|
|||
|
||||
```javascript
|
||||
// 메인 프로세스에서
|
||||
const {BrowserWindow} = require('electron');
|
||||
const {BrowserWindow} = require('electron')
|
||||
|
||||
// 또는 렌더러 프로세스에서
|
||||
const {BrowserWindow} = require('electron').remote;
|
||||
const {BrowserWindow} = require('electron').remote
|
||||
|
||||
let win = new BrowserWindow({width: 800, height: 600, show: false});
|
||||
let win = new BrowserWindow({width: 800, height: 600})
|
||||
win.on('closed', () => {
|
||||
win = null;
|
||||
});
|
||||
})
|
||||
|
||||
win.loadURL('https://github.com');
|
||||
win.show();
|
||||
```
|
||||
|
||||
또한 [Frameless Window](frameless-window.md) API를 사용하여 창 테두리가 없는 윈도우
|
||||
창을 생성할 수 있습니다.
|
||||
## Frameless 윈도우
|
||||
|
||||
Frameless 윈도우를 만들거나 일정한 모양의 투명한 윈도우를 만드려면,
|
||||
[Frameless 윈도우](frameless-window.md) API를 사용할 수 있습니다.
|
||||
|
||||
## 우아하게 윈도우 표시하기
|
||||
|
||||
윈도우에서 페이지를 로딩할 때, 사용자는 페이지가 로드되는 모습을 볼 것입니다.
|
||||
네이티브 어플리케이션으로써 좋지 않은 경험입니다. 윈도우가 시각적인 깜빡임 없이
|
||||
표시되도록 만드려면, 서로 다른 상황을 위해 두 가지 방법이 있습니다.
|
||||
|
||||
### `ready-to-show` 이벤트 사용하기
|
||||
|
||||
페이지가 로딩되는 동안, `ready-to-show` 이벤트가 랜더러 프로세스가 랜더링이 완료되었을
|
||||
때 처음으로 발생합니다. 이 이벤트 이후로 윈도우를 표시하면 시각적인 깜빡임 없이 표시할
|
||||
수 있습니다.
|
||||
|
||||
```javascript
|
||||
let win = new BrowserWindow({show: false})
|
||||
win.once('ready-to-show', () => {
|
||||
win.show()
|
||||
})
|
||||
```
|
||||
|
||||
이 이벤트는 보통 `did-finish-load` 이벤트 이후에 발생하지만, 페이지가 너무 많은 외부
|
||||
리소스를 가지고 있다면, `did-finish-load` 이벤트가 발생하기 이전에 발생할 수도
|
||||
있습니다.
|
||||
|
||||
### `backgroundColor` 설정하기
|
||||
|
||||
복잡한 어플리케이션에선, `ready-to-show` 이벤트가 너무 늦게 발생할 수 있습니다.
|
||||
이는 사용자가 어플리케이션이 느리다고 생각할 수 있습니다. 이러한 경우 어플리케이션
|
||||
윈도우를 바로 보이도록 하고 어플리케이션의 배경과 가까운 배경색을 `backgroundColor`을
|
||||
통해 설정합니다:
|
||||
|
||||
```javascript
|
||||
let win = new BrowserWindow({backgroundColor: '#2e2c29'})
|
||||
win.loadURL('https://github.com')
|
||||
```
|
||||
|
||||
참고로 `ready-to-show` 이벤트를 사용하더라도 어플리케이션을 네이티브 느낌이 나도록
|
||||
하기 위해 `backgroundColor`도 같이 설정하는 것을 권장합니다.
|
||||
|
||||
## Class: BrowserWindow
|
||||
|
||||
|
|
@ -270,6 +309,11 @@ window.onbeforeunload = (e) => {
|
|||
|
||||
윈도우가 숨겨진 상태일 때 발생하는 이벤트입니다.
|
||||
|
||||
### Event: 'ready-to-show'
|
||||
|
||||
웹 페이지가 완전히 랜더링되어 윈도우가 시각적인 깜빡임없이 컨텐츠를 보여줄 수 있을 때
|
||||
발생하는 이벤트입니다.
|
||||
|
||||
### Event: 'maximize'
|
||||
|
||||
윈도우가 최대화됐을 때 발생하는 이벤트입니다.
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
# Frameless Window
|
||||
# Frameless 윈도우
|
||||
|
||||
> 툴바, 테두리, 시각적인 "chrome" 없이 윈도우를 엽니다.
|
||||
|
||||
Frameless Window는 [창 테두리](https://developer.mozilla.org/ko/docs/Glossary/Chrome)가
|
||||
Frameless 윈도우는 [창 테두리](https://developer.mozilla.org/ko/docs/Glossary/Chrome)가
|
||||
없는 윈도우를 말합니다. 이 기능은 윈도우의 일부분인 툴바와 같이 웹 페이지의 일부분이
|
||||
아닌 부분을 보이지 않도록 합니다. [`BrowserWindow`](browser-window.md) 클래스의
|
||||
옵션에서 설정할 수 있습니다.
|
||||
|
||||
## Frameless Window 만들기
|
||||
## Frameless 윈도우 만들기
|
||||
|
||||
Frameless Window를 만드려면 [BrowserWindow](browser-window.md) 객체의
|
||||
Frameless 윈도우를 만드려면 [BrowserWindow](browser-window.md) 객체의
|
||||
`options` 객체에서 `frame` 옵션을 `false`로 지정하면 됩니다:
|
||||
|
||||
```javascript
|
||||
|
|
@ -30,7 +30,7 @@ let win = new BrowserWindow({titleBarStyle: 'hidden'})
|
|||
|
||||
## 투명한 창 만들기
|
||||
|
||||
Frameless Window 창의 배경을 투명하게 만들고 싶다면 `transparent` 옵션을 `true`로
|
||||
Frameless 윈도우 창의 배경을 투명하게 만들고 싶다면 `transparent` 옵션을 `true`로
|
||||
바꿔주기만 하면됩니다:
|
||||
|
||||
```javascript
|
||||
|
|
@ -66,7 +66,7 @@ win.setIgnoreMouseEvents(true)
|
|||
|
||||
## 드래그 가능 위치 지정
|
||||
|
||||
기본적으로 Frameless Window는 드래그 할 수 없습니다. 애플리케이션의 CSS에서 특정
|
||||
기본적으로 Frameless 윈도우는 드래그 할 수 없습니다. 애플리케이션의 CSS에서 특정
|
||||
범위를 `-webkit-app-region: drag`로 지정하면 OS의 기본 타이틀 바 처럼 드래그 되도록
|
||||
할 수 있습니다. 그리고 `-webkit-app-region: no-drag`를 지정해서 드래그 불가능 영역을
|
||||
만들 수도 있습니다. 현재 사각형 형태의 범위만 지원합니다.
|
||||
|
|
@ -93,7 +93,7 @@ button {
|
|||
|
||||
## 텍스트 선택
|
||||
|
||||
Frameless Window에서 텍스트가 선택되는 드래그 동작은 혼란을 야기할 수 있습니다. 예를
|
||||
Frameless 윈도우에서 텍스트가 선택되는 드래그 동작은 혼란을 야기할 수 있습니다. 예를
|
||||
들어 타이틀 바를 드래그 할 때 타이틀 바의 텍스트를 실수로 선택할 수 있습니다. 이를
|
||||
방지하기 위해 다음과 같이 드래그 영역의 텍스트 선택 기능을 비활성화해야 할 필요가
|
||||
있습니다:
|
||||
|
|
|
|||
|
|
@ -166,6 +166,29 @@ electron-osx-sign YourApp.app YourApp.app/Contents/Resources/app/node_modules/na
|
|||
엄격하게 제한되어 있습니다. 자세한 내용은 [앱 샌드박싱][app-sandboxing] 문서를
|
||||
참고하세요.
|
||||
|
||||
### 추가적인 권한
|
||||
|
||||
Mac 앱 스토어 빌드를 위해 앱에서 사용하는 Electron API에 따라 `parent.plist` 파일에
|
||||
추가적인 기능에 대한 권한을 추가해야 할 수도 있습니다.
|
||||
|
||||
#### dialog.showOpenDialog
|
||||
|
||||
```xml
|
||||
<key>com.apple.security.files.user-selected.read-only</key>
|
||||
<true/>
|
||||
```
|
||||
|
||||
자세한 내용은 [User-Selected 파일 접근 활성화 문서][user-selected]를 참고하세요.
|
||||
|
||||
#### dialog.showSaveDialog
|
||||
|
||||
```xml
|
||||
<key>com.apple.security.files.user-selected.read-write</key>
|
||||
<true/>
|
||||
```
|
||||
|
||||
자세한 내용은 [User-Selected 파일 접근 활성화 문서][user-selected]를 참고하세요.
|
||||
|
||||
## Electron에서 사용하는 암호화 알고리즘
|
||||
|
||||
국가와 살고 있는 지역에 따라, 맥 앱스토어는 제출한 애플리케이션에서 사용하는 암호화
|
||||
|
|
@ -214,3 +237,4 @@ ERN의 승인을 얻는 방법은, 다음 글을 참고하는 것이 좋습니
|
|||
[app-sandboxing]: https://developer.apple.com/app-sandboxing/
|
||||
[ern-tutorial]: https://carouselapps.com/2015/12/15/legally-submit-app-apples-app-store-uses-encryption-obtain-ern/
|
||||
[temporary-exception]: https://developer.apple.com/library/mac/documentation/Miscellaneous/Reference/EntitlementKeyReference/Chapters/AppSandboxTemporaryExceptionEntitlements.html
|
||||
[user-selected]: https://developer.apple.com/library/mac/documentation/Miscellaneous/Reference/EntitlementKeyReference/Chapters/EnablingAppSandbox.html#//apple_ref/doc/uid/TP40011195-CH4-SW6]
|
||||
|
|
|
|||
|
|
@ -1,69 +1,91 @@
|
|||
# 네이티브 node 모듈 사용하기
|
||||
# 네이티브 Node 모듈 사용하기
|
||||
|
||||
Electron에선 node.js 네이티브 모듈이 지원됩니다. 하지만 Electron은 공식 node.js의
|
||||
V8 엔진과는 다른 V8 버전을 사용합니다. 이러한 이유로 네이티브 모듈을 사용하기 위해선
|
||||
Electron의 V8 버전에 맞춰 네이티브 모듈을 다시 빌드하고 헤더를 변경해야 합니다.
|
||||
|
||||
## 네이티브 node 모듈 호환성
|
||||
|
||||
네이티브 모듈은 node.js가 새로운 V8 버전을 사용함으로 인해 작동하지 않을 수 있습니다.
|
||||
사용하는 네이티브 모듈이 Electron에 맞춰 작동할 수 있도록 하려면 Electron에서 사용하는
|
||||
node.js의 버전을 확인할 필요가 있습니다. Electron에서 사용하는 node 버전은
|
||||
[releases](https://github.com/electron/electron/releases)에서 확인할 수 있으며
|
||||
`process.version`을 출력하여 버전을 확인할 수도 있습니다.
|
||||
([시작하기](./quick-start.md)의
|
||||
예시를 참고하세요)
|
||||
|
||||
혹시 직접 만든 네이티브 모듈이 있다면 [NAN](https://github.com/nodejs/nan/) 모듈을
|
||||
사용하는 것을 고려해보는 것이 좋습니다. 이 모듈은 다중 버전의 node.js를 지원하기 쉽게
|
||||
만들어 줍니다. 이를 통해 오래된 모듈을 새 버전의 node.js에 맞게 포팅 할 수 있습니다.
|
||||
Electron도 이 모듈을 통해 포팅된 네이티브 모듈을 사용할 수 있습니다.
|
||||
Electron에선 네이티브 Node 모듈을 지원합니다. 하지만 Electron이 시스템에 설치된
|
||||
Node의 버전과 전혀 다른 V8 버전을 사용하고 있을 가능성이 높은 관계로, 네이티브 모듈을
|
||||
빌드할 때 Electron의 헤더를 수동으로 지정해 주어야 합니다.
|
||||
|
||||
## 네이티브 모듈을 설치하는 방법
|
||||
|
||||
네이티브 모듈을 설치하는 방법은 세 가지 종류가 있습니다.
|
||||
네이티브 모듈을 설치하는 방법에는 세 가지 방법이 있습니다:
|
||||
|
||||
### 쉬운 방법
|
||||
### `npm` 사용하기
|
||||
|
||||
[`electron-rebuild`](https://github.com/paulcbetts/electron-rebuild) 패키지를
|
||||
사용하면 빠르고 간단하게 네이티브 모듈을 다시 빌드할 수 있습니다.
|
||||
몇 가지 환경 변수를 설치하는 것으로, 직접적으로 `npm`을 모듈을 설치하는데 사용할 수
|
||||
있습니다.
|
||||
|
||||
다음 예시는 `electron-rebuild`를 통해 자동으로 모듈의 헤더를 다운로드하고 네이티브
|
||||
모듈을 빌드합니다:
|
||||
다음 예시는 Electron에 대한 모든 종속성을 설치하는 예시입니다:
|
||||
|
||||
```sh
|
||||
```bash
|
||||
# Electron의 버전.
|
||||
export npm_config_target=1.2.3
|
||||
# Electron의 아키텍쳐, ia32 또는 x64가 될 수 있습니다.
|
||||
export npm_config_arch=x64
|
||||
# Electron에 대한 헤더 다운로드 링크.
|
||||
export npm_config_disturl=https://atom.io/download/atom-shell
|
||||
# node-pre-gyp에 Electron을 빌드한다는 것을 알려줍니다.
|
||||
export npm_config_runtime=electron
|
||||
# node-pre-gyp에 소스 코드로부터 모듈을 빌드한다는 것을 알려줍니다.
|
||||
export npm_config_build_from_source=true
|
||||
# 모든 종속성을 설치하고 캐시를 ~/.electron-gyp에 저장합니다.
|
||||
HOME=~/.electron-gyp npm install
|
||||
```
|
||||
|
||||
### 모듈을 설치하고 Electron을 위해 다시 빌드하기
|
||||
|
||||
다른 Node 프로젝트와 같이 모듈을 설치하는 것을 선택할 수도 있습니다. 그리고
|
||||
[`electron-rebuild`][electron-rebuild] 패키지와 함께 Electron에 대해 모듈을 다시
|
||||
빌드할 수 있습니다. 이 모듈은 Electron의 버전을 가져올 수 있고 헤더를 다운로드 하거나
|
||||
네이티브 모듈을 빌드하는 등의 작업을 자동으로 실행할 수 있습니다.
|
||||
|
||||
다음 예시는 `electron-rebuild`을 설치하고 자동으로 모듈을 빌드하는 예시입니다:
|
||||
|
||||
```bash
|
||||
npm install --save-dev electron-rebuild
|
||||
|
||||
# 필요한 네이티브 모듈을 `npm install`로 설치한 후 다음 명령을 실행하세요:
|
||||
# "npm install"을 실행할 때마다 다음 명령을 실행하세요:
|
||||
./node_modules/.bin/electron-rebuild
|
||||
|
||||
# Windows에서 문제가 발생하면 다음 명령을 대신 실행하세요:
|
||||
.\node_modules\.bin\electron-rebuild.cmd
|
||||
```
|
||||
|
||||
### `npm`을 이용한 방법
|
||||
**역자주:** `npm script`의 `postinstall`을 사용하면 이 작업을 자동화 할 수 있습니다.
|
||||
|
||||
또한 `npm`을 통해 설치할 수도 있습니다.
|
||||
환경변수가 필요한 것을 제외하고 일반 Node 모듈을 설치하는 방법과 완전히 똑같습니다:
|
||||
### Electron을 위해 직접적으로 빌드하기
|
||||
|
||||
현재 본인이 네이티브 모듈을 개발하고 있는 개발자이고 Electron에 대해 실험하고 싶다면,
|
||||
직접적으로 모듈을 Electron에 대해 다시 빌드하고 싶을 것입니다. `node-gyp`를 통해
|
||||
직접적으로 Electron에 대해 빌드할 수 있습니다.
|
||||
|
||||
```bash
|
||||
export npm_config_disturl=https://atom.io/download/atom-shell
|
||||
export npm_config_target=0.33.1
|
||||
export npm_config_arch=x64
|
||||
export npm_config_runtime=electron
|
||||
HOME=~/.electron-gyp npm install module-name
|
||||
```
|
||||
|
||||
### `node-gyp`를 이용한 방법
|
||||
|
||||
Node 모듈을 `node-gyp`를 사용하여 Electron을 타겟으로 빌드할 때는 `node-gyp`에 헤더
|
||||
다운로드 주소와 버전을 알려주어야 합니다:
|
||||
|
||||
```bash
|
||||
$ cd /path-to-module/
|
||||
$ HOME=~/.electron-gyp node-gyp rebuild --target=0.29.1 --arch=x64 --dist-url=https://atom.io/download/atom-shell
|
||||
cd /path-to-module/
|
||||
HOME=~/.electron-gyp node-gyp rebuild --target=1.2.3 --arch=x64 --dist-url=https://atom.io/download/atom-shell
|
||||
```
|
||||
|
||||
`HOME=~/.electron-gyp`은 변경할 헤더의 위치를 찾습니다. `--target=0.29.1`은
|
||||
Electron의 버전입니다. `--dist-url=...`은 헤더를 다운로드 하는 주소입니다.
|
||||
`--arch=x64`는 64비트 시스템을 타겟으로 빌드 한다는 것을 `node-gyp`에게 알려줍니다.
|
||||
|
||||
## 문제 해결
|
||||
|
||||
네이티브 모듈을 설치했는데 잘 작동하지 않았다면, 다음 몇 가지를 확인해봐야 합니다:
|
||||
|
||||
* 모듈의 아키텍쳐가 Electron의 아키텍쳐와 일치합니다. (ia32 또는 x64)
|
||||
* Electron을 업그레이드한 후, 보통은 모듈을 다시 빌드해야 합니다.
|
||||
* 문제가 의심된다면, 먼저 `electron-rebuild`를 실행하세요.
|
||||
|
||||
## 모듈이 `node-pre-gyp`에 의존합니다
|
||||
|
||||
[`node-pre-gyp` 툴][node-pre-gyp]은 미리 빌드된 바이너리와 함께 네이티브 Node 모듈을
|
||||
배치하는 방법을 제공하며 수 많은 유명한 모듈들이 이를 사용합니다.
|
||||
|
||||
보통 이 모듈은 Electron과 함께 잘 작동하지만, Electron이 Node보다 새로운 V8 버전을
|
||||
사용할 때, 만약 ABI가 변경되었다면, 때때로 안 좋은 일이 일어납니다. 그래서 일반적으론
|
||||
언제나 네이티브 모듈의 소스 코드를 가져와서 빌드하는 것을 권장합니다.
|
||||
|
||||
`npm`을 통한 방법을 따르고 있다면, 기본적으로 이 소스를 받아와서 빌드합니다. 만약
|
||||
그렇지 않다면, `npm`에 `--build-from-source`를 전달해 주어야 합니다. 아니면
|
||||
`npm_config_build_from_source`를 환경 변수에 설정하는 방법도 있습니다.
|
||||
|
||||
[electron-rebuild]: https://github.com/paulcbetts/electron-rebuild
|
||||
[node-pre-gyp]: https://github.com/mapbox/node-pre-gyp
|
||||
|
|
|
|||
|
|
@ -13,18 +13,30 @@ Electron은 Pepper 플래시 플러그인을 지원합니다. Electron에서 Pep
|
|||
## Electron 스위치 추가
|
||||
|
||||
플러그인을 사용하려면 Electron 커맨드 라인에 `--ppapi-flash-path` 와
|
||||
`ppapi-flash-version` 플래그를 `app`의 `ready` 이벤트가 발생하기 전에 추가해야
|
||||
`--ppapi-flash-version` 플래그를 `app`의 `ready` 이벤트가 발생하기 전에 추가해야
|
||||
합니다. 그리고 `browser-window`에 `plugins` 옵션을 활성화해야 합니다.
|
||||
|
||||
예를 들면:
|
||||
|
||||
```javascript
|
||||
// 플래시 플러그인의 위치를 설정합니다.
|
||||
// Windows의 경우, /path/to/pepflashplayer.dll 또는 main.js에 존재하는 경우 pepflashplayer.dll
|
||||
// OS X의 경우, /path/to/PepperFlashPlayer.plugin
|
||||
// Linux의 경우, /path/to/libpepflashplayer.so
|
||||
app.commandLine.appendSwitch('ppapi-flash-path', '/path/to/libpepflashplayer.so');
|
||||
// 플래시 플러그인의 위치를 설정합니다. main.js와 위치가 같다고 가정할 때:
|
||||
let pluginName
|
||||
switch (process.platform) {
|
||||
case 'win32':
|
||||
pluginName = 'pepflashplayer.dll'
|
||||
break
|
||||
case 'darwin':
|
||||
pluginName = 'PepperFlashPlayer.plugin'
|
||||
break
|
||||
case 'linux':
|
||||
pluginName = 'libpepflashplayer.so'
|
||||
break
|
||||
}
|
||||
|
||||
app.commandLine.appendSwitch('ppapi-flash-path', path.join(__dirname, pluginName))
|
||||
|
||||
// 선택적인으로 플래시 플레이어의 버전을 설정합니다. 예시로는, v17.0.0.169
|
||||
app.commandLine.appendSwitch('ppapi-flash-version', '17.0.0.169');
|
||||
app.commandLine.appendSwitch('ppapi-flash-version', '17.0.0.169')
|
||||
|
||||
app.on('ready', () => {
|
||||
win = new BrowserWindow({
|
||||
|
|
@ -33,14 +45,15 @@ app.on('ready', () => {
|
|||
webPreferences: {
|
||||
plugins: true
|
||||
}
|
||||
});
|
||||
win.loadURL(`file://${__dirname}/index.html`);
|
||||
})
|
||||
win.loadURL(`file://${__dirname}/index.html`)
|
||||
// 이외의 코드
|
||||
});
|
||||
```
|
||||
|
||||
`app.getPath('pepperFlashSystemPlugin')` 형태로 호출하면 시스템에 설치된 Pepper
|
||||
Flash 플러그인의 경로를 가져올 수도 있습니다.
|
||||
직접 플러그인을 삽입하는 대신 시스템의 Pepper Flash 플러그인을 사용할 수도 있습니다.
|
||||
시스템상의 플러그인의 경로는 `app.getPath('pepperFlashSystemPlugin')`로 불러올 수
|
||||
있습니다.
|
||||
|
||||
## `<webview>` 태그를 이용하여 플러그인을 활성화
|
||||
|
||||
|
|
@ -59,3 +72,6 @@ Flash 플러그인의 경로를 가져올 수도 있습니다.
|
|||
Pepper 플래시 플러그인의 구조는 Electron과 일치해야 합니다. Windows에서 자주
|
||||
발생하는 문제는 32비트 버전의 플래시 플레이어를 64비트 버전의 Electron에서 사용하는
|
||||
것입니다.
|
||||
|
||||
Windows에선 `--ppapi-flash-path`로 전달되는 경로의 분리자로 `\`를 사용해야 합니다.
|
||||
POSIX-스타일 경로는 작동하지 않을 것입니다.
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче