Merge branch 'preco21-korean-docs-8'
This commit is contained in:
Cheng Zhao
commit
a87fe61f3a
15 changed files with 252 additions and 88 deletions
|
|
@ -8,10 +8,10 @@
|
|||
### [Electron](https://github.com/electron/electron/) 한국어 참조 문서
|
||||
|
||||
Electron 프레임워크는 JavaScript, HTML 그리고 CSS를 사용하여
|
||||
Cross-Platform 데스크톱 어플리케이션을 개발할 수 있도록 해주는 프레임워크입니다.
|
||||
Cross-Platform 데스크톱 애플리케이션을 개발할 수 있도록 해주는 프레임워크입니다.
|
||||
[Node.js](https://nodejs.org/)와 [Chromium](http://www.chromium.org)을 기반으로
|
||||
만들어졌으며 [Atom Editor](https://github.com/atom/atom)에 사용되고 있습니다.
|
||||
더 많은 어플리케이션은 [이곳](http://electron.atom.io/apps)에서 확인하세요.
|
||||
더 많은 애플리케이션은 [이곳](http://electron.atom.io/apps)에서 확인하세요.
|
||||
|
||||
Electron에 대한 중요한 알림을 받고 싶다면 Twitter에서
|
||||
[@ElectronJS](https://twitter.com/electronjs)를 팔로우 하세요.
|
||||
|
|
@ -77,4 +77,4 @@ npm install electron-prebuilt --save-dev
|
|||
- [`electron-jp`](https://electron-jp-slackin.herokuapp.com/) *(일본)* 커뮤니티
|
||||
|
||||
[awesome-electron](https://github.com/sindresorhus/awesome-electron) 프로젝트에
|
||||
커뮤니티가 운영중인 유용한 예시 어플리케이션과 도구, 리소스가 있으니 참고하기 바랍니다.
|
||||
커뮤니티가 운영중인 유용한 예시 애플리케이션과 도구, 리소스가 있으니 참고하기 바랍니다.
|
||||
|
|
|
|||
|
|
@ -165,6 +165,15 @@ Returns:
|
|||
|
||||
새로운 [browserWindow](browser-window.md)가 생성되었을 때 발생하는 이벤트입니다.
|
||||
|
||||
### Event: 'web-contents-created'
|
||||
|
||||
Returns:
|
||||
|
||||
* `event` Event
|
||||
* `webContents` WebContents
|
||||
|
||||
새로운 [webContents](web-contents.md)가 생성되었을 때 발생하는 이벤트입니다.
|
||||
|
||||
### Event: 'certificate-error'
|
||||
|
||||
Returns:
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
- [nuts][nuts]: *애플리케이션을 위한 똑똑한 릴리즈 서버이며 GitHub를 백엔드로
|
||||
사용합니다. Squirrel을 통해 자동 업데이트를 지원합니다. (Mac & Windows)*
|
||||
- [electron-release-server][electron-release-server]: *완벽하게 모든 기능을
|
||||
지원하는 electron 애플리케이션을 위한 자가 호스트 릴리즈 서버입니다. auto-updater와
|
||||
지원하는 electron 애플리케이션을 위한 자가 호스트 릴리즈 서버입니다. autoUpdater와
|
||||
호환됩니다*
|
||||
- [squirrel-updates-server][squirrel-updates-server]: *GitHub 릴리즈를 사용하는
|
||||
Squirrel.Mac 와 Squirrel.Windows를 위한 간단한 node.js 기반 서버입니다*
|
||||
|
|
@ -23,7 +23,7 @@ Squirrel.Mac 와 Squirrel.Windows를 위한 간단한 node.js 기반 서버입
|
|||
|
||||
### macOS
|
||||
|
||||
macOS에선 `auto-updater` 모듈이 [Squirrel.Mac][squirrel-mac]를 기반으로 작동합니다.
|
||||
macOS에선 `autoUpdater`가 [Squirrel.Mac][squirrel-mac]를 기반으로 작동합니다.
|
||||
따라서 이 모듈을 작동시키기 위해 특별히 준비해야 할 작업은 없습니다.
|
||||
서버 사이드 요구 사항은 [서버 지원][server-support]을 참고하세요.
|
||||
|
||||
|
|
@ -32,9 +32,11 @@ macOS에선 `auto-updater` 모듈이 [Squirrel.Mac][squirrel-mac]를 기반으
|
|||
|
||||
### Windows
|
||||
|
||||
Windows에선 `auto-updater` 모듈을 사용하기 전에 애플리케이션을 사용자의 장치에
|
||||
설치해야 합니다. [grunt-electron-installer][installer]를 사용하여 애플리케이션
|
||||
인스톨러를 만드는 것을 권장합니다.
|
||||
Windows에선 `autoUpdater`를 사용하기 전에 애플리케이션을 사용자의 장치에
|
||||
설치해야 합니다. [electron-winstaller][installer-lib],
|
||||
[electron-builder][electron-builder-lib] 또는
|
||||
[grunt-electron-installer][installer]를 사용하여 애플리케이션 인스톨러를 만드는 것을
|
||||
권장합니다.
|
||||
|
||||
Windows에선 `autoUpdater` 모듈을 사용하기 전에 사용자의 장치에 애플리케이션을
|
||||
설치해야 합니다. 따라서 [electron-winstaller][installer-lib] 모듈이나
|
||||
|
|
@ -52,7 +54,7 @@ Squirrel로 생성된 인스톨러는 [Application User Model ID][app-user-model
|
|||
|
||||
### Linux
|
||||
|
||||
Linux는 따로 `auto-updater`를 지원하지 않습니다.
|
||||
Linux는 따로 `autoUpdater`를 지원하지 않습니다.
|
||||
각 배포판의 패키지 관리자를 통해 애플리케이션 업데이트를 제공하는 것을 권장합니다.
|
||||
|
||||
## Events
|
||||
|
|
@ -117,6 +119,7 @@ Returns:
|
|||
[squirrel-windows]: https://github.com/Squirrel/Squirrel.Windows
|
||||
[installer]: https://github.com/electron/grunt-electron-installer
|
||||
[installer-lib]: https://github.com/electron/windows-installer
|
||||
[electron-builder-lib]: https://github.com/electron-userland/electron-builder
|
||||
[app-user-model-id]: https://msdn.microsoft.com/en-us/library/windows/desktop/dd378459(v=vs.85).aspx
|
||||
[electron-release-server]: https://github.com/ArekSredzki/electron-release-server
|
||||
[squirrel-updates-server]: https://github.com/Aluxian/squirrel-updates-server
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
@ -58,6 +97,11 @@ win.show();
|
|||
않습니다. 기본값은 `true` 입니다.
|
||||
* `closable` Boolean - 윈도우를 닫을 수 있는지 여부. Linux에선 구현되어있지 않습니다.
|
||||
기본값은 `true` 입니다.
|
||||
* `focusable` Boolean - 윈도우가 포커스될 수 있는지 여부입니다. 기본값은
|
||||
`true`입니다. Windows에선 `focusable: false`를 설정함으로써 암시적으로
|
||||
`skipTaskbar: true`도 설정됩니다. Linux에선 `focusable: false`를 설정함으로써
|
||||
윈도우가 wm과 함께 반응을 중지하며 모든 작업 영역에서 윈도우가 언제나 최상단에 있게
|
||||
됩니다.
|
||||
* `alwaysOnTop` Boolean - 윈도우이 언제나 다른 창들 위에 유지되는지 여부.
|
||||
기본값은 `false`입니다.
|
||||
* `fullscreen` Boolean - 윈도우의 전체화면 활성화 여부. 이 속성을 명시적으로
|
||||
|
|
@ -265,6 +309,11 @@ window.onbeforeunload = (e) => {
|
|||
|
||||
윈도우가 숨겨진 상태일 때 발생하는 이벤트입니다.
|
||||
|
||||
### Event: 'ready-to-show'
|
||||
|
||||
웹 페이지가 완전히 랜더링되어 윈도우가 시각적인 깜빡임없이 컨텐츠를 보여줄 수 있을 때
|
||||
발생하는 이벤트입니다.
|
||||
|
||||
### Event: 'maximize'
|
||||
|
||||
윈도우가 최대화됐을 때 발생하는 이벤트입니다.
|
||||
|
|
@ -389,12 +438,16 @@ ID에 해당하는 윈도우를 찾습니다.
|
|||
프로그램 작성에 사용할 수 없습니다. 만약 이미 로드된 확장 기능을 추가하려 한다면, 이
|
||||
메서드는 아무것도 반환하지 않고 콘솔에 경고가 로그됩니다.
|
||||
|
||||
**참고:** 이 API는 `app` 모듈의 `ready` 이벤트가 발생하기 전까지 사용할 수 없습니다.
|
||||
|
||||
### `BrowserWindow.removeDevToolsExtension(name)`
|
||||
|
||||
* `name` String
|
||||
|
||||
`name`에 해당하는 개발자 도구 확장 기능을 제거합니다.
|
||||
|
||||
**참고:** 이 API는 `app` 모듈의 `ready` 이벤트가 발생하기 전까지 사용할 수 없습니다.
|
||||
|
||||
### `BrowserWindow.getDevToolsExtensions()`
|
||||
|
||||
키는 확장 기능 이름을 값은 `name`과 `version` 속성을 포함하는 객체를 가지는 객체를
|
||||
|
|
@ -406,6 +459,8 @@ ID에 해당하는 윈도우를 찾습니다.
|
|||
let installed = BrowserWindow.getDevToolsExtensions().hasOwnProperty('devtron')
|
||||
```
|
||||
|
||||
**참고:** 이 API는 `app` 모듈의 `ready` 이벤트가 발생하기 전까지 사용할 수 없습니다.
|
||||
|
||||
## Instance Properties
|
||||
|
||||
`new BrowserWindow`로 생성한 객체는 다음과 같은 속성을 가지고 있습니다:
|
||||
|
|
@ -940,4 +995,10 @@ Linux 플랫폼에선 Unity 데스크톱 환경만 지원합니다. 그리고
|
|||
이 윈도우에서 일어나는 모든 마우스 이벤트가 이 윈도우 밑의 윈도우로 전달됩니다. 하지만
|
||||
이 윈도우가 포커스되어 있다면, 여전히 키보드 이벤트는 받을 수 있습니다.
|
||||
|
||||
### `win.setFocusable(focusable)` _Windows_
|
||||
|
||||
* `focusable` Boolean
|
||||
|
||||
윈도우가 포커스될 수 있는지 여부를 변경합니다.
|
||||
|
||||
[blink-feature-string]: https://cs.chromium.org/chromium/src/third_party/WebKit/Source/platform/RuntimeEnabledFeatures.in
|
||||
|
|
|
|||
|
|
@ -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 윈도우에서 텍스트가 선택되는 드래그 동작은 혼란을 야기할 수 있습니다. 예를
|
||||
들어 타이틀 바를 드래그 할 때 타이틀 바의 텍스트를 실수로 선택할 수 있습니다. 이를
|
||||
방지하기 위해 다음과 같이 드래그 영역의 텍스트 선택 기능을 비활성화해야 할 필요가
|
||||
있습니다:
|
||||
|
|
|
|||
|
|
@ -59,6 +59,7 @@ macOS에서의 `role`은 다음 값을 추가로 가질 수 있습니다:
|
|||
* `hideothers` - `hideOtherApplications` 액션에 대응
|
||||
* `unhide` - `unhideAllApplications` 액션에 대응
|
||||
* `front` - `arrangeInFront` 액션에 대응
|
||||
* `zoom` - `performZoom` 액션에 대응
|
||||
* `window` - 부 메뉴를 가지는 "Window" 메뉴
|
||||
* `help` - 부 메뉴를 가지는 "Help" 메뉴
|
||||
* `services` - 부 메뉴를 가지는 "Services" 메뉴
|
||||
|
|
|
|||
|
|
@ -65,6 +65,15 @@ const template = [
|
|||
accelerator: 'CmdOrCtrl+V',
|
||||
role: 'paste'
|
||||
},
|
||||
{
|
||||
label: 'Paste and Match Style',
|
||||
accelerator: 'Shift+Command+V',
|
||||
role: 'pasteandmatchstyle'
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
role: 'delete'
|
||||
},
|
||||
{
|
||||
label: 'Select All',
|
||||
accelerator: 'CmdOrCtrl+A',
|
||||
|
|
@ -173,7 +182,21 @@ if (process.platform === 'darwin') {
|
|||
]
|
||||
});
|
||||
// Window menu.
|
||||
template[3].submenu.push(
|
||||
template[3].submenu = [
|
||||
{
|
||||
label: 'Close',
|
||||
accelerator: 'CmdOrCtrl+W',
|
||||
role: 'close'
|
||||
},
|
||||
{
|
||||
label: 'Minimize',
|
||||
accelerator: 'CmdOrCtrl+M',
|
||||
role: 'minimize'
|
||||
},
|
||||
{
|
||||
label: 'Zoom',
|
||||
role: 'zoom'
|
||||
},
|
||||
{
|
||||
type: 'separator'
|
||||
},
|
||||
|
|
@ -181,7 +204,7 @@ if (process.platform === 'darwin') {
|
|||
label: 'Bring All to Front',
|
||||
role: 'front'
|
||||
}
|
||||
);
|
||||
];
|
||||
}
|
||||
|
||||
const menu = Menu.buildFromTemplate(template);
|
||||
|
|
@ -207,6 +230,11 @@ Linux에선 각 창의 상단에 표시됩니다.
|
|||
|
||||
**참고** 이 API는 `app`의 `ready` 이벤트가 발생한 이후에 호출해야 합니다.
|
||||
|
||||
### `Menu.getApplicationMenu()`
|
||||
|
||||
설정되어있는 어플리케이션 메뉴를 반환합니다. (`Menu`의 인스턴스) 만약 없다면 `null`을
|
||||
반환합니다.
|
||||
|
||||
### `Menu.sendActionToFirstResponder(action)` _macOS_
|
||||
|
||||
* `action` String
|
||||
|
|
|
|||
|
|
@ -196,7 +196,7 @@ appIcon.setContextMenu(contextMenu);
|
|||
* `y` Integer
|
||||
|
||||
트레이 아이콘의 컨텍스트 메뉴를 팝업시킵니다. `menu`가 전달되면, `menu`가 트레이
|
||||
메뉴의 컨텍스트 메뉴 대신 표시됩니다.
|
||||
아이콘의 컨텍스트 메뉴 대신 표시됩니다.
|
||||
|
||||
`position`은 Windows에서만 사용할 수 있으며 기본값은 (0, 0)입니다.
|
||||
|
||||
|
|
|
|||
|
|
@ -214,7 +214,7 @@ win.setThumbarButtons([
|
|||
{
|
||||
tooltip: 'button1',
|
||||
icon: path.join(__dirname, 'button1.png'),
|
||||
click() { console.log('button2 clicked'); }
|
||||
click() { console.log('button1 clicked'); }
|
||||
},
|
||||
{
|
||||
tooltip: 'button2',
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ request와 기여는 언제나 환영합니다.
|
|||
* `webSecurity`를 비활성화하지 않습니다. 이 옵션을 비활성화하면 동일-출처 정책도
|
||||
비활성화됩니다.
|
||||
* [`Content-Security-Policy`](http://www.html5rocks.com/en/tutorials/security/content-security-policy/)
|
||||
를 정의하고, 한정적인 규칙을 사용하세요 (ie: `script-src 'self'`)
|
||||
를 정의하고, 한정적인 규칙을 사용하세요 (i.e. `script-src 'self'`)
|
||||
* 문자열을 코드로 실행할 수 있는
|
||||
[`eval`을 덮어쓰고 비활성화](https://github.com/nylas/N1/blob/0abc5d5defcdb057120d726b271933425b75b415/static/index.js#L6)하세요.
|
||||
* `allowDisplayingInsecureContent`를 `true`로 설정하지 마세요.
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ xvfb-maybe electron-mocha ./test/*.js
|
|||
|
||||
Travis에선, `.travis.yml`이 대충 다음과 같이 되어야 합니다:
|
||||
|
||||
```
|
||||
```yml
|
||||
addons:
|
||||
apt:
|
||||
packages:
|
||||
|
|
|
|||
|
|
@ -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
|
||||
// macOS의 경우, /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-스타일 경로는 작동하지 않을 것입니다.
|
||||
|
|
|
|||
|
|
@ -39,12 +39,12 @@ app.start().then(function () {
|
|||
}).then(function (title) {
|
||||
// 윈도우의 제목을 검증합니다.
|
||||
assert.equal(title, 'My App')
|
||||
}).then(function () {
|
||||
// 애플리케이션을 중지합니다.
|
||||
return app.stop()
|
||||
}).catch(function (error) {
|
||||
// 테스트의 실패가 있다면 로깅합니다.
|
||||
console.error('Test failed', error.message)
|
||||
}).then(function () {
|
||||
// 애플리케이션을 중지합니다.
|
||||
return app.stop()
|
||||
})
|
||||
```
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue