Merge pull request #3519 from preco21/master
Update as upstream, some cleanups
This commit is contained in:
Cheng Zhao
commit
866cff8b9c
54 changed files with 1362 additions and 932 deletions
20
README-ko.md
20
README-ko.md
|
|
@ -8,8 +8,8 @@
|
|||
|
||||
:zap: *프레임워크 이름이 Atom Shell에서 Electron으로 변경되었습니다* :zap:
|
||||
|
||||
Electron 프레임워크는 JavaScript, HTML 그리고 CSS를 사용하여 Cross-Platform 데스크톱
|
||||
어플리케이션을 개발할 수 있도록 해주는 프레임워크입니다. 이 프레임워크는
|
||||
Electron 프레임워크는 JavaScript, HTML 그리고 CSS를 사용하여
|
||||
Cross-Platform 데스크톱 어플리케이션을 개발할 수 있도록 해주는 프레임워크입니다.
|
||||
[Node.js](https://nodejs.org/)와 [Chromium](http://www.chromium.org)을 기반으로
|
||||
만들어졌으며 [Atom Editor](https://github.com/atom/atom)에 사용되고 있습니다.
|
||||
|
||||
|
|
@ -17,17 +17,17 @@ Electron에 대한 중요한 알림을 받고 싶다면 Twitter에서
|
|||
[@ElectronJS](https://twitter.com/electronjs)를 팔로우 하세요.
|
||||
|
||||
이 프로젝트는 [기여자 규약 1.2](http://contributor-covenant.org/version/1/2/0/)을
|
||||
준수합니다. 따라서 이 프로젝트의 개발에 참여하려면 이 계약을 지켜야 합니다.
|
||||
받아들일 수 없는 행위를 발견했을 경우 atom@github.com로 보고 하십시오.
|
||||
준수합니다. 따라서 이 프로젝트의 개발에 참여하려면 이 계약을 지켜야 합니다. 받아들일 수
|
||||
없는 행위를 발견했을 경우 atom@github.com로 보고 하십시오.
|
||||
|
||||
## 다운로드
|
||||
|
||||
Linux, Windows, OS X 용으로 미리 빌드된 Electron 바이너리와 디버그 심볼이 준비되어
|
||||
있습니다. [releases](https://github.com/atom/electron/releases) 페이지에서
|
||||
받아 볼 수 있습니다.
|
||||
있습니다. [releases](https://github.com/atom/electron/releases) 페이지에서 받아 볼
|
||||
수 있습니다.
|
||||
|
||||
또한 [`npm`](https://docs.npmjs.com/)을 통해 미리 빌드된 Electron 바이너리를
|
||||
설치할 수도 있습니다:
|
||||
또한 [`npm`](https://docs.npmjs.com/)을 통해 미리 빌드된 Electron 바이너리를 설치할
|
||||
수도 있습니다:
|
||||
|
||||
```sh
|
||||
# $PATH에 `electron` 커맨드를 등록하고 전역에 설치합니다.
|
||||
|
|
@ -70,5 +70,5 @@ API 레퍼런스가 있습니다. Electron을 빌드 하는 방법과 프로젝
|
|||
- Slack의 [`Atom`](http://atom-slack.herokuapp.com/) 채널
|
||||
|
||||
[awesome-electron](https://github.com/sindresorhus/awesome-electron) 프로젝트에
|
||||
커뮤니티가 운영중인 유용한 예제 어플리케이션과 도구, 리소스가 있으니
|
||||
한번 참고해 보시기 바랍니다.
|
||||
커뮤니티가 운영중인 유용한 예제 어플리케이션과 도구, 리소스가 있으니 한번 참고해 보시기
|
||||
바랍니다.
|
||||
|
|
|
|||
|
|
@ -10,8 +10,9 @@ Accelerator는 키보드 단축키를 표현하는 문자열입니다, 여러
|
|||
|
||||
## 플랫폼에 관련하여 주의할 점
|
||||
|
||||
Linux와 Windows에서는 `Command`키가 없으므로 작동하지 않습니다. 대신에 `CommandOrControl`을
|
||||
사용하면 OS X의 `Command`와 Linux, Windows의 `Control` 모두 지원할 수 있습니다.
|
||||
Linux와 Windows에서는 `Command`키가 없으므로 작동하지 않습니다. 대신에
|
||||
`CommandOrControl`을 사용하면 OS X의 `Command`와 Linux, Windows의 `Control` 모두
|
||||
지원할 수 있습니다.
|
||||
|
||||
`Super`키는 Windows와 Linux 에서는 `윈도우`키를, OS X에서는 `Cmd`키로 맵핑됩니다.
|
||||
|
||||
|
|
|
|||
|
|
@ -18,9 +18,11 @@ app.on('window-all-closed', function() {
|
|||
### Event: 'will-finish-launching'
|
||||
|
||||
어플리케이션이 기본적인 시작 준비를 마치면 발생하는 이벤트입니다.
|
||||
Windows, Linux 운영체제에서의 `will-finish-launching` 이벤트는 `ready` 이벤트와 동일합니다.
|
||||
OS X에서의 이벤트는 `NSApplication`의 `applicationWillFinishLaunching`에 대한 알림으로 표현됩니다.
|
||||
대개 이곳에서 `open-file`과 `open-url` 이벤트 리스너를 설정하고 crash reporter와 auto updater를 시작합니다.
|
||||
Windows, Linux 운영체제에서의 `will-finish-launching` 이벤트는 `ready` 이벤트와
|
||||
동일합니다. OS X에서의 이벤트는 `NSApplication`의
|
||||
`applicationWillFinishLaunching`에 대한 알림으로 표현됩니다. 대개 이곳에서
|
||||
`open-file`과 `open-url` 이벤트 리스너를 설정하고 crash reporter와 auto updater를
|
||||
시작합니다.
|
||||
|
||||
대부분의 경우, 모든 것을 `ready` 이벤트 핸들러로 해결해야 합니다.
|
||||
|
||||
|
|
@ -35,10 +37,12 @@ Electron이 초기화를 끝냈을 때 발생하는 이벤트입니다.
|
|||
이 이벤트는 어플리케이션이 완전히 종료되지 않았을 때만 발생합니다.
|
||||
만약 사용자가 `Cmd + Q`를 입력했거나 개발자가 `app.quit()`를 호출했다면,
|
||||
Electron은 먼저 모든 윈도우 창의 종료를 시도하고 `will-quit` 이벤트를 발생시킵니다.
|
||||
그리고 `will-quit` 이벤트가 발생했을 땐 `window-all-closed` 이벤트가 발생하지 않습니다.
|
||||
그리고 `will-quit` 이벤트가 발생했을 땐 `window-all-closed` 이벤트가 발생하지
|
||||
않습니다.
|
||||
|
||||
**역주:** 이 이벤트는 말 그대로 현재 어플리케이션에서 윈도우 창만 완전히 종료됬을 때 발생하는 이벤트 입니다.
|
||||
따라서 어플리케이션을 완전히 종료하려면 이 이벤트에서 `app.quit()`를 호출해 주어야 합니다.
|
||||
**역주:** 이 이벤트는 말 그대로 현재 어플리케이션에서 윈도우 창만 완전히 종료됬을 때
|
||||
발생하는 이벤트 입니다. 따라서 어플리케이션을 완전히 종료하려면 이 이벤트에서
|
||||
`app.quit()`를 호출해 주어야 합니다.
|
||||
|
||||
### Event: 'before-quit'
|
||||
|
||||
|
|
@ -59,7 +63,8 @@ Returns:
|
|||
모든 윈도우 창들이 종료되고 어플리케이션이 종료되기 시작할 때 발생하는 이벤트 입니다.
|
||||
`event.preventDefault()` 호출을 통해 어플리케이션의 종료를 방지할 수 있습니다.
|
||||
|
||||
`will-quit` 와 `window-all-closed` 이벤트의 차이점을 확인하려면 `window-all-close` 이벤트의 설명을 참고하세요.
|
||||
`will-quit` 와 `window-all-closed` 이벤트의 차이점을 확인하려면 `window-all-close`
|
||||
이벤트의 설명을 참고하세요.
|
||||
|
||||
### Event: 'quit'
|
||||
|
||||
|
|
@ -74,9 +79,11 @@ Returns:
|
|||
|
||||
사용자가 어플리케이션을 통해 파일을 열고자 할 때 발생하는 이벤트입니다.
|
||||
|
||||
`open-file` 이벤트는 보통 어플리케이션이 열려 있을 때 OS가 파일을 열기 위해 어플리케이션을 재사용할 때 발생합니다.
|
||||
이 이벤트는 파일을 dock에 떨어트릴 때, 어플리케이션이 실행되기 전에도 발생합니다.
|
||||
따라서 이 이벤트를 제대로 처리하려면 `open-file` 이벤트 핸들러를 어플리케이션이 시작하기 전에 등록해 놓았는지 확실히 확인해야 합니다. (`ready` 이벤트가 발생하기 전에)
|
||||
`open-file` 이벤트는 보통 어플리케이션이 열려 있을 때 OS가 파일을 열기 위해
|
||||
어플리케이션을 재사용할 때 발생합니다. 이 이벤트는 파일을 dock에 떨어트릴 때,
|
||||
어플리케이션이 실행되기 전에도 발생합니다. 따라서 이 이벤트를 제대로 처리하려면
|
||||
`open-file` 이벤트 핸들러를 어플리케이션이 시작하기 전에 등록해 놓았는지 확실히
|
||||
확인해야 합니다. (`ready` 이벤트가 발생하기 전에)
|
||||
|
||||
이 이벤트를 처리할 땐 반드시 `event.preventDefault()`를 호출해야 합니다.
|
||||
|
||||
|
|
@ -132,7 +139,7 @@ Returns:
|
|||
|
||||
새로운 [browserWindow](browser-window.md)가 생성되었을 때 발생하는 이벤트 입니다.
|
||||
|
||||
### Event: 'select-certificate'
|
||||
### Event: 'select-client-certificate'
|
||||
|
||||
Returns:
|
||||
|
||||
|
|
@ -148,10 +155,11 @@ Returns:
|
|||
|
||||
`url`은 클라이언트 인증서를 요청하는 탐색 항목에 해당합니다.
|
||||
그리고 `callback`은 목록에서 필터링된 항목과 함께 호출될 필요가 있습니다.
|
||||
이 이벤트에서의 `event.preventDefault()` 호출은 초기 인증 때 저장된 데이터를 사용하는 것을 막습니다.
|
||||
이 이벤트에서의 `event.preventDefault()` 호출은 초기 인증 때 저장된 데이터를 사용하는
|
||||
것을 막습니다.
|
||||
|
||||
```javascript
|
||||
app.on('select-certificate', function(event, host, url, list, callback) {
|
||||
app.on('select-client-certificate', function(event, webContents, url, list, callback) {
|
||||
event.preventDefault();
|
||||
callback(list[0]);
|
||||
})
|
||||
|
|
@ -201,10 +209,12 @@ GPU가 작동하던 중 크래시가 일어났을 때 발생하는 이벤트입
|
|||
### `app.quit()`
|
||||
|
||||
모든 윈도우 창 종료를 시도합니다. `before-quit` 이벤트가 먼저 발생합니다.
|
||||
모든 윈도우 창이 성공적으로 종료되면 `will-quit` 이벤트가 발생하고 기본 동작에 따라 어플리케이션이 종료됩니다.
|
||||
모든 윈도우 창이 성공적으로 종료되면 `will-quit` 이벤트가 발생하고 기본 동작에 따라
|
||||
어플리케이션이 종료됩니다.
|
||||
|
||||
이 함수는 모든 `beforeunload`와 `unload` 이벤트 핸들러가 제대로 실행됨을 보장합니다.
|
||||
`beforeunload` 이벤트 핸들러에서 `false`를 반환했을 때 윈도우 창 종료가 취소 될 수 있습니다.
|
||||
`beforeunload` 이벤트 핸들러에서 `false`를 반환했을 때 윈도우 창 종료가 취소 될 수
|
||||
있습니다.
|
||||
|
||||
### `app.exit(exitCode)`
|
||||
|
||||
|
|
@ -212,7 +222,8 @@ GPU가 작동하던 중 크래시가 일어났을 때 발생하는 이벤트입
|
|||
|
||||
`exitCode`와 함께 어플리케이션을 즉시 종료합니다.
|
||||
|
||||
모든 윈도우 창은 사용자의 동의 여부에 상관없이 즉시 종료되며 `before-quit` 이벤트와 `will-quit` 이벤트가 발생하지 않습니다.
|
||||
모든 윈도우 창은 사용자의 동의 여부에 상관없이 즉시 종료되며 `before-quit` 이벤트와
|
||||
`will-quit` 이벤트가 발생하지 않습니다.
|
||||
|
||||
### `app.getAppPath()`
|
||||
|
||||
|
|
@ -253,39 +264,43 @@ GPU가 작동하던 중 크래시가 일어났을 때 발생하는 이벤트입
|
|||
* `path` String
|
||||
|
||||
`name`에 대한 특정 디렉터리나 파일의 경로인 `path`를 재정의합니다.
|
||||
만약 지정한 디렉터리의 경로가 존재하지 않으면 디렉터리가 이 메서드를 통해 새로 생성됩니다.
|
||||
재정의에 실패했을 땐 `Error`를 반환합니다.
|
||||
만약 지정한 디렉터리의 경로가 존재하지 않으면 디렉터리가 이 메서드를 통해 새로
|
||||
생성됩니다. 재정의에 실패했을 땐 `Error`를 반환합니다.
|
||||
|
||||
이 메서드는 `app.getPath`에 정의되어 있는 `name`의 경로만 재정의할 수 있습니다.
|
||||
|
||||
기본적으로, 웹 페이지의 쿠키와 캐시는 `userData` 디렉터리에 저장됩니다.
|
||||
만약 이 위치를 변경하고자 한다면, 반드시 `app` 모듈의 `ready` 이벤트가 발생하기 전에 `userData` 경로를 재정의해야 합니다.
|
||||
만약 이 위치를 변경하고자 한다면, 반드시 `app` 모듈의 `ready` 이벤트가 발생하기 전에
|
||||
`userData` 경로를 재정의해야 합니다.
|
||||
|
||||
### `app.getVersion()`
|
||||
|
||||
로드된 어플리케이션의 버전을 반환합니다.
|
||||
|
||||
만약 `package.json` 파일에서 어플리케이션의 버전을 찾을 수 없는 경우, 현재 번들 또는 실행 파일의 버전을 반환합니다.
|
||||
만약 `package.json` 파일에서 어플리케이션의 버전을 찾을 수 없는 경우, 현재 번들 또는
|
||||
실행 파일의 버전을 반환합니다.
|
||||
|
||||
### `app.getName()`
|
||||
|
||||
`package.json`에서 기술된 현재 어플리케이션의 이름을 반환합니다.
|
||||
|
||||
npm 모듈 규칙에 따라 대부분의 경우 `package.json`의 `name` 필드는 소문자 이름을 사용합니다.
|
||||
하지만 Electron은 `name`대신 `productName` 필드를 주로 사용하기 때문에 반드시 이 필드도 같이 지정해야 합니다.
|
||||
이 필드는 맨 앞글자가 대문자인 어플리케이션 전체 이름을 지정해야 합니다.
|
||||
npm 모듈 규칙에 따라 대부분의 경우 `package.json`의 `name` 필드는 소문자 이름을
|
||||
사용합니다. 하지만 Electron은 `name`대신 `productName` 필드를 주로 사용하기 때문에
|
||||
반드시 이 필드도 같이 지정해야 합니다. 이 필드는 맨 앞글자가 대문자인 어플리케이션
|
||||
전체 이름을 지정해야 합니다.
|
||||
|
||||
### `app.getLocale()`
|
||||
|
||||
현재 어플리케이션의 [로케일](https://ko.wikipedia.org/wiki/%EB%A1%9C%EC%BC%80%EC%9D%BC)을 반환합니다.
|
||||
현재 어플리케이션의 [로케일](https://ko.wikipedia.org/wiki/%EB%A1%9C%EC%BC%80%EC%9D%BC)을
|
||||
반환합니다.
|
||||
|
||||
### `app.resolveProxy(url, callback)`
|
||||
|
||||
* `url` URL
|
||||
* `callback` Function
|
||||
|
||||
`url`의 프록시 정보를 해석합니다.
|
||||
`callback`은 요청이 수행되었을 때 `callback(proxy)` 형태로 호출됩니다.
|
||||
`url`의 프록시 정보를 해석합니다. `callback`은 요청이 수행되었을 때
|
||||
`callback(proxy)` 형태로 호출됩니다.
|
||||
|
||||
### `app.addRecentDocument(path)` _OS X_ _Windows_
|
||||
|
||||
|
|
@ -293,8 +308,8 @@ npm 모듈 규칙에 따라 대부분의 경우 `package.json`의 `name` 필드
|
|||
|
||||
최근 문서 목록에 `path`를 추가합니다.
|
||||
|
||||
이 목록은 OS에 의해 관리됩니다.
|
||||
최근 문서 목록은 Windows의 경우 작업 표시줄에서 찾을 수 있고, OS X의 경우 dock 메뉴에서 찾을 수 있습니다.
|
||||
이 목록은 OS에 의해 관리됩니다. 최근 문서 목록은 Windows의 경우 작업 표시줄에서 찾을
|
||||
수 있고, OS X의 경우 dock 메뉴에서 찾을 수 있습니다.
|
||||
|
||||
### `app.clearRecentDocuments()` _OS X_ _Windows_
|
||||
|
||||
|
|
@ -317,8 +332,9 @@ Windows에서 사용할 수 있는 JumpList의 [Tasks][tasks] 카테고리에 `t
|
|||
* `iconPath` String - JumpList에 표시될 아이콘의 절대 경로.
|
||||
아이콘을 포함하고 있는 임의의 리소스 파일을 사용할 수 있습니다.
|
||||
보통 어플리케이션의 아이콘을 그대로 사용하기 위해 `process.execPath`를 지정합니다.
|
||||
* `iconIndex` Integer - 아이콘 파일의 인덱스. 만약 아이콘 파일이 두 개 이상의 아이콘을 가지고 있을 경우,
|
||||
사용할 아이콘의 인덱스를 이 옵션으로 지정해 주어야 합니다. 단, 아이콘을 하나만 포함하고 있는 경우 0을 지정하면 됩니다.
|
||||
* `iconIndex` Integer - 아이콘 파일의 인덱스. 만약 아이콘 파일이 두 개 이상의
|
||||
아이콘을 가지고 있을 경우, 사용할 아이콘의 인덱스를 이 옵션으로 지정해 주어야 합니다.
|
||||
단, 아이콘을 하나만 포함하고 있는 경우 0을 지정하면 됩니다.
|
||||
|
||||
### `app.allowNTLMCredentialsForAllDomains(allow)`
|
||||
|
||||
|
|
@ -326,33 +342,40 @@ Windows에서 사용할 수 있는 JumpList의 [Tasks][tasks] 카테고리에 `t
|
|||
|
||||
항상 동적으로 HTTP NTLM 또는 Negotiate 인증에 자격 증명을 보낼 것인지 설정합니다.
|
||||
|
||||
기본적으로 Electron은 "로컬 인터넷" 사이트 URL에서 NTLM/Kerberos 자격 증명만을 보냅니다. (같은 도메인 내에서)
|
||||
그러나 기업 네트워크가 잘못 구성된 경우 종종 작업에 실패할 수 있습니다.
|
||||
이때 이 메서드를 통해 모든 URL을 허용할 수 있습니다.
|
||||
기본적으로 Electron은 "로컬 인터넷" 사이트 URL에서 NTLM/Kerberos 자격 증명만을
|
||||
보냅니다. (같은 도메인 내에서) 그러나 기업 네트워크가 잘못 구성된 경우 종종 작업에
|
||||
실패할 수 있습니다. 이때 이 메서드를 통해 모든 URL을 허용할 수 있습니다.
|
||||
|
||||
### `app.makeSingleInstance(callback)`
|
||||
|
||||
* `callback` Function
|
||||
|
||||
현재 어플리케이션을 **Single Instance Application**으로 만들어줍니다.
|
||||
이 메서드는 어플리케이션이 여러 번 실행됐을 때 다중 인스턴스가 생성되는 대신 한 개의 주 인스턴스만 유지되도록 만들 수 있습니다.
|
||||
이때 중복 생성된 인스턴스는 주 인스턴스에 신호를 보내고 종료됩니다.
|
||||
이 메서드는 어플리케이션이 여러 번 실행됐을 때 다중 인스턴스가 생성되는 대신 한 개의
|
||||
주 인스턴스만 유지되도록 만들 수 있습니다. 이때 중복 생성된 인스턴스는 주 인스턴스에
|
||||
신호를 보내고 종료됩니다.
|
||||
|
||||
`callback`은 주 인스턴스가 생성된 이후 또 다른 인스턴스가 생성됐을 때 `callback(argv, workingDirectory)` 형식으로 호출됩니다.
|
||||
`argv`는 두 번째 인스턴스의 명령줄 인수이며 `workingDirectory`는 현재 작업중인 디렉터리입니다.
|
||||
보통 대부분의 어플리케이션은 이러한 콜백이 호출될 때 주 윈도우 창을 포커스하고 최소화되어있으면 창 복구를 실행합니다.
|
||||
`callback`은 주 인스턴스가 생성된 이후 또 다른 인스턴스가 생성됐을 때
|
||||
`callback(argv, workingDirectory)` 형식으로 호출됩니다. `argv`는 두 번째 인스턴스의
|
||||
명령줄 인수이며 `workingDirectory`는 현재 작업중인 디렉터리입니다. 보통 대부분의
|
||||
어플리케이션은 이러한 콜백이 호출될 때 주 윈도우 창을 포커스하고 최소화되어있으면 창
|
||||
복구를 실행합니다.
|
||||
|
||||
`callback`은 `app`의 `ready` 이벤트가 발생한 후 실행됨을 보장합니다.
|
||||
|
||||
이 메서드는 현재 실행된 어플리케이션이 주 인스턴스인 경우 `false`를 반환하고 어플리케이션의 로드가 계속 진행 되도록 합니다.
|
||||
그리고 두 번째 중복된 인스턴스 생성인 경우 `true`를 반환합니다. (다른 인스턴스에 인수가 전달됬을 때)
|
||||
이 불리언 값을 통해 중복 생성된 인스턴스는 즉시 종료시켜야 합니다.
|
||||
이 메서드는 현재 실행된 어플리케이션이 주 인스턴스인 경우 `false`를 반환하고
|
||||
어플리케이션의 로드가 계속 진행 되도록 합니다. 그리고 두 번째 중복된 인스턴스 생성인
|
||||
경우 `true`를 반환합니다. (다른 인스턴스에 인수가 전달됬을 때) 이 불리언 값을 통해
|
||||
중복 생성된 인스턴스는 즉시 종료시켜야 합니다.
|
||||
|
||||
OS X에선 사용자가 Finder에서 어플리케이션의 두 번째 인스턴스를 열려고 했을 때 자동으로 **Single Instance**화 하고 `open-file`과 `open-url` 이벤트를 발생시킵니다.
|
||||
그러나 사용자가 어플리케이션을 CLI 터미널에서 실행하면 운영체제 시스템의 싱글 인스턴스 메커니즘이 무시되며 그대로 중복 실행됩니다.
|
||||
따라서 OS X에서도 이 메서드를 통해 확실히 중복 실행을 방지하는 것이 좋습니다.
|
||||
OS X에선 사용자가 Finder에서 어플리케이션의 두 번째 인스턴스를 열려고 했을 때 자동으로
|
||||
**Single Instance**화 하고 `open-file`과 `open-url` 이벤트를 발생시킵니다. 그러나
|
||||
사용자가 어플리케이션을 CLI 터미널에서 실행하면 운영체제 시스템의 싱글 인스턴스
|
||||
메커니즘이 무시되며 그대로 중복 실행됩니다. 따라서 OS X에서도 이 메서드를 통해 확실히
|
||||
중복 실행을 방지하는 것이 좋습니다.
|
||||
|
||||
다음 예제는 두 번째 인스턴스가 생성되었을 때 중복된 인스턴스를 종료하고 주 어플리케이션 인스턴스의 윈도우 창을 활성화 시키는 예제입니다:
|
||||
다음 예제는 두 번째 인스턴스가 생성되었을 때 중복된 인스턴스를 종료하고 주 어플리케이션
|
||||
인스턴스의 윈도우 창을 활성화 시키는 예제입니다:
|
||||
|
||||
```javascript
|
||||
var myWindow = null;
|
||||
|
|
@ -386,8 +409,8 @@ app.on('ready', function() {
|
|||
|
||||
Chrominum의 명령줄에 스위치를 추가합니다. `value`는 추가적인 값을 뜻하며 옵션입니다.
|
||||
|
||||
**참고:** 이 메서드는 `process.argv`에 영향을 주지 않습니다.
|
||||
개발자들은 보통 Chrominum의 로우 레벨 수준의 동작을 제어하기 위해 주로 사용합니다.
|
||||
**참고:** 이 메서드는 `process.argv`에 영향을 주지 않습니다. 개발자들은 보통
|
||||
Chrominum의 로우 레벨 수준의 동작을 제어하기 위해 주로 사용합니다.
|
||||
|
||||
### `app.commandLine.appendArgument(value)`
|
||||
|
||||
|
|
@ -397,12 +420,14 @@ Chrominum의 명령줄에 인수를 추가합니다. 인수는 올바르게 인
|
|||
|
||||
### `app.dock.bounce([type])` _OS X_
|
||||
|
||||
* `type` String (optional) - `critical` 또는 `informational`을 지정할 수 있습니다. 기본값은 `informational` 입니다.
|
||||
* `type` String (optional) - `critical` 또는 `informational`을 지정할 수 있습니다.
|
||||
기본값은 `informational` 입니다.
|
||||
|
||||
`critical`이 전달되면 dock 아이콘이 어플리케이션이 활성화되거나 요청이 중지되기 전까지 통통 튑니다.
|
||||
`critical`이 전달되면 dock 아이콘이 어플리케이션이 활성화되거나 요청이 중지되기 전까지
|
||||
통통 튑니다.
|
||||
|
||||
`informational`이 전달되면 dock 아이콘이 1초만 통통 튑니다.
|
||||
하지만 어플리케이션이 활성화되거나 요청이 중지되기 전까지 요청은 계속 활성화로 유지 됩니다.
|
||||
`informational`이 전달되면 dock 아이콘이 1초만 통통 튑니다. 하지만 어플리케이션이
|
||||
활성화되거나 요청이 중지되기 전까지 요청은 계속 활성화로 유지 됩니다.
|
||||
|
||||
또한 요청을 취소할 때 사용할 수 있는 ID를 반환합니다.
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@
|
|||
|
||||
## 플랫폼별 참고 사항
|
||||
|
||||
`autoUpdater`는 기본적으로 모든 플랫폼에 대해 같은 API를 제공하지만, 여전히 플랫폼별로 약간씩 다른 점이 있습니다.
|
||||
`autoUpdater`는 기본적으로 모든 플랫폼에 대해 같은 API를 제공하지만, 여전히 플랫폼별로
|
||||
약간씩 다른 점이 있습니다.
|
||||
|
||||
### OS X
|
||||
|
||||
|
|
@ -14,16 +15,18 @@ OS X에선 `auto-updater` 모듈이 [Squirrel.Mac][squirrel-mac]를 기반으로
|
|||
|
||||
### Windows
|
||||
|
||||
Windows에선 `auto-updater` 모듈을 사용하기 전에 어플리케이션을 사용자의 장치에 설치해야 합니다.
|
||||
[grunt-electron-installer][installer]를 사용하여 어플리케이션 인스톨러를 만드는 것을 권장합니다.
|
||||
Windows에선 `auto-updater` 모듈을 사용하기 전에 어플리케이션을 사용자의 장치에
|
||||
설치해야 합니다. [grunt-electron-installer][installer]를 사용하여 어플리케이션
|
||||
인스톨러를 만드는 것을 권장합니다.
|
||||
|
||||
Squirrel로 생성된 인스톨러는 [Application User Model ID][app-user-model-id]와 함께
|
||||
`com.squirrel.PACKAGE_ID.YOUR_EXE_WITHOUT_DOT_EXE`으로 형식화된 바로가기 아이콘을 생성합니다.
|
||||
`com.squirrel.slack.Slack` 과 `com.squirrel.code.Code`가 그 예시입니다.
|
||||
`app.setAppUserModelId` API를 통해 어플리케이션 ID를 동일하게 유지해야 합니다.
|
||||
그렇지 않으면 Windows 작업 표시줄에 어플리케이션을 고정할 때 제대로 적용되지 않을 수 있습니다.
|
||||
`com.squirrel.PACKAGE_ID.YOUR_EXE_WITHOUT_DOT_EXE`으로 형식화된 바로가기 아이콘을
|
||||
생성합니다. `com.squirrel.slack.Slack` 과 `com.squirrel.code.Code`가 그 예시입니다.
|
||||
`app.setAppUserModelId` API를 통해 어플리케이션 ID를 동일하게 유지해야 합니다. 그렇지
|
||||
않으면 Windows 작업 표시줄에 어플리케이션을 고정할 때 제대로 적용되지 않을 수 있습니다.
|
||||
|
||||
서버 사이드 요구 사항 또한 OS X와 다르게 적용됩니다. 자세한 내용은 [Squirrel.Windows][squirrel-windows]를 참고하세요.
|
||||
서버 사이드 요구 사항 또한 OS X와 다르게 적용됩니다. 자세한 내용은
|
||||
[Squirrel.Windows][squirrel-windows]를 참고하세요.
|
||||
|
||||
### Linux
|
||||
|
||||
|
|
@ -78,7 +81,8 @@ Returns:
|
|||
|
||||
### `autoUpdater.checkForUpdates()`
|
||||
|
||||
서버에 새로운 업데이트가 있는지 요청을 보내 확인합니다. API를 사용하기 전에 `setFeedURL`를 호출해야 합니다.
|
||||
서버에 새로운 업데이트가 있는지 요청을 보내 확인합니다. API를 사용하기 전에
|
||||
`setFeedURL`를 호출해야 합니다.
|
||||
|
||||
### `autoUpdater.quitAndInstall()`
|
||||
|
||||
|
|
|
|||
|
|
@ -16,13 +16,16 @@ win.loadURL('https://github.com');
|
|||
win.show();
|
||||
```
|
||||
|
||||
또한 [Frameless Window](frameless-window.md) API를 사용하여 창 테두리가 없는 윈도우 창을 생성할 수 있습니다.
|
||||
또한 [Frameless Window](frameless-window.md) API를 사용하여 창 테두리가 없는 윈도우
|
||||
창을 생성할 수 있습니다.
|
||||
|
||||
## Class: BrowserWindow
|
||||
|
||||
`BrowserWindow`는 [EventEmitter](http://nodejs.org/api/events.html#events_class_events_eventemitter)를 상속받은 클래스 입니다.
|
||||
`BrowserWindow`는 [EventEmitter](http://nodejs.org/api/events.html#events_class_events_eventemitter)를
|
||||
상속받은 클래스 입니다.
|
||||
|
||||
`BrowserWindow`는 `options`를 통해 네이티브 속성을 포함한 새로운 윈도우 창을 생성합니다.
|
||||
`BrowserWindow`는 `options`를 통해 네이티브 속성을 포함한 새로운 윈도우 창을
|
||||
생성합니다.
|
||||
|
||||
### `new BrowserWindow(options)`
|
||||
|
||||
|
|
@ -33,7 +36,8 @@ win.show();
|
|||
* `x` Integer - 화면을 기준으로 창 좌측을 오프셋 한 위치.
|
||||
* `y` Integer - 화면을 기준으로 창 상단을 오프셋 한 위치.
|
||||
* `useContentSize` Boolean - `width`와 `height`를 웹 페이지의 크기로 사용합니다.
|
||||
이 속성을 사용하면 웹 페이지의 크기에 윈도우 프레임 크기가 추가되므로 실제 창은 조금 더 커질 수 있습니다.
|
||||
이 속성을 사용하면 웹 페이지의 크기에 윈도우 프레임 크기가 추가되므로 실제 창은 조금
|
||||
더 커질 수 있습니다.
|
||||
* `center` Boolean - 윈도우 창을 화면 정 중앙에 위치시킵니다.
|
||||
* `minWidth` Integer - 윈도우 창의 최소 가로 너비.
|
||||
* `minHeight` Integer - 윈도우 창의 최소 세로 높이.
|
||||
|
|
@ -46,42 +50,65 @@ win.show();
|
|||
* `skipTaskbar` Boolean - 작업표시줄 어플리케이션 아이콘 표시 여부.
|
||||
* `kiosk` Boolean - Kiosk(키오스크) 모드.
|
||||
* `title` String - 기본 윈도우 창 제목.
|
||||
* `icon` [NativeImage](native-image.md) - 윈도우 아이콘, 생략하면 실행 파일의 아이콘이 대신 사용됩니다.
|
||||
* `icon` [NativeImage](native-image.md) - 윈도우 아이콘, 생략하면 실행 파일의
|
||||
아이콘이 대신 사용됩니다.
|
||||
* `show` Boolean - 윈도우가 생성되면 보여줄지 여부.
|
||||
* `frame` Boolean - `false`로 지정하면 창을 [Frameless Window](frameless-window.md) 형태로 생성합니다.
|
||||
* `acceptFirstMouse` Boolean - 윈도우가 비활성화 상태일 때 내부 컨텐츠 클릭 시 활성화 되는 동시에 단일 mouse-down 이벤트를 발생시킬지 여부.
|
||||
* `frame` Boolean - `false`로 지정하면 창을 [Frameless Window](frameless-window.md)
|
||||
형태로 생성합니다.
|
||||
* `acceptFirstMouse` Boolean - 윈도우가 비활성화 상태일 때 내부 컨텐츠 클릭 시
|
||||
활성화 되는 동시에 단일 mouse-down 이벤트를 발생시킬지 여부.
|
||||
* `disableAutoHideCursor` Boolean - 파이핑중 자동으로 커서를 숨길지 여부.
|
||||
* `autoHideMenuBar` Boolean - `Alt`를 누르지 않는 한 어플리케이션 메뉴바를 숨길지 여부.
|
||||
* `enableLargerThanScreen` Boolean - 윈도우 창 크기가 화면 크기보다 크게 재조정 될 수 있는지 여부.
|
||||
* `backgroundColor` String - 16진수로 표현된 윈도우의 배경 색. `#66CD00` 또는 `#FFF`가 사용될 수 있습니다.
|
||||
* `autoHideMenuBar` Boolean - `Alt`를 누르지 않는 한 어플리케이션 메뉴바를 숨길지
|
||||
여부.
|
||||
* `enableLargerThanScreen` Boolean - 윈도우 창 크기가 화면 크기보다 크게 재조정 될
|
||||
수 있는지 여부.
|
||||
* `backgroundColor` String - 16진수로 표현된 윈도우의 배경 색. `#66CD00` 또는
|
||||
`#FFF`가 사용될 수 있습니다.
|
||||
이 속성은 Linux와 Windows에만 구현되어 있습니다.
|
||||
* `darkTheme` Boolean - 설정에 상관 없이 무조건 어두운 윈도우 테마를 사용합니다. 몇몇 GTK+3 데스크톱 환경에서만 작동합니다.
|
||||
* `darkTheme` Boolean - 설정에 상관 없이 무조건 어두운 윈도우 테마를 사용합니다.
|
||||
몇몇 GTK+3 데스크톱 환경에서만 작동합니다.
|
||||
* `transparent` Boolean - 윈도우 창을 [투명화](frameless-window.md)합니다.
|
||||
* `type` String - 윈도우 창 종류를 지정합니다.
|
||||
사용할 수 있는 창 종류는 `desktop`, `dock`, `toolbar`, `splash`, `notification`와 같습니다.
|
||||
이 속성은 Linux에서만 작동합니다.
|
||||
* `standardWindow` Boolean - OS X의 표준 윈도우를 텍스쳐 윈도우 대신 사용합니다. 기본 값은 `true`입니다.
|
||||
* `titleBarStyle` String, OS X - 윈도우 타이틀 바 스타일을 지정합니다. 이 속성은 OS X 10.10 Yosemite 이후 버전만 지원합니다.
|
||||
다음 3가지 종류의 값을 사용할 수 있습니다:
|
||||
사용할 수 있는 창 종류는 `desktop`, `dock`, `toolbar`, `splash`,
|
||||
`notification`와 같습니다. 이 속성은 Linux에서만 작동합니다.
|
||||
* `standardWindow` Boolean - OS X의 표준 윈도우를 텍스쳐 윈도우 대신 사용합니다.
|
||||
기본 값은 `true`입니다.
|
||||
* `titleBarStyle` String, OS X - 윈도우 타이틀 바 스타일을 지정합니다. 이 속성은
|
||||
OS X 10.10 Yosemite 이후 버전만 지원합니다. 다음 3가지 종류의 값을 사용할 수
|
||||
있습니다:
|
||||
* `default` 또는 미지정: 표준 Mac 회색 불투명 스타일을 사용합니다.
|
||||
* `hidden`: 타이틀 바를 숨기고 컨텐츠 전체를 윈도우 크기에 맞춥니다.
|
||||
타이틀 바는 없어지지만 표준 창 컨트롤 ("신호등 버튼")은 왼쪽 상단에 유지됩니다.
|
||||
* `hidden-inset`: `hidden` 타이틀 바 속성과 함께 신호등 버튼이 윈도우 모서리로부터 약간 더 안쪽으로 들어가도록합니다.
|
||||
* `webPreferences` Object - 웹 페이지 기능을 설정합니다. 사용할 수 있는 속성은 다음과 같습니다:
|
||||
* `hidden-inset`: `hidden` 타이틀 바 속성과 함께 신호등 버튼이 윈도우 모서리로부터
|
||||
약간 더 안쪽으로 들어가도록합니다.
|
||||
* `webPreferences` Object - 웹 페이지 기능을 설정합니다. 사용할 수 있는 속성은
|
||||
다음과 같습니다:
|
||||
* `nodeIntegration` Boolean - node(node.js) 통합 여부. 기본값은 `true`입니다.
|
||||
* `preload` String - 스크립트를 지정하면 페이지 내의 다른 스크립트가 작동하기 전에 로드됩니다.
|
||||
여기서 지정한 스크립트는 페이지의 node 통합 활성화 여부에 상관없이 언제나 모든 node API에 접근할 수 있습니다.
|
||||
그리고 `preload` 스크립트의 경로는 절대 경로로 지정해야 합니다.
|
||||
* `preload` String - 스크립트를 지정하면 페이지 내의 다른 스크립트가 작동하기 전에
|
||||
로드됩니다. 여기서 지정한 스크립트는 node 통합 활성화 여부에 상관없이 언제나 모든
|
||||
node API에 접근할 수 있습니다. 이 속성의 스크립트 경로는 절대 경로로 지정해야
|
||||
합니다.
|
||||
|
||||
note 통합이 비활성화되어있을 경우, preload 스크립트는 Node의 global 심볼들을
|
||||
다시 global 스코프로 다시 포함 시킬 수 있습니다. [여기](process.md#event-loaded)
|
||||
의 예제를 참고하세요.
|
||||
* `partition` String - 페이지에서 사용할 세션을 지정합니다. 만약 `partition`이
|
||||
`persist:`로 시작하면 페이지는 지속성 세션을 사용하며 다른 모든 앱 내의 페이지에서 같은 `partition`을 사용할 수 있습니다.
|
||||
만약 `persist:` 접두어로 시작하지 않으면 페이지는 인-메모리 세션을 사용합니다. 여러 페이지에서 같은 `partition`을 지정하면
|
||||
같은 세션을 공유할 수 있습니다. `partition`을 지정하지 않으면 어플리케이션의 기본 세션이 사용됩니다.
|
||||
* `zoomFactor` Number - 페이지의 기본 줌 값을 지정합니다. 예를 들어 `300%`를 표현하려면 `3.0`으로 지정합니다.
|
||||
`persist:`로 시작하면 페이지는 지속성 세션을 사용하며 다른 모든 앱 내의
|
||||
페이지에서 같은 `partition`을 사용할 수 있습니다. 만약 `persist:` 접두어로
|
||||
시작하지 않으면 페이지는 인-메모리 세션을 사용합니다. 여러 페이지에서 같은
|
||||
`partition`을 지정하면 같은 세션을 공유할 수 있습니다. `partition`을 지정하지
|
||||
않으면 어플리케이션의 기본 세션이 사용됩니다.
|
||||
* `zoomFactor` Number - 페이지의 기본 줌 값을 지정합니다. 예를 들어 `300%`를
|
||||
표현하려면 `3.0`으로 지정합니다.
|
||||
* `javascript` Boolean
|
||||
* `webSecurity` Boolean - `false`로 지정하면 same-origin 정책을 비활성화합니다. (이 속성은 보통 사람에 의해 웹 사이트를 테스트할 때 사용합니다)
|
||||
그리고 `allowDisplayingInsecureContent`와 `allowRunningInsecureContent`이 사용자로부터 `true`로 지정되지 않은 경우 `true`로 지정합니다.
|
||||
* `allowDisplayingInsecureContent` Boolean - https 페이지에서 http URL에서 로드한 이미지 같은 리소스를 표시할 수 있도록 허용합니다.
|
||||
* `allowRunningInsecureContent` Boolean - https 페이지에서 http URL에서 로드한 JavaScript와 CSS 또는 플러그인을 실행시킬 수 있도록 허용합니다.
|
||||
* `webSecurity` Boolean - `false`로 지정하면 same-origin 정책을 비활성화합니다.
|
||||
(이 속성은 보통 사람에 의해 웹 사이트를 테스트할 때 사용합니다) 그리고
|
||||
`allowDisplayingInsecureContent`와 `allowRunningInsecureContent`이
|
||||
사용자로부터 `true`로 지정되지 않은 경우 `true`로 지정합니다.
|
||||
* `allowDisplayingInsecureContent` Boolean - https 페이지에서 http URL에서
|
||||
로드한 이미지 같은 리소스를 표시할 수 있도록 허용합니다.
|
||||
* `allowRunningInsecureContent` Boolean - https 페이지에서 http URL에서 로드한
|
||||
JavaScript와 CSS 또는 플러그인을 실행시킬 수 있도록 허용합니다.
|
||||
* `images` Boolean
|
||||
* `java` Boolean
|
||||
* `textAreasAreResizable` Boolean
|
||||
|
|
@ -93,9 +120,11 @@ win.show();
|
|||
* `overlayScrollbars` Boolean
|
||||
* `overlayFullscreenVideo` Boolean
|
||||
* `sharedWorker` Boolean
|
||||
* `directWrite` Boolean - Windows에서 폰트 랜더링을 위해 DirectWrite를 사용하는지를 지정합니다.
|
||||
* `pageVisibility` Boolean - 현재 윈도우의 가시성을 반영하는 대신 페이지가 visible 또는 hidden 중 지정된 상태를 계속 유지하도록 합니다.
|
||||
이 속성을 `true`로 지정하면 DOM 타이머의 스로틀링을 방지할 수 있습니다.
|
||||
* `directWrite` Boolean - Windows에서 폰트 랜더링을 위해 DirectWrite를
|
||||
사용하는지를 지정합니다.
|
||||
* `pageVisibility` Boolean - 현재 윈도우의 가시성을 반영하는 대신 페이지가
|
||||
visible 또는 hidden 중 지정된 상태를 계속 유지하도록 합니다. 이 속성을 `true`로
|
||||
지정하면 DOM 타이머의 스로틀링을 방지할 수 있습니다.
|
||||
|
||||
## Events
|
||||
|
||||
|
|
@ -109,8 +138,8 @@ Returns:
|
|||
|
||||
* `event` Event
|
||||
|
||||
문서의 제목이 변경될 때 발생하는 이벤트 입니다.
|
||||
`event.preventDefault()`를 호출하여 네이티브 윈도우의 제목이 변경되는 것을 방지할 수 있습니다.
|
||||
문서의 제목이 변경될 때 발생하는 이벤트 입니다. `event.preventDefault()`를 호출하여
|
||||
네이티브 윈도우의 제목이 변경되는 것을 방지할 수 있습니다.
|
||||
|
||||
### Event: 'close'
|
||||
|
||||
|
|
@ -132,18 +161,19 @@ Electron에선 빈 문자열 또는 `false`를 전달할 경우 윈도우 종료
|
|||
window.onbeforeunload = function(e) {
|
||||
console.log('I do not want to be closed');
|
||||
|
||||
// 반드시 문자열을 반환해야 하고 사용자에게 페이지 언로드에 대한 확인 창을 보여주는 보통의 브라우저와는 달리
|
||||
// Electron은 개발자에게 더 많은 옵션을 제공합니다.
|
||||
// 반드시 문자열을 반환해야 하고 사용자에게 페이지 언로드에 대한 확인 창을 보여주는
|
||||
// 보통의 브라우저와는 달리 Electron은 개발자에게 더 많은 옵션을 제공합니다.
|
||||
// 빈 문자열을 반환하거나 false를 반환하면 페이지 언로드를 방지합니다.
|
||||
// 또한 dialog API를 통해 사용자에게 어플리케이션을 종료할지에 대한 확인 창을 보여줄 수도 있습니다.
|
||||
// 또한 dialog API를 통해 사용자에게 어플리케이션을 종료할지에 대한 확인 창을
|
||||
// 보여줄 수도 있습니다.
|
||||
e.returnValue = false;
|
||||
};
|
||||
```
|
||||
|
||||
### Event: 'closed'
|
||||
|
||||
윈도우 종료가 완료된 경우 발생하는 이벤트입니다.
|
||||
이 이벤트가 발생했을 경우 반드시 윈도우 창의 레퍼런스가 더 이상 사용되지 않도록 제거해야 합니다.
|
||||
윈도우 종료가 완료된 경우 발생하는 이벤트입니다. 이 이벤트가 발생했을 경우 반드시
|
||||
윈도우 창의 레퍼런스가 더 이상 사용되지 않도록 제거해야 합니다.
|
||||
|
||||
### Event: 'unresponsive'
|
||||
|
||||
|
|
@ -209,9 +239,10 @@ __참고__: OS X에선 이 이벤트가 그저 `moved` 이벤트의 별칭(alias
|
|||
|
||||
### Event: 'app-command' _Windows_
|
||||
|
||||
[App Command](https://msdn.microsoft.com/en-us/library/windows/desktop/ms646275(v=vs.85).aspx)가 호출됐을 때 발생하는 이벤트입니다.
|
||||
이 이벤트는 일반적으로 키보드 미디어 키 또는 브라우저 커맨드(기본 동작 키)에 관련되어 있습니다.
|
||||
예를 들어 Windows에서 작동하는 몇몇 마우스는 "뒤로가기" 같은 동작을 포함하고 있습니다.
|
||||
[App Command](https://msdn.microsoft.com/en-us/library/windows/desktop/ms646275(v=vs.85).aspx)가
|
||||
호출됐을 때 발생하는 이벤트입니다. 이 이벤트는 일반적으로 키보드 미디어 키 또는
|
||||
브라우저 커맨드(기본 동작 키)에 관련되어 있습니다. 예를 들어 Windows에서 작동하는
|
||||
몇몇 마우스는 "뒤로가기" 같은 동작을 포함하고 있습니다.
|
||||
|
||||
```javascript
|
||||
someWindow.on('app-command', function(e, cmd) {
|
||||
|
|
@ -272,9 +303,11 @@ var win = new BrowserWindow({ width: 800, height: 600 });
|
|||
|
||||
### `win.webContents`
|
||||
|
||||
윈도우의 `WebContents` 객체입니다. 모든 웹 페이지와 관련된 이벤트와 작업이 이 객체를 통해 수행됩니다.
|
||||
윈도우의 `WebContents` 객체입니다. 모든 웹 페이지와 관련된 이벤트와 작업이 이 객체를
|
||||
통해 수행됩니다.
|
||||
|
||||
메서드나 이벤트에 대한 자세한 내용은 [`webContents` 문서](web-contents.md)를 참고하세요.
|
||||
메서드나 이벤트에 대한 자세한 내용은 [`webContents` 문서](web-contents.md)를
|
||||
참고하세요.
|
||||
|
||||
### `win.id`
|
||||
|
||||
|
|
@ -288,15 +321,17 @@ var win = new BrowserWindow({ width: 800, height: 600 });
|
|||
|
||||
### `win.destroy()`
|
||||
|
||||
윈도우를 강제로 닫습니다. 웹 페이지의 `unload` 와 `beforeunload` 이벤트는 일어나지 않습니다.
|
||||
또한 이 윈도우의 `close`도 일어나지 않습니다. 하지만 `closed` 이벤트는 반드시 발생함을 보장합니다.
|
||||
윈도우를 강제로 닫습니다. 웹 페이지의 `unload` 와 `beforeunload` 이벤트는 일어나지
|
||||
않습니다. 또한 이 윈도우의 `close`도 일어나지 않습니다. 하지만 `closed` 이벤트는
|
||||
반드시 발생함을 보장합니다.
|
||||
|
||||
이 메서드는 렌더러 프로세스가 예기치 않게 크래시가 일어났을 경우에만 사용해야 합니다.
|
||||
|
||||
### `win.close()`
|
||||
|
||||
윈도우의 종료를 시도합니다. 이 메서드는 사용자가 윈도우의 닫기 버튼을 클릭했을 때와 같은 효과를 냅니다.
|
||||
웹 페이지는 로드가 취소되고 종료됩니다. 자세한 내용은 [close 이벤트](#event-close)를 참고하세요.
|
||||
윈도우의 종료를 시도합니다. 이 메서드는 사용자가 윈도우의 닫기 버튼을 클릭했을 때와
|
||||
같은 효과를 냅니다. 웹 페이지는 로드가 취소되고 종료됩니다. 자세한 내용은
|
||||
[close 이벤트](#event-close)를 참고하세요.
|
||||
|
||||
### `win.focus()`
|
||||
|
||||
|
|
@ -359,19 +394,22 @@ var win = new BrowserWindow({ width: 800, height: 600 });
|
|||
### `win.setAspectRatio(aspectRatio[, extraSize])` _OS X_
|
||||
|
||||
* `aspectRatio` 유지하려 하는 컨텐츠 뷰 일부의 종횡비
|
||||
* `extraSize` Object (optional) - 종횡비를 유지하는 동안 포함되지 않을 엑스트라 크기. 사용 가능한 속성:
|
||||
* `extraSize` Object (optional) - 종횡비를 유지하는 동안 포함되지 않을 엑스트라 크기.
|
||||
사용 가능한 속성:
|
||||
* `width` Integer
|
||||
* `height` Integer
|
||||
|
||||
이 메서드는 윈도우의 종횡비를 유지하는 기능을 수행합니다.
|
||||
엑스트라 크기는 개발자가 픽셀로 특정한 공간이 있을 때 종횡비 계산에서 제외됩니다.
|
||||
이 API는 윈도우의 크기와 컨텐츠 사이즈의 차이를 이미 고려하고 있습니다.
|
||||
이 메서드는 윈도우의 종횡비를 유지하는 기능을 수행합니다. 엑스트라 크기는 개발자가
|
||||
픽셀로 특정한 공간이 있을 때 종횡비 계산에서 제외됩니다. 이 API는 윈도우의 크기와
|
||||
컨텐츠 사이즈의 차이를 이미 고려하고 있습니다.
|
||||
|
||||
일반 윈도우에서 작동하는 HD 비디오 플레이어와 관련된 컨트롤을 고려합니다.
|
||||
만약 15 픽셀의 컨트롤이 왼쪽 가장자리에 있고 25 픽셀의 컨트롤이 오른쪽 가장자리에 있으며 50 픽셀의 컨트롤이 플레이어 밑에 있을 때
|
||||
플레이어 자체가 16:9 종횡비(HD의 표준 종횡비는 @1920x1080)를 유지하기 위해선 이 함수를 16/9, [ 40, 50 ] 인수와 함께 호출해야 합니다.
|
||||
두번째 인수 엑스트라 크기는 존재하는 크기만 관여하고 컨텐츠 뷰 내의 크기는 관여하지 않습니다.
|
||||
그저 전체 컨텐츠 뷰 내에 있는 모든 엑스트라 너비, 높이 영역이 합해집니다.
|
||||
만약 15 픽셀의 컨트롤이 왼쪽 가장자리에 있고 25 픽셀의 컨트롤이 오른쪽 가장자리에
|
||||
있으며 50 픽셀의 컨트롤이 플레이어 밑에 있을 때 플레이어 자체가 16:9 종횡비(HD의 표준
|
||||
종횡비는 @1920x1080)를 유지하기 위해선 이 함수를 16/9, [ 40, 50 ] 인수와 함께
|
||||
호출해야 합니다. 두번째 인수 엑스트라 크기는 존재하는 크기만 관여하고 컨텐츠 뷰 내의
|
||||
크기는 관여하지 않습니다. 그저 전체 컨텐츠 뷰 내에 있는 모든 엑스트라 너비, 높이 영역이
|
||||
합해집니다.
|
||||
|
||||
### `win.setBounds(options)`
|
||||
|
||||
|
|
@ -446,8 +484,8 @@ var win = new BrowserWindow({ width: 800, height: 600 });
|
|||
|
||||
* `flag` Boolean
|
||||
|
||||
윈도우가 언제나 다른 윈도우들 위에 표시되는지 여부를 지정합니다.
|
||||
이 설정을 활성화 하면 윈도우는 포커스 될 수 없는 툴박스 윈도우가 아닌 일반 윈도우로 유지됩니다.
|
||||
윈도우가 언제나 다른 윈도우들 위에 표시되는지 여부를 지정합니다. 이 설정을 활성화 하면
|
||||
윈도우는 포커스 될 수 없는 툴박스 윈도우가 아닌 일반 윈도우로 유지됩니다.
|
||||
|
||||
### `win.isAlwaysOnTop()`
|
||||
|
||||
|
|
@ -539,7 +577,8 @@ Windows 메시지 훅을 등록합니다. `callback`은 WndProc에서 메시지
|
|||
|
||||
* `edited` Boolean
|
||||
|
||||
윈도우의 문서가 변경되었는지 여부를 설정합니다. 그리고 `true`로 설정했을 때 타이틀 바의 아이콘이 회색으로 표시됩니다.
|
||||
윈도우의 문서가 변경되었는지 여부를 설정합니다. 그리고 `true`로 설정했을 때 타이틀 바의
|
||||
아이콘이 회색으로 표시됩니다.
|
||||
|
||||
### `win.isDocumentEdited()` _OS X_
|
||||
|
||||
|
|
@ -551,17 +590,17 @@ Windows 메시지 훅을 등록합니다. `callback`은 WndProc에서 메시지
|
|||
|
||||
### `win.capturePage([rect, ]callback)`
|
||||
|
||||
* `rect` Object (optional) - 캡쳐할 페이지의 영역. 사용할 수 있는 속성은 다음과 같습니다:
|
||||
* `rect` Object (optional) - 캡쳐할 페이지의 영역.
|
||||
사용할 수 있는 속성은 다음과 같습니다:
|
||||
* `x` Integer
|
||||
* `y` Integer
|
||||
* `width` Integer
|
||||
* `height` Integer
|
||||
* `callback` Function
|
||||
|
||||
페이지의 스크린샷을 `rect`에 설정한 만큼 캡처합니다.
|
||||
캡처가 완료되면 `callback`이 `callback(image)` 형식으로 호출됩니다.
|
||||
`image`는 [NativeImage](native-image.md)의 인스턴스이며 스크린샷 데이터를 담고있습니다.
|
||||
`rect`를 생략하면 페이지 전체를 캡처합니다.
|
||||
페이지의 스크린샷을 `rect`에 설정한 만큼 캡처합니다. 캡처가 완료되면 `callback`이
|
||||
`callback(image)` 형식으로 호출됩니다. `image`는 [NativeImage](native-image.md)의
|
||||
인스턴스이며 스크린샷 데이터를 담고있습니다. `rect`를 생략하면 페이지 전체를 캡처합니다.
|
||||
|
||||
### `win.print([options])`
|
||||
|
||||
|
|
@ -589,23 +628,24 @@ Windows 메시지 훅을 등록합니다. `callback`은 WndProc에서 메시지
|
|||
|
||||
* `progress` Double
|
||||
|
||||
작업표시줄에 표시되고 있는 어플리케이션 아이콘에 진행 상태를 표시합니다. [0, 1.0] 사이의 값을 지정할 수 있습니다.
|
||||
작업표시줄에 표시되고 있는 어플리케이션 아이콘에 진행 상태를 표시합니다. [0, 1.0]
|
||||
사이의 값을 지정할 수 있습니다.
|
||||
|
||||
진행 상태가 < 0 이 되면 진행 상태 표시를 제거합니다.
|
||||
진행 상태가 > 1 이 되면 불확정 상태 표시로 전환합니다.
|
||||
|
||||
Linux 플랫폼에선 Unity 데스크톱 환경만 지원합니다.
|
||||
그리고 이 기능을 사용하려면 `*.desktop` 파일을 생성한 후 `package.json`의 `desktopName` 필드에 파일 이름을 지정해야 합니다.
|
||||
기본적으로 `app.getName().desktop`을 통해 접근합니다.
|
||||
Linux 플랫폼에선 Unity 데스크톱 환경만 지원합니다. 그리고 이 기능을 사용하려면
|
||||
`*.desktop` 파일을 생성한 후 `package.json`의 `desktopName` 필드에 파일 이름을
|
||||
지정해야 합니다. 기본적으로 `app.getName().desktop`을 통해 접근합니다.
|
||||
|
||||
### `win.setOverlayIcon(overlay, description)` _Windows 7+_
|
||||
|
||||
* `overlay` [NativeImage](native-image.md) - 작업표시줄 아이콘의 우측 하단에 표시될 아이콘입니다.
|
||||
`null`로 지정하면 빈 오버레이가 사용됩니다
|
||||
* `overlay` [NativeImage](native-image.md) - 작업표시줄 아이콘의 우측 하단에 표시될
|
||||
아이콘입니다. `null`로 지정하면 빈 오버레이가 사용됩니다
|
||||
* `description` String - 접근성 설정에 의한 스크린 리더에 제공될 설명입니다
|
||||
|
||||
현재 작업표시줄 아이콘에 16px 크기의 오버레이를 지정합니다.
|
||||
보통 이 기능은 어플리케이션의 여러 상태를 사용자에게 소극적으로 알리기 위한 방법으로 사용됩니다.
|
||||
현재 작업표시줄 아이콘에 16px 크기의 오버레이를 지정합니다. 보통 이 기능은
|
||||
어플리케이션의 여러 상태를 사용자에게 소극적으로 알리기 위한 방법으로 사용됩니다.
|
||||
|
||||
### `win.setThumbarButtons(buttons)` _Windows 7+_
|
||||
|
||||
|
|
@ -615,23 +655,27 @@ Linux 플랫폼에선 Unity 데스크톱 환경만 지원합니다.
|
|||
|
||||
* `icon` [NativeImage](native-image.md) - 미리보기 툴바에 보여질 아이콘.
|
||||
* `tooltip` String (optional) - 버튼의 툴팁 텍스트.
|
||||
* `flags` Array (optional) - 버튼의 특정 동작 및 상태 제어. 기본적으로 `enabled`이 사용됩니다.
|
||||
이 속성은 다음 문자열들을 포함할 수 있습니다:
|
||||
* `flags` Array (optional) - 버튼의 특정 동작 및 상태 제어. 기본적으로 `enabled`이
|
||||
사용됩니다. 이 속성은 다음 문자열들을 포함할 수 있습니다:
|
||||
* `enabled` - 사용자가 사용할 수 있도록 버튼이 활성화 됩니다.
|
||||
* `disabled` - 버튼이 비활성화 됩니다. 버튼은 표시되지만 시각적인 상태는 사용자의 동작에 응답하지 않는
|
||||
비활성화 상태로 표시됩니다.
|
||||
* `dismissonclick` - 버튼이 클릭되면 작업표시줄 버튼의 미리보기(flyout)가 즉시 종료됩니다.
|
||||
* `disabled` - 버튼이 비활성화 됩니다. 버튼은 표시되지만 시각적인 상태는 사용자의
|
||||
동작에 응답하지 않는 비활성화 상태로 표시됩니다.
|
||||
* `dismissonclick` - 버튼이 클릭되면 작업표시줄 버튼의 미리보기(flyout)가 즉시
|
||||
종료됩니다.
|
||||
* `nobackground` - 버튼의 테두리를 표시하지 않습니다. 이미지에만 사용할 수 있습니다.
|
||||
* `hidden` - 버튼을 사용자에게 표시되지 않도록 숨깁니다.
|
||||
* `noninteractive` - 버튼은 활성화되어 있지만 반응이 제거되며 버튼을 눌러도 눌려지지 않은 상태를 유지합니다.
|
||||
이 값은 버튼을 알림의 용도로 사용하기 위해 만들어졌습니다.
|
||||
* `noninteractive` - 버튼은 활성화되어 있지만 반응이 제거되며 버튼을 눌러도
|
||||
눌려지지 않은 상태를 유지합니다. 이 값은 버튼을 알림의 용도로 사용하기 위해
|
||||
만들어졌습니다.
|
||||
* `click` - Function
|
||||
|
||||
윈도우 작업표시줄 버튼 레이아웃의 미리보기 이미지 영역에 미리보기 툴바와 버튼 세트를 지정합니다.
|
||||
반환되는 `Boolean` 값은 미리보기 툴바가 성공적으로 추가됬는지를 알려줍니다.
|
||||
윈도우 작업표시줄 버튼 레이아웃의 미리보기 이미지 영역에 미리보기 툴바와 버튼 세트를
|
||||
지정합니다. 반환되는 `Boolean` 값은 미리보기 툴바가 성공적으로 추가됬는지를 알려줍니다.
|
||||
|
||||
미리보기 이미지 영역의 제한된 크기로 인해 미리보기 툴바에 추가될 수 있는 최대 버튼의 개수는 7개이며 이 이상 추가될 수 없습니다.
|
||||
플랫폼의 제약으로 인해 미리보기 툴바는 한 번 설정되면 삭제할 수 없습니다. 하지만 이 API에 빈 배열을 전달하여 버튼들을 제거할 수 있습니다.
|
||||
미리보기 이미지 영역의 제한된 크기로 인해 미리보기 툴바에 추가될 수 있는 최대 버튼의
|
||||
개수는 7개이며 이 이상 추가될 수 없습니다. 플랫폼의 제약으로 인해 미리보기 툴바는 한 번
|
||||
설정되면 삭제할 수 없습니다. 하지만 이 API에 빈 배열을 전달하여 버튼들을 제거할 수
|
||||
있습니다.
|
||||
|
||||
### `win.showDefinitionForSelection()` _OS X_
|
||||
|
||||
|
|
@ -644,7 +688,8 @@ Linux 플랫폼에선 Unity 데스크톱 환경만 지원합니다.
|
|||
메뉴 막대 자동 숨김 기능을 활성화 합니다.
|
||||
숨겨진 메뉴는 사용자가 `Alt` 키를 단일 입력했을 때만 표시됩니다.
|
||||
|
||||
메뉴 막대가 이미 표시되고 있을 때 `setAutoHideMenuBar(true)`를 호출한다고 해서 메뉴가 즉시 숨겨지지는 않습니다.
|
||||
메뉴 막대가 이미 표시되고 있을 때 `setAutoHideMenuBar(true)`를 호출한다고 해서
|
||||
메뉴가 즉시 숨겨지지는 않습니다.
|
||||
|
||||
### `win.isMenuBarAutoHide()`
|
||||
|
||||
|
|
@ -654,8 +699,8 @@ Linux 플랫폼에선 Unity 데스크톱 환경만 지원합니다.
|
|||
|
||||
* `visible` Boolean
|
||||
|
||||
메뉴 막대의 표시 여부를 설정합니다.
|
||||
만약 메뉴 막대 자동 숨김 상태라면 여전히 사용자가 `Alt` 키를 입력하여 메뉴 막대를 표시되도록 할 수 있습니다.
|
||||
메뉴 막대의 표시 여부를 설정합니다. 만약 메뉴 막대 자동 숨김 상태라면 여전히 사용자가
|
||||
`Alt` 키를 입력하여 메뉴 막대를 표시되도록 할 수 있습니다.
|
||||
|
||||
**역주:** 기본 메뉴 막대를 완전히 없애려면 `win.setMenu(null)`를 호출해야 합니다.
|
||||
단순히 이 API를 사용하면 여전히 메뉴에 등록된 핫 키가 작동합니다.
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
# 크롬 명령줄 스위치 지원
|
||||
|
||||
크롬 명령줄(Command-Line) 스위치는 크롬 브라우저에서 제공되는 추가 옵션이며 Electron에서도 지원합니다.
|
||||
[app][app]의 [ready][ready]이벤트가 작동하기 전에 [app.commandLine.appendSwitch][append-switch] API를 사용하면
|
||||
어플리케이션 내부에서 스위치들을 추가할 수 있습니다:
|
||||
크롬 명령줄(Command-Line) 스위치는 크롬 브라우저에서 제공되는 추가 옵션이며
|
||||
Electron에서도 지원합니다. [app][app]의 [ready][ready]이벤트가 작동하기 전에
|
||||
[app.commandLine.appendSwitch][append-switch] API를 사용하면 어플리케이션 내부에서
|
||||
스위치를 추가할 수 있습니다:
|
||||
|
||||
```javascript
|
||||
const app = require('electron').app;
|
||||
|
|
@ -32,8 +33,8 @@ HTTP 요청 캐시를 비활성화 합니다.
|
|||
|
||||
## --js-flags=`flags`
|
||||
|
||||
JS 엔진에 지정한 플래그를 전달합니다.
|
||||
`flags`를 메인 프로세스에서 활성화하고자 한다면, Electron이 시작되기 전에 스위치를 전달해야 합니다.
|
||||
JS 엔진에 지정한 플래그를 전달합니다. `flags`를 메인 프로세스에서 활성화하고자 한다면,
|
||||
Electron이 시작되기 전에 스위치를 전달해야 합니다.
|
||||
|
||||
```bash
|
||||
$ electron --js-flags="--harmony_proxies --harmony_collections" your-app
|
||||
|
|
@ -41,11 +42,12 @@ $ electron --js-flags="--harmony_proxies --harmony_collections" your-app
|
|||
|
||||
## --proxy-server=`address:port`
|
||||
|
||||
시스템 설정의 프록시 서버를 무시하고 지정한 서버로 연결합니다. HTTP와 HTTPS 요청에만 적용됩니다.
|
||||
시스템 설정의 프록시 서버를 무시하고 지정한 서버로 연결합니다. HTTP와 HTTPS 요청에만
|
||||
적용됩니다.
|
||||
|
||||
시스템 프록시 서버 설정을 무시하고 지정한 서버로 연결합니다.
|
||||
이 스위치는 HTTP와 HTTPS 그리고 WebSocket 요청에만 적용됩니다.
|
||||
그리고 모든 프록시 서버가 HTTPS가 WebSocket 요청을 지원하지 않고 있을 수 있으므로 사용시 주의해야 합니다.
|
||||
시스템 프록시 서버 설정을 무시하고 지정한 서버로 연결합니다. 이 스위치는 HTTP와 HTTPS
|
||||
그리고 WebSocket 요청에만 적용됩니다. 그리고 모든 프록시 서버가 HTTPS가 WebSocket
|
||||
요청을 지원하지 않고 있을 수 있으므로 사용시 주의해야 합니다.
|
||||
|
||||
## --proxy-pac-url=`url`
|
||||
|
||||
|
|
@ -53,7 +55,8 @@ $ electron --js-flags="--harmony_proxies --harmony_collections" your-app
|
|||
|
||||
## --no-proxy-server
|
||||
|
||||
프록시 서버를 사용하지 않습니다. 다른 프록시 서버 플래그 및 설정을 무시하고 언제나 직접 연결을 사용합니다.
|
||||
프록시 서버를 사용하지 않습니다. 다른 프록시 서버 플래그 및 설정을 무시하고 언제나 직접
|
||||
연결을 사용합니다.
|
||||
|
||||
## --host-rules=`rules`
|
||||
|
||||
|
|
@ -61,24 +64,21 @@ Hostname 맵핑 규칙을 설정합니다. (`,`로 구분)
|
|||
|
||||
예시:
|
||||
|
||||
* `MAP * 127.0.0.1` Forces all hostnames to be mapped to 127.0.0.1
|
||||
* `MAP *.google.com proxy` Forces all google.com subdomains to be resolved to
|
||||
"proxy".
|
||||
* `MAP test.com [::1]:77` Forces "test.com" to resolve to IPv6 loopback. Will
|
||||
also force the port of the resulting socket address to be 77.
|
||||
* `MAP * baz, EXCLUDE www.google.com` Remaps everything to "baz", except for
|
||||
"www.google.com".
|
||||
|
||||
이 맵핑은 네트워크 요청시의 endpoint를 지정합니다. (TCP 연결과 직접 연결의 호스트 resolver, http 프록시 연결의 `CONNECT`, `SOCKS` 프록시 연결의 endpoint 호스트)
|
||||
* `MAP * 127.0.0.1` 강제적으로 모든 호스트네임을 127.0.0.1로 맵핑합니다
|
||||
* `MAP *.google.com proxy` 강제적으로 모든 google.com의 서브도메인을 "proxy"로
|
||||
연결합니다
|
||||
* `MAP test.com [::1]:77` 강제적으로 "test.com"을 IPv6 루프백으로 연결합니다.
|
||||
소켓 주소의 포트 또한 77로 고정됩니다.
|
||||
* `MAP * baz, EXCLUDE www.google.com` "www.google.com"을 제외한 모든 것들을
|
||||
"baz"로 맵핑합니다.
|
||||
|
||||
이 맵핑은 네트워크 요청시의 endpoint를 지정합니다. (TCP 연결과 직접 연결의 호스트
|
||||
resolver, http 프록시 연결의 `CONNECT`, `SOCKS` 프록시 연결의 endpoint 호스트)
|
||||
|
||||
## --host-resolver-rules=`rules`
|
||||
|
||||
`--host-rules` 플래그와 비슷하지만 이 플래그는 host resolver에만 적용됩니다.
|
||||
|
||||
[app]: app.md
|
||||
[append-switch]: app.md#appcommandlineappendswitchswitch-value
|
||||
[ready]: app.md#event-ready
|
||||
|
||||
## --ignore-certificate-errors
|
||||
|
||||
인증서 에러를 무시합니다.
|
||||
|
|
@ -97,7 +97,8 @@ Net log 이벤트를 활성화하고 `path`에 로그를 기록합니다.
|
|||
|
||||
## --ssl-version-fallback-min=`version`
|
||||
|
||||
TLS fallback에서 사용할 SSL/TLS 최소 버전을 지정합니다. ("tls1", "tls1.1", "tls1.2")
|
||||
TLS fallback에서 사용할 SSL/TLS 최소 버전을 지정합니다. ("tls1", "tls1.1",
|
||||
"tls1.2")
|
||||
|
||||
## --cipher-suite-blacklist=`cipher_suites`
|
||||
|
||||
|
|
@ -107,21 +108,29 @@ SSL 암호화를 비활성화할 대상 목록을 지정합니다. (`,`로 구
|
|||
|
||||
Chromium의 로그를 콘솔에 출력합니다.
|
||||
|
||||
이 스위치는 어플리케이션이 로드되기 전에 분석 되므로 `app.commandLine.appendSwitch` 메서드에선 사용할 수 없습니다.
|
||||
하지만 `ELECTRON_ENABLE_LOGGING` 환경 변수를 설정하면 본 스위치를 지정한 것과 같은 효과를 낼 수 있습니다.
|
||||
이 스위치는 어플리케이션이 로드되기 전에 분석 되므로 `app.commandLine.appendSwitch`
|
||||
메서드에선 사용할 수 없습니다. 하지만 `ELECTRON_ENABLE_LOGGING` 환경 변수를 설정하면
|
||||
본 스위치를 지정한 것과 같은 효과를 낼 수 있습니다.
|
||||
|
||||
## --v=`log_level`
|
||||
|
||||
기본 V-logging 최대 활성화 레벨을 지정합니다. 기본값은 0입니다. 기본적으로 양수를 레벨로 사용합니다.
|
||||
기본 V-logging 최대 활성화 레벨을 지정합니다. 기본값은 0입니다. 기본적으로 양수를
|
||||
레벨로 사용합니다.
|
||||
|
||||
이 스위치는 `--enable-logging` 스위치를 같이 지정해야 작동합니다.
|
||||
|
||||
## --vmodule=`pattern`
|
||||
|
||||
`--v` 옵션에 전달된 값을 덮어쓰고 모듈당 최대 V-logging 레벨을 지정합니다.
|
||||
예를 들어 `my_module=2,foo*=3`는 `my_module.*`, `foo*.*`와 같은 파일 이름 패턴을 가진 모든 소스 코드들의 로깅 레벨을 각각 2와 3으로 설정합니다.
|
||||
예를 들어 `my_module=2,foo*=3`는 `my_module.*`, `foo*.*`와 같은 파일 이름 패턴을
|
||||
가진 모든 소스 코드들의 로깅 레벨을 각각 2와 3으로 설정합니다.
|
||||
|
||||
또한 슬래시(`/`) 또는 백슬래시(`\`)를 포함하는 패턴은 지정한 경로에 대해 패턴을 테스트 합니다.
|
||||
예를 들어 `*/foo/bar/*=2` 표현식은 `foo/bar` 디렉터리 안의 모든 소스 코드의 로깅 레벨을 2로 지정합니다.
|
||||
또한 슬래시(`/`) 또는 백슬래시(`\`)를 포함하는 패턴은 지정한 경로에 대해 패턴을 테스트
|
||||
합니다. 예를 들어 `*/foo/bar/*=2` 표현식은 `foo/bar` 디렉터리 안의 모든 소스 코드의
|
||||
로깅 레벨을 2로 지정합니다.
|
||||
|
||||
이 스위치는 `--enable-logging` 스위치를 같이 지정해야 작동합니다.
|
||||
|
||||
[app]: app.md
|
||||
[append-switch]: app.md#appcommandlineappendswitchswitch-value
|
||||
[ready]: app.md#event-ready
|
||||
|
|
|
|||
|
|
@ -1,13 +1,15 @@
|
|||
# clipboard
|
||||
|
||||
`clipboard` 모듈은 복사/붙여넣기 작업을 수행하는 방법을 제공합니다. 다음 예제는 클립보드에 문자열을 씁니다:
|
||||
`clipboard` 모듈은 복사/붙여넣기 작업을 수행하는 방법을 제공합니다. 다음 예제는
|
||||
클립보드에 문자열을 씁니다:
|
||||
|
||||
```javascript
|
||||
const clipboard = require('electron').clipboard;
|
||||
clipboard.writeText('Example String');
|
||||
```
|
||||
|
||||
X Window 시스템에선 selection 클립보드도 존재합니다. 이를 사용하려면 인자 뒤에 `selection` 문자열을 같이 지정해주어야 합니다:
|
||||
X Window 시스템에선 selection 클립보드도 존재합니다. 이를 사용하려면 인자 뒤에
|
||||
`selection` 문자열을 같이 지정해주어야 합니다:
|
||||
|
||||
```javascript
|
||||
clipboard.writeText('Example String', 'selection');
|
||||
|
|
@ -18,7 +20,8 @@ console.log(clipboard.readText('selection'));
|
|||
|
||||
`clipboard` 모듈은 다음과 같은 메서드를 가지고 있습니다:
|
||||
|
||||
**참고:** Experimental 마크가 붙은 API는 실험적인 기능이며 차후 최신 버전에서 제거될 수 있습니다.
|
||||
**참고:** Experimental 마크가 붙은 API는 실험적인 기능이며 차후 최신 버전에서 제거될
|
||||
수 있습니다.
|
||||
|
||||
### `clipboard.readText([type])`
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
# contentTracing
|
||||
|
||||
`content-tracing` 모듈은 Chromium 컨텐츠 모듈단에서 생성된 데이터를 수집하고 추적하는데 사용됩니다.
|
||||
이 모듈은 웹 인터페이스를 포함하고 있지 않으며 크롬 브라우저에서 `chrome://tracing/` 페이지를 열어 생성된 파일을 로드하면 결과를 볼 수 있습니다.
|
||||
`content-tracing` 모듈은 Chromium 컨텐츠 모듈단에서 생성된 데이터를 수집하고
|
||||
추적하는데 사용됩니다. 이 모듈은 웹 인터페이스를 포함하고 있지 않으며 크롬
|
||||
브라우저에서 `chrome://tracing/` 페이지를 열어 생성된 파일을 로드하면 결과를 볼 수
|
||||
있습니다.
|
||||
|
||||
```javascript
|
||||
const contentTracing = require('electron').contentTracing;
|
||||
|
|
@ -32,7 +34,8 @@ contentTracing.startRecording(options, function() {
|
|||
|
||||
카테고리 그룹 세트를 가져옵니다. 카테고리 그룹은 도달된 코드 경로를 변경할 수 있습니다.
|
||||
|
||||
모든 child 프로세스가 `getCategories` 요청을 승인하면 `callback`이 한 번 호출되며 인자에 카테고리 그룹의 배열이 전달됩니다.
|
||||
모든 child 프로세스가 `getCategories` 요청을 승인하면 `callback`이 한 번 호출되며
|
||||
인자에 카테고리 그룹의 배열이 전달됩니다.
|
||||
|
||||
### `contentTracing.startRecording(options, callback)`
|
||||
|
||||
|
|
@ -43,12 +46,13 @@ contentTracing.startRecording(options, function() {
|
|||
|
||||
모든 프로세스에서 레코딩을 시작합니다.
|
||||
|
||||
레코딩은 지역적으로 즉시 실행됩니다. 그리고 비동기로 child 프로세스는 곧 EnableRecording 요청을 받게 됩니다.
|
||||
모든 child 프로세스가 `startRecording` 요청을 승인하면 `callback`이 한 번 호출됩니다.
|
||||
레코딩은 지역적으로 즉시 실행됩니다. 그리고 비동기로 child 프로세스는 곧
|
||||
EnableRecording 요청을 받게 됩니다. 모든 child 프로세스가 `startRecording` 요청을
|
||||
승인하면 `callback`이 한 번 호출됩니다.
|
||||
|
||||
`categoryFilter`는 어떤 카테고리 그룹이 트레이싱 되어야 하는지 필터링할 수 있습니다.
|
||||
필터는 `-` 접두사를 통해 특정 카테고리 그룹을 제외할 수 있습니다.
|
||||
카테고리 패턴은 같은 리스트 내에서 포함과 제외를 함께 사용할 수 없습니다.
|
||||
필터는 `-` 접두사를 통해 특정 카테고리 그룹을 제외할 수 있습니다. 카테고리 패턴은 같은
|
||||
리스트 내에서 포함과 제외를 함께 사용할 수 없습니다.
|
||||
|
||||
예제:
|
||||
|
||||
|
|
@ -56,7 +60,8 @@ contentTracing.startRecording(options, function() {
|
|||
* `test_MyTest*,test_OtherStuff`,
|
||||
* `"-excluded_category1,-excluded_category2`
|
||||
|
||||
`traceOptions`은 어떤 종류의 트레이싱을 사용할 수 있는지 지정하고 콤마로 리스트를 구분합니다.
|
||||
`traceOptions`은 어떤 종류의 트레이싱을 사용할 수 있는지 지정하고 콤마로 리스트를
|
||||
구분합니다.
|
||||
|
||||
사용할 수 있는 옵션은 다음과 같습니다:
|
||||
|
||||
|
|
@ -67,12 +72,13 @@ contentTracing.startRecording(options, function() {
|
|||
* `enable-systrace`
|
||||
|
||||
첫번째부터 3번째까지의 옵션은 추적 레코딩 모드입니다. 이에 따라 상호 배타적입니다.
|
||||
만약 레코딩 모드가 한 개 이상 지정되면 마지막 지정한 모드만 사용됩니다.
|
||||
어떤 모드도 설정되지 않았다면 `record-until-full` 모드가 기본으로 사용됩니다.
|
||||
만약 레코딩 모드가 한 개 이상 지정되면 마지막 지정한 모드만 사용됩니다. 어떤 모드도
|
||||
설정되지 않았다면 `record-until-full` 모드가 기본으로 사용됩니다.
|
||||
|
||||
추적 옵션은 `traceOptions`이 파싱되어 적용되기 전까지 다음과 같은 기본값이 사용됩니다.
|
||||
|
||||
`record-until-full`이 기본 모드, `enable-sampling`과 `enable-systrace`옵션은 포함되지 않음
|
||||
`record-until-full`이 기본 모드, `enable-sampling`과 `enable-systrace`옵션은
|
||||
포함되지 않음
|
||||
|
||||
## `contentTracing.stopRecording(resultFilePath, callback)`
|
||||
|
||||
|
|
@ -81,15 +87,18 @@ contentTracing.startRecording(options, function() {
|
|||
|
||||
모든 프로세스에서 레코딩을 중지합니다.
|
||||
|
||||
Child 프로세스는 일반적으로 추적 데이터와 희귀한 플러시 그리고 추적 데이터를 메인 프로세스로 보내는 작업에 대해 캐싱 합니다.
|
||||
이러한 일을 하는 이유는 IPC를 통해 추적 데이터를 보내는 작업은 매우 비싼 연산을 동반하기 때문입니다.
|
||||
우리는 추적에 의한 런타임 오버헤드를 피하고자 합니다.
|
||||
그래서 추적이 끝나면 모든 child 프로세스에 보류된 추적 데이터를 플러시 할 것인지 물어봅니다.
|
||||
Child 프로세스는 일반적으로 추적 데이터와 희귀한 플러시 그리고 추적 데이터를 메인
|
||||
프로세스로 보내는 작업에 대해 캐싱 합니다. 이러한 일을 하는 이유는 IPC를 통해 추적
|
||||
데이터를 보내는 작업은 매우 비싼 연산을 동반하기 때문입니다. 우리는 추적에 의한 런타임
|
||||
오버헤드를 피하고자 합니다. 그래서 추적이 끝나면 모든 child 프로세스에 보류된 추적
|
||||
데이터를 플러시 할 것인지 물어봅니다.
|
||||
|
||||
모든 child 프로세스가 `stopRecording` 요청을 승인하면 `callback`에 추적 데이터 파일을 포함하여 한 번 호출됩니다.
|
||||
모든 child 프로세스가 `stopRecording` 요청을 승인하면 `callback`에 추적 데이터
|
||||
파일을 포함하여 한 번 호출됩니다.
|
||||
|
||||
추적 데이터는 `resultFilePath` 해당 경로가 비어있는 경우에 한 해 해당 경로에 작성되거나 임시 파일에 작성됩니다.
|
||||
실제 파일 경로는 null이 아닌 이상 `callback`을 통해 전달됩니다.
|
||||
추적 데이터는 `resultFilePath` 해당 경로가 비어있는 경우에 한 해 해당 경로에
|
||||
작성되거나 임시 파일에 작성됩니다. 실제 파일 경로는 null이 아닌 이상 `callback`을
|
||||
통해 전달됩니다.
|
||||
|
||||
### `contentTracing.startMonitoring(options, callback)`
|
||||
|
||||
|
|
@ -100,7 +109,8 @@ Child 프로세스는 일반적으로 추적 데이터와 희귀한 플러시
|
|||
|
||||
모든 프로세스에서 모니터링을 시작합니다.
|
||||
|
||||
모니터링은 지역적으로 즉시 시작됩니다. 그리고 이내 자식 프로세스들이 `startMonitoring` 비동기 요청을 받습니다.
|
||||
모니터링은 지역적으로 즉시 시작됩니다. 그리고 이내 자식 프로세스들이
|
||||
`startMonitoring` 비동기 요청을 받습니다.
|
||||
|
||||
모든 자식 프로세스가 `startMonitoring` 요청을 승인하면 `callback`이 한 번 호출됩니다.
|
||||
|
||||
|
|
@ -119,18 +129,21 @@ Child 프로세스는 일반적으로 추적 데이터와 희귀한 플러시
|
|||
|
||||
현재 모니터링 추적 데이터를 가져옵니다.
|
||||
|
||||
자식 프로세스들은 일반적으로 추적 데이터를 캐싱하며 드물게 플러시 하거나 메인 프로세스로 추적 데이터를 보냅니다.
|
||||
왜냐하면 IPC를 통해 추적 데이터를 보내는데에는 많은 자원을 소비하기 때문입니다.
|
||||
그리고 우리는 추적시 발생하는 불필요한 런타임 오버헤드를 피하고자 합니다.
|
||||
그래서 추적이 끝나면 반드시 비동기로 자식 프로세스들의 보류된 추적 데이터를 플러시 할 것인지 물어봅니다.
|
||||
자식 프로세스들은 일반적으로 추적 데이터를 캐싱하며 드물게 플러시 하거나 메인
|
||||
프로세스로 추적 데이터를 보냅니다. 왜냐하면 IPC를 통해 추적 데이터를 보내는데에는
|
||||
많은 자원을 소비하기 때문입니다. 그리고 우리는 추적시 발생하는 불필요한 런타임
|
||||
오버헤드를 피하고자 합니다. 그래서 추적이 끝나면 반드시 비동기로 자식 프로세스들의
|
||||
보류된 추적 데이터를 플러시 할 것인지 물어봅니다.
|
||||
|
||||
모든 자식 프로세스가 `captureMonitoringSnapshot` 요청을 승인하면 추적 데이터 파일을 포함하는 `callback`이 한 번 호출됩니다.
|
||||
모든 자식 프로세스가 `captureMonitoringSnapshot` 요청을 승인하면 추적 데이터 파일을
|
||||
포함하는 `callback`이 한 번 호출됩니다.
|
||||
|
||||
### `contentTracing.getTraceBufferUsage(callback)`
|
||||
|
||||
* `callback` Function
|
||||
|
||||
추적 버퍼 % 전체 상태의 프로세스간 최대치를 가져옵니다. TraceBufferUsage 값이 결정되면 `callback`이 한 번 호출됩니다.
|
||||
추적 버퍼 % 전체 상태의 프로세스간 최대치를 가져옵니다. TraceBufferUsage 값이
|
||||
결정되면 `callback`이 한 번 호출됩니다.
|
||||
|
||||
### `contentTracing.setWatchEvent(categoryName, eventName, callback)`
|
||||
|
||||
|
|
@ -142,4 +155,5 @@ Child 프로세스는 일반적으로 추적 데이터와 희귀한 플러시
|
|||
|
||||
### `contentTracing.cancelWatchEvent()`
|
||||
|
||||
Watch 이벤트를 중단합니다. 만약 추적이 활성화되어 있다면 이 메서드는 watch 이벤트 콜백과 race가 일어날 것입니다.
|
||||
Watch 이벤트를 중단합니다. 만약 추적이 활성화되어 있다면 이 메서드는 watch 이벤트
|
||||
콜백과 race가 일어날 것입니다.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
# crashReporter
|
||||
|
||||
`crash-reporter` 모듈은 어플리케이션의 크래시 정보를 자동으로 원격 서버에 업로드하는데 사용합니다.
|
||||
`crash-reporter` 모듈은 어플리케이션의 크래시 정보를 자동으로 원격 서버에
|
||||
업로드하는데 사용합니다.
|
||||
|
||||
다음 예제는 윈격 서버에 어플리케이션 크래시 정보를 자동으로 보고하는 예제입니다:
|
||||
|
||||
|
|
@ -34,12 +35,13 @@ crashReporter.start({
|
|||
* 크래시 리포트 시 같이 보낼 추가 정보를 지정하는 객체입니다.
|
||||
* 문자열로 된 속성만 정상적으로 보내집니다.
|
||||
* 중첩 객체는 지원되지 않습니다. (Nested objects are not supported)
|
||||
|
||||
|
||||
다른 crashReporter API를 사용하기 전에 이 메서드를 먼저 호출해야 합니다.
|
||||
|
||||
**참고:** OS X에선 Windows와 Linux의 `breakpad`와 달리 새로운 `crashpad` 클라이언트를 사용합니다.
|
||||
오류 수집 기능을 활성화 시키려면 오류를 수집하고 싶은 메인 프로세스나 랜더러 프로세스에서
|
||||
`crashReporter.start` 메서드를 호출하여 `crashpad`를 초기화 해야합니다.
|
||||
**참고:** OS X에선 Windows와 Linux의 `breakpad`와 달리 새로운 `crashpad`
|
||||
클라이언트를 사용합니다. 오류 수집 기능을 활성화 시키려면 오류를 수집하고 싶은 메인
|
||||
프로세스나 랜더러 프로세스에서 `crashReporter.start` 메서드를 호출하여 `crashpad`를
|
||||
초기화 해야합니다.
|
||||
|
||||
### `crashReporter.getLastCrashReport()`
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
# dialog
|
||||
|
||||
`dialog` 모듈은 파일 열기, 알림과 같은 네이티브 시스템의 대화 상자를 조작할 때 사용할 수 있는 모듈입니다.
|
||||
이 모듈을 사용하면 웹 어플리케이션에서 일반 네이티브 어플리케이션과 비슷한 사용자 경험을 제공할 수 있습니다.
|
||||
`dialog` 모듈은 파일 열기, 알림과 같은 네이티브 시스템의 대화 상자를 조작할 때 사용할
|
||||
수 있는 모듈입니다. 이 모듈을 사용하면 웹 어플리케이션에서 일반 네이티브 어플리케이션과
|
||||
비슷한 사용자 경험을 제공할 수 있습니다.
|
||||
|
||||
다음 예제는 파일과 디렉터리를 다중으로 선택하는 대화 상자를 표시하는 예제입니다:
|
||||
|
||||
|
|
@ -11,7 +12,8 @@ const dialog = require('electron').dialog;
|
|||
console.log(dialog.showOpenDialog({ properties: [ 'openFile', 'openDirectory', 'multiSelections' ]}));
|
||||
```
|
||||
|
||||
**OS X 알림**: 대화 상자를 시트처럼 보여지게 하려면 `browserWindow` 인자에 `BrowserWindow` 객체의 참조를 제공하면 됩니다.
|
||||
**OS X 참고**: 대화 상자를 시트처럼 보여지게 하려면 `browserWindow` 인자에
|
||||
`BrowserWindow` 객체의 참조를 제공하면 됩니다.
|
||||
|
||||
## Methods
|
||||
|
||||
|
|
@ -25,15 +27,18 @@ console.log(dialog.showOpenDialog({ properties: [ 'openFile', 'openDirectory', '
|
|||
* `defaultPath` String
|
||||
* `filters` Array
|
||||
* `properties` Array - 대화 상자가 사용할 기능(모드)이 담긴 배열입니다.
|
||||
다음을 포함할 수 있습니다: `openFile`, `openDirectory`, `multiSelections`, `createDirectory`
|
||||
다음을 포함할 수 있습니다: `openFile`, `openDirectory`, `multiSelections`,
|
||||
`createDirectory`
|
||||
* `callback` Function (optional)
|
||||
|
||||
사용할 대화 상자의 기능이 담긴 배열입니다. 다음을 포함할 수 있습니다: `openFile`, `openDirectory`, `multiSelections`, `createDirectory`
|
||||
사용할 대화 상자의 기능이 담긴 배열입니다. 다음을 포함할 수 있습니다: `openFile`,
|
||||
`openDirectory`, `multiSelections`, `createDirectory`
|
||||
|
||||
작업에 성공하면 콜백으로 유저가 선택한 파일의 경로를 포함한 배열을 반환합니다. 그 외엔 `undefined`를 반환합니다.
|
||||
작업에 성공하면 콜백으로 유저가 선택한 파일의 경로를 포함한 배열을 반환합니다. 그 외의
|
||||
경우엔 `undefined`를 반환합니다.
|
||||
|
||||
`filters`를 지정하면 유저가 선택 가능한 파일 형식을 지정할 수 있습니다.
|
||||
유저가 선택할 수 있는 타입에 제한을 두려면 다음과 같이 할 수 있습니다:
|
||||
`filters`를 지정하면 유저가 선택 가능한 파일 형식을 지정할 수 있습니다. 유저가 선택할
|
||||
수 있는 타입에 제한을 두려면 다음과 같이 할 수 있습니다:
|
||||
|
||||
```javascript
|
||||
{
|
||||
|
|
@ -46,14 +51,17 @@ console.log(dialog.showOpenDialog({ properties: [ 'openFile', 'openDirectory', '
|
|||
}
|
||||
```
|
||||
|
||||
`extensions` 배열은 반드시 와일드카드와 마침표를 제외한 파일 확장자를 포함시켜야 합니다.
|
||||
(예를 들어 `'png'`는 가능하지만 `'.png'`와 `'*.png'`는 안됩니다)
|
||||
모든 파일을 보여주려면 `'*'`와 같은 와일드카드를 사용하면 됩니다. (다른 와일드카드는 지원하지 않습니다)
|
||||
`extensions` 배열은 반드시 와일드카드와 마침표를 제외한 파일 확장자를 포함시켜야
|
||||
합니다. (예를 들어 `'png'`는 가능하지만 `'.png'`와 `'*.png'`는 안됩니다) 모든 파일을
|
||||
보여주려면 `'*'`와 같은 와일드카드를 사용하면 됩니다. (다른 와일드카드는 지원하지
|
||||
않습니다)
|
||||
|
||||
`callback`이 전달되면 메소드가 비동기로 작동되며 결과는 `callback(filenames)`을 통해 전달됩니다.
|
||||
`callback`이 전달되면 메서드가 비동기로 작동되며 결과는 `callback(filenames)`을
|
||||
통해 전달됩니다.
|
||||
|
||||
**참고:** Windows와 Linux에선 파일 선택 모드, 디렉터리 선택 모드를 동시에 사용할 수 없습니다.
|
||||
이러한 이유로 `properties`를 `['openFile', 'openDirectory']`로 설정하면 디렉터리 선택 대화 상자가 표시됩니다.
|
||||
**참고:** Windows와 Linux에선 파일 선택 모드, 디렉터리 선택 모드를 동시에 사용할 수
|
||||
없습니다. 이러한 이유로 `properties`를 `['openFile', 'openDirectory']`로 설정하면
|
||||
디렉터리 선택 대화 상자가 표시됩니다.
|
||||
|
||||
### `dialog.showSaveDialog([browserWindow][, options][, callback])`
|
||||
|
||||
|
|
@ -64,43 +72,52 @@ console.log(dialog.showOpenDialog({ properties: [ 'openFile', 'openDirectory', '
|
|||
* `filters` Array
|
||||
* `callback` Function (optional)
|
||||
|
||||
작업에 성공하면 콜백으로 유저가 선택한 파일의 경로를 포함한 배열을 반환합니다. 그 외엔 `undefined`를 반환합니다.
|
||||
작업에 성공하면 콜백으로 유저가 선택한 파일의 경로를 포함한 배열을 반환합니다. 그 외엔
|
||||
`undefined`를 반환합니다.
|
||||
|
||||
`filters`를 지정하면 유저가 저장 가능한 파일 형식을 지정할 수 있습니다. 사용 방법은 `dialog.showOpenDialog`의 `filters` 속성과 같습니다.
|
||||
`filters`를 지정하면 유저가 저장 가능한 파일 형식을 지정할 수 있습니다. 사용 방법은
|
||||
`dialog.showOpenDialog`의 `filters` 속성과 같습니다.
|
||||
|
||||
`callback`이 전달되면 메소드가 비동기로 작동되며 결과는 `callback(filename)`을 통해 전달됩니다.
|
||||
`callback`이 전달되면 메서드가 비동기로 작동되며 결과는 `callback(filename)`을 통해 전달됩니다.
|
||||
|
||||
### `dialog.showMessageBox([browserWindow][, options][, callback])`
|
||||
|
||||
* `browserWindow` BrowserWindow
|
||||
* `options` Object
|
||||
* `type` String - `"none"`, `"info"`, `"error"`, `"question"`, `"warning"` 중 하나를 사용할 수 있습니다.
|
||||
Windows에선 따로 `icon`을 설정하지 않은 이상 "question"과 "info"는 같은 아이콘으로 표시됩니다.
|
||||
* `type` String - `"none"`, `"info"`, `"error"`, `"question"`, `"warning"` 중
|
||||
하나를 사용할 수 있습니다. Windows에선 따로 `icon`을 설정하지 않은 이상
|
||||
"question"과 "info"는 같은 아이콘으로 표시됩니다.
|
||||
* `buttons` Array - 버튼들의 라벨을 포함한 배열입니다.
|
||||
* `title` String - 대화 상자의 제목입니다. 몇몇 플랫폼에선 보이지 않을 수 있습니다.
|
||||
* `message` String - 대화 상자의 본문 내용입니다.
|
||||
* `detail` String - 메시지의 추가 정보입니다.
|
||||
* `icon` [NativeImage](native-image.md)
|
||||
* `cancelId` Integer - 유저가 대화 상자의 버튼을 클릭하지 않고 대화 상자를 취소했을 때 반환되는 버튼의 인덱스입니다.
|
||||
기본적으로 버튼 리스트가 "cancel" 또는 "no" 라벨을 가지고 있을 때 해당 버튼의 인덱스를 반환합니다. 따로 두 라벨이 지정되지 않은 경우 0을 반환합니다.
|
||||
OS X와 Windows에선 `cancelId` 지정 여부에 상관없이 "Cancel" 버튼이 언제나 `cancelId`로 지정됩니다.
|
||||
* `noLink` Boolean - Windows Electron은 "Cancel"이나 "Yes"와 같은 흔히 사용되는 버튼을 찾으려고 시도하고
|
||||
대화 상자 내에서 해당 버튼을 커맨드 링크처럼 만듭니다. 이 기능으로 앱을 좀 더 Modern Windows 앱처럼 만들 수 있습니다.
|
||||
이 기능을 원하지 않으면 `noLink`를 true로 지정하면 됩니다.
|
||||
* `cancelId` Integer - 유저가 대화 상자의 버튼을 클릭하지 않고 대화 상자를 취소했을
|
||||
때 반환되는 버튼의 인덱스입니다. 기본적으로 버튼 리스트가 "cancel" 또는 "no"
|
||||
라벨을 가지고 있을 때 해당 버튼의 인덱스를 반환합니다. 따로 두 라벨이 지정되지
|
||||
않은 경우 0을 반환합니다. OS X와 Windows에선 `cancelId` 지정 여부에 상관없이
|
||||
"Cancel" 버튼이 언제나 `cancelId`로 지정됩니다.
|
||||
* `noLink` Boolean - Windows Electron은 "Cancel"이나 "Yes"와 같은 흔히 사용되는
|
||||
버튼을 찾으려고 시도하고 대화 상자 내에서 해당 버튼을 커맨드 링크처럼 만듭니다.
|
||||
이 기능으로 앱을 좀 더 Modern Windows 앱처럼 만들 수 있습니다. 이 기능을 원하지
|
||||
않으면 `noLink`를 true로 지정하면 됩니다.
|
||||
* `callback` Function
|
||||
|
||||
대화 상자를 표시합니다. `browserWindow`를 지정하면 대화 상자가 완전히 닫힐 때까지 지정한 창을 사용할 수 없습니다.
|
||||
완료 시 유저가 선택한 버튼의 인덱스를 반환합니다.
|
||||
대화 상자를 표시합니다. `browserWindow`를 지정하면 대화 상자가 완전히 닫힐 때까지
|
||||
지정한 창을 사용할 수 없습니다. 완료 시 유저가 선택한 버튼의 인덱스를 반환합니다.
|
||||
|
||||
역주: 부정을 표현하는 "아니오", "취소"와 같은 한글 단어는 지원되지 않습니다.
|
||||
만약 OS X 또는 Windows에서 "확인", "취소"와 같은 순서로 버튼을 지정하게 될 때 Alt + f4로 해당 대화 상자를 끄게 되면 "확인"을 누른 것으로 판단되어 버립니다.
|
||||
이를 해결하려면 "Cancel"을 대신 사용하거나 BrowserWindow API를 사용하여 대화 상자를 직접 구현해야합니다.
|
||||
역주: 부정을 표현하는 "아니오", "취소"와 같은 한글 단어는 지원되지 않습니다. 만약
|
||||
OS X 또는 Windows에서 "확인", "취소"와 같은 순서로 버튼을 지정하게 될 때 Alt + f4로
|
||||
해당 대화 상자를 끄게 되면 "확인"을 누른 것으로 판단되어 버립니다. 이를 해결하려면
|
||||
"Cancel"을 대신 사용하거나 BrowserWindow API를 사용하여 대화 상자를 직접 구현해야
|
||||
합니다.
|
||||
|
||||
`callback`이 전달되면 메소드가 비동기로 작동되며 결과는 `callback(response)`을 통해 전달됩니다.
|
||||
`callback`이 전달되면 메서드가 비동기로 작동되며 결과는 `callback(response)`을 통해
|
||||
전달됩니다.
|
||||
|
||||
### `dialog.showErrorBox(title, content)`
|
||||
|
||||
에러 메시지를 보여주는 대화 상자를 표시합니다.
|
||||
|
||||
이 API는 `app` 모듈의 `ready` 이벤트가 발생하기 전에 사용할 수 있습니다.
|
||||
이 메소드는 보통 어플리케이션이 시작되기 전에 특정한 에러를 표시하기 위해 사용됩니다.
|
||||
이 API는 `app` 모듈의 `ready` 이벤트가 발생하기 전에 사용할 수 있습니다. 이 메서드는
|
||||
보통 어플리케이션이 시작되기 전에 특정한 에러를 표시하기 위해 사용됩니다.
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
# DownloadItem
|
||||
|
||||
`DownloadItem`은 EventEmitter를 상속받았으며 Electron의 다운로드 아이템을 표현합니다.
|
||||
이 클래스 객체는 `Session` 모듈의 `will-download` 이벤트에 사용되며
|
||||
사용자가 다운로드 아이템을 다룰 수 있도록 도와줍니다.
|
||||
이 클래스 객체는 `Session` 모듈의 `will-download` 이벤트에 사용되며 사용자가 다운로드
|
||||
아이템을 다룰 수 있도록 도와줍니다.
|
||||
|
||||
```javascript
|
||||
// 메인 프로세스
|
||||
|
|
@ -38,9 +38,9 @@ win.webContents.session.on('will-download', function(event, item, webContents) {
|
|||
* `cancelled` - 다운로드가 취소되었습니다.
|
||||
* `interrupted` - 다운로드 중 파일 서버로부터의 연결이 끊겼습니다.
|
||||
|
||||
다운로드가 종료될 때 발생하는 이벤트입니다.
|
||||
이 이벤트는 다운로드 중 문제가 발생하여 중단되거나, 모두 성공적으로 완료된 경우,
|
||||
`downloadItem.cancel()` 같은 메서드를 통해 취소하는 경우의 종료 작업이 모두 포함됩니다.
|
||||
다운로드가 종료될 때 발생하는 이벤트입니다. 이 이벤트는 다운로드 중 문제가 발생하여
|
||||
중단되거나, 모두 성공적으로 완료된 경우, `downloadItem.cancel()` 같은 메서드를 통해
|
||||
취소하는 경우의 종료 작업이 모두 포함됩니다.
|
||||
|
||||
## Methods
|
||||
|
||||
|
|
@ -50,8 +50,9 @@ win.webContents.session.on('will-download', function(event, item, webContents) {
|
|||
|
||||
* `path` String - 다운로드 아이템을 저장할 파일 경로를 지정합니다.
|
||||
|
||||
이 API는 세션의 `will-download` 콜백 함수에서만 사용할 수 있습니다.
|
||||
사용자가 API를 통해 아무 경로도 설정하지 않을 경우 Electron은 기본 루틴 파일 저장을 실행합니다. (파일 대화 상자를 엽니다)
|
||||
이 API는 세션의 `will-download` 콜백 함수에서만 사용할 수 있습니다. 사용자가 API를
|
||||
통해 아무 경로도 설정하지 않을 경우 Electron은 기본 루틴 파일 저장을 실행합니다.
|
||||
(파일 대화 상자를 엽니다)
|
||||
|
||||
### `downloadItem.pause()`
|
||||
|
||||
|
|
@ -81,12 +82,14 @@ win.webContents.session.on('will-download', function(event, item, webContents) {
|
|||
|
||||
다운로드 아이템의 파일 이름을 표현하는 문자열을 반환합니다.
|
||||
|
||||
**참고:** 실제 파일 이름과 로컬 디스크에 저장되는 파일의 이름은 서로 다를 수 있습니다. 예를 들어
|
||||
만약 사용자가 파일을 저장할 때 파일 이름을 바꿨다면 실제 파일 이름과 저장 파일 이름은 서로 달라지게 됩니다.
|
||||
**참고:** 실제 파일 이름과 로컬 디스크에 저장되는 파일의 이름은 서로 다를 수 있습니다.
|
||||
예를 들어 만약 사용자가 파일을 저장할 때 파일 이름을 바꿨다면 실제 파일 이름과 저장
|
||||
파일 이름은 서로 달라지게 됩니다.
|
||||
|
||||
### `downloadItem.getTotalBytes()`
|
||||
|
||||
현재 아이템의 전체 다운로드 크기를 정수로 반환합니다. 크기가 unknown이면 0을 반환합니다.
|
||||
현재 아이템의 전체 다운로드 크기를 정수로 반환합니다. 크기가 unknown이면 0을
|
||||
반환합니다.
|
||||
|
||||
### `downloadItem.getReceivedBytes()`
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
# `File` 객체
|
||||
|
||||
DOM의 File 인터페이스는 네이티브 파일을 추상화 합니다.
|
||||
유저가 직접 HTML5 File API를 이용하여 작업할 때 선택된 파일의 경로를 알 수 있도록
|
||||
Electron은 파일의 실제 경로를 담은 `path` 속성을 File 인터페이스에 추가하였습니다.
|
||||
DOM의 File 인터페이스는 네이티브 파일을 추상화 합니다. 유저가 직접 HTML5 File API를
|
||||
이용하여 작업할 때 선택된 파일의 경로를 알 수 있도록 Electron은 파일의 실제 경로를
|
||||
담은 `path` 속성을 File 인터페이스에 추가하였습니다.
|
||||
|
||||
다음 예제는 앱으로 드래그 앤 드롭한 파일의 실제 경로를 가져옵니다:
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
# Frameless Window
|
||||
|
||||
Frameless Window는 [창 테두리](https://developer.mozilla.org/en-US/docs/Glossary/Chrome)가 없는 윈도우를 말합니다.
|
||||
이 기능은 윈도우 창의 일부분인 툴바와 같이 웹 페이지의 일부분이 아닌 부분을 보이지 않도록 합니다.
|
||||
[`BrowserWindow`](browser-window.md) 클래스의 옵션에서 설정할 수 있습니다.
|
||||
Frameless Window는 [창 테두리](https://developer.mozilla.org/en-US/docs/Glossary/Chrome)가
|
||||
없는 윈도우를 말합니다. 이 기능은 윈도우 창의 일부분인 툴바와 같이 웹 페이지의 일부분이
|
||||
아닌 부분을 보이지 않도록 합니다. [`BrowserWindow`](browser-window.md) 클래스의
|
||||
옵션에서 설정할 수 있습니다.
|
||||
|
||||
## Frameless Window 만들기
|
||||
|
||||
Frameless Window를 만드려면 [BrowserWindow](browser-window.md) 객체의 `options`에서 `frame` 옵션을 `false`로 지정하면 됩니다:
|
||||
Frameless Window를 만드려면 [BrowserWindow](browser-window.md) 객체의
|
||||
`options` 객체에서 `frame` 옵션을 `false`로 지정하면 됩니다:
|
||||
|
||||
```javascript
|
||||
const BrowserWindow = require('electron').BrowserWindow;
|
||||
|
|
@ -15,9 +17,10 @@ var win = new BrowserWindow({ width: 800, height: 600, frame: false });
|
|||
|
||||
### 최신 OS X에서 사용할 수 있는 대안
|
||||
|
||||
OS X 10.10 Yosemite 이후의 최신 버전부터는 테두리가 없는 창을 만들 때 새로운 방법을 사용할 수 있습니다.
|
||||
`frame` 옵션을 `false`로 지정하여 제목과 창 구성 요소를 모두 비활성화하는 대신 새로운 `title-bar-style`
|
||||
옵션을 통해 제목만 숨기고 창 구성 요소("흔히 신호등으로 알고 있는")의 기능과 창 크기를 그대로 유지할 수 있습니다:
|
||||
OS X 10.10 Yosemite 이후의 최신 버전부터는 테두리가 없는 창을 만들 때 새로운 방법을
|
||||
사용할 수 있습니다. `frame` 옵션을 `false`로 지정하여 제목과 창 구성 요소를 모두
|
||||
비활성화하는 대신 새로운 `title-bar-style` 옵션을 통해 제목만 숨기고 창 구성 요소
|
||||
("흔히 신호등으로 알고 있는")의 기능과 창 크기를 그대로 유지할 수 있습니다:
|
||||
|
||||
```javascript
|
||||
var win = new BrowserWindow({ 'title-bar-style': 'hidden' });
|
||||
|
|
@ -25,7 +28,8 @@ var win = new BrowserWindow({ 'title-bar-style': 'hidden' });
|
|||
|
||||
## 투명한 창 만들기
|
||||
|
||||
Frameless Window 창의 배경을 투명하게 만들고 싶다면 `transparent` 옵션을 `true`로 바꿔주기만 하면됩니다:
|
||||
Frameless Window 창의 배경을 투명하게 만들고 싶다면 `transparent` 옵션을 `true`로
|
||||
바꿔주기만 하면됩니다:
|
||||
|
||||
```javascript
|
||||
var win = new BrowserWindow({ transparent: true, frame: false });
|
||||
|
|
@ -33,30 +37,38 @@ var win = new BrowserWindow({ transparent: true, frame: false });
|
|||
|
||||
### API의 한계
|
||||
|
||||
* 투명한 영역을 통과하여 클릭할 수 없습니다. 우리는 이 문제를 해결하기 위해 API를 제공할 예정이었지만 현재로써는
|
||||
[upstream 버그](https://code.google.com/p/chromium/issues/detail?id=387234)로 인해 중단된 상태입니다.
|
||||
* 투명한 창은 크기를 조절할 수 없습니다. `resizable` 속성을 `true`로 할 경우 몇몇 플랫폼에선 크래시가 일어납니다.
|
||||
* `blur` 필터는 웹 페이지에서만 적용됩니다. 윈도우 아래 컨텐츠에는 블러 효과를 적용할 방법이 없습니다. (예시: 유저의 시스템에 열린 다른 어플리케이션)
|
||||
* Windows에선 DWM(데스크톱 창 관리자)가 비활성화되어 있을 경우 투명한 창이 작동하지 않습니다.
|
||||
* 투명한 영역을 통과하여 클릭할 수 없습니다. 우리는 이 문제를 해결하기 위해 API를
|
||||
제공할 예정이었지만 현재로써는 [upstream 버그](https://code.google.com/p/chromium/issues/detail?id=387234)로
|
||||
인해 중단된 상태입니다.
|
||||
* 투명한 창은 크기를 조절할 수 없습니다. `resizable` 속성을 `true`로 할 경우 몇몇
|
||||
플랫폼에선 크래시가 일어납니다.
|
||||
* `blur` 필터는 웹 페이지에서만 적용됩니다. 윈도우 아래 컨텐츠에는 블러 효과를 적용할
|
||||
방법이 없습니다. (예시: 유저의 시스템에 열린 다른 어플리케이션)
|
||||
* Windows에선 DWM(데스크톱 창 관리자)가 비활성화되어 있을 경우 투명한 창이 작동하지
|
||||
않습니다.
|
||||
* Linux를 사용할 경우 [alpha channel doesn't work on some NVidia drivers](https://code.google.com/p/chromium/issues/detail?id=369209)
|
||||
upstream 버그가 있는 관계로 투명한 창 기능을 사용하려면 CLI 옵션에 `--enable-transparent-visuals --disable-gpu`을 추가해야 합니다.
|
||||
이 옵션은 GPU의 사용을 중단하고 윈도우를 생성하는데 ARGB를 사용할 수 있도록 해줍니다.
|
||||
upstream 버그가 있는 관계로 투명한 창 기능을 사용하려면 CLI 옵션에
|
||||
`--enable-transparent-visuals --disable-gpu`을 추가해야 합니다. 이 옵션은 GPU의
|
||||
사용을 중단하고 윈도우를 생성하는데 ARGB를 사용할 수 있도록 해줍니다.
|
||||
* OS X(Mac)에선 네이티브 창에서 보여지는 그림자가 투명한 창에선 보이지 않습니다.
|
||||
|
||||
## 드래그 가능 위치 지정
|
||||
|
||||
기본적으로 Frameless Window는 드래그 할 수 없습니다.
|
||||
어플리케이션의 CSS에서 특정 범위를 `-webkit-app-region: drag`로 지정하면 OS의 기본 타이틀 바 처럼 드래그 되도록 할 수 있습니다.
|
||||
그리고 `-webkit-app-region: no-drag`를 지정해서 드래그 불가능 영역을 만들 수도 있습니다. 현재 사각형 형태의 범위만 지원합니다.
|
||||
기본적으로 Frameless Window는 드래그 할 수 없습니다. 어플리케이션의 CSS에서 특정
|
||||
범위를 `-webkit-app-region: drag`로 지정하면 OS의 기본 타이틀 바 처럼 드래그 되도록
|
||||
할 수 있습니다. 그리고 `-webkit-app-region: no-drag`를 지정해서 드래그 불가능 영역을
|
||||
만들 수도 있습니다. 현재 사각형 형태의 범위만 지원합니다.
|
||||
|
||||
창 전체를 드래그 가능하게 만드려면 `-webkit-app-region: drag`을 `body`의 스타일에 지정하면 됩니다:
|
||||
창 전체를 드래그 가능하게 만드려면 `-webkit-app-region: drag`을 `body`의 스타일에
|
||||
지정하면 됩니다:
|
||||
|
||||
```html
|
||||
<body style="-webkit-app-region: drag">
|
||||
</body>
|
||||
```
|
||||
|
||||
참고로 창 전체를 드래그 영역으로 지정할 경우 사용자가 버튼을 클릭할 수 없게 되므로 버튼은 드래그 불가능 영역으로 지정해야 합니다:
|
||||
참고로 창 전체를 드래그 영역으로 지정할 경우 사용자가 버튼을 클릭할 수 없게 되므로
|
||||
버튼은 드래그 불가능 영역으로 지정해야 합니다:
|
||||
|
||||
```css
|
||||
button {
|
||||
|
|
@ -64,13 +76,15 @@ button {
|
|||
}
|
||||
```
|
||||
|
||||
따로 커스텀 타이틀 바를 만들어 사용할 때는 타이틀 바 내부의 모든 버튼을 드래그 불가능 영역으로 지정해야 합니다.
|
||||
따로 커스텀 타이틀 바를 만들어 사용할 때는 타이틀 바 내부의 모든 버튼을 드래그 불가
|
||||
영역으로 지정해야 합니다.
|
||||
|
||||
## 텍스트 선택
|
||||
|
||||
Frameless Window에서 텍스트가 선택되는 드래그 동작은 혼란을 야기할 수 있습니다.
|
||||
예를 들어 타이틀 바를 드래그 할 때 타이틀 바의 텍스트를 실수로 선택할 수 있습니다.
|
||||
이를 방지하기 위해 다음과 같이 드래그 영역의 텍스트 선택 기능을 비활성화해야 할 필요가 있습니다:
|
||||
Frameless Window에서 텍스트가 선택되는 드래그 동작은 혼란을 야기할 수 있습니다. 예를
|
||||
들어 타이틀 바를 드래그 할 때 타이틀 바의 텍스트를 실수로 선택할 수 있습니다. 이를
|
||||
방지하기 위해 다음과 같이 드래그 영역의 텍스트 선택 기능을 비활성화해야 할 필요가
|
||||
있습니다:
|
||||
|
||||
```css
|
||||
.titlebar {
|
||||
|
|
@ -81,5 +95,7 @@ Frameless Window에서 텍스트가 선택되는 드래그 동작은 혼란을
|
|||
|
||||
## 컨텍스트 메뉴
|
||||
|
||||
몇몇 플랫폼에선 드래그 가능 영역이 non-client 프레임으로 처리됩니다. 이러한 플랫폼에선 드래그 가능 영역에서 오른쪽 클릭 할 경우 시스템 메뉴가 팝업 됩니다.
|
||||
이러한 이유로 컨텍스트 메뉴 지정 시 모든 플랫폼에서 정상적으로 작동하게 하려면 커스텀 컨텍스트 메뉴를 드래그 영역 내에 만들어선 안됩니다.
|
||||
몇몇 플랫폼에선 드래그 가능 영역이 non-client 프레임으로 처리됩니다. 이러한 플랫폼에선
|
||||
드래그 가능 영역에서 오른쪽 클릭 할 경우 시스템 메뉴가 팝업 됩니다. 이러한 이유로
|
||||
컨텍스트 메뉴 지정 시 모든 플랫폼에서 정상적으로 작동하게 하려면 커스텀 컨텍스트 메뉴를
|
||||
드래그 영역 내에 만들어선 안됩니다.
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
# global-shortcut
|
||||
|
||||
`global-shortcut` 모듈은 운영체제의 전역 키보드 단축키를 등록/해제 하는 방법을 제공합니다.
|
||||
이 모듈을 사용하여 사용자가 다양한 작업을 편하게 할 수 있도록 단축키를 정의 할 수 있습니다.
|
||||
`global-shortcut` 모듈은 운영체제의 전역 키보드 단축키를 등록/해제 하는 방법을
|
||||
제공합니다. 이 모듈을 사용하여 사용자가 다양한 작업을 편하게 할 수 있도록 단축키를
|
||||
정의 할 수 있습니다.
|
||||
|
||||
**참고:** 등록된 단축키는 어플리케이션이 백그라운드로 작동(창이 포커스 되지 않음) 할 때도 계속해서 작동합니다.
|
||||
이 모듈은 `app` 모듈의 `ready` 이벤트 이전에 사용할 수 없습니다.
|
||||
**참고:** 등록된 단축키는 어플리케이션이 백그라운드로 작동(창이 포커스 되지 않음) 할
|
||||
때도 계속해서 작동합니다. 이 모듈은 `app` 모듈의 `ready` 이벤트 이전에 사용할 수
|
||||
없습니다.
|
||||
|
||||
```javascript
|
||||
const electron = require('electron');
|
||||
|
|
@ -43,13 +45,15 @@ app.on('will-quit', function() {
|
|||
* `accelerator` [Accelerator](accelerator.md)
|
||||
* `callback` Function
|
||||
|
||||
`accelerator`로 표현된 전역 단축키를 등록합니다. 유저로부터 등록된 단축키가 눌렸을 경우 `callback` 함수가 호출됩니다.
|
||||
`accelerator`로 표현된 전역 단축키를 등록합니다. 유저로부터 등록된 단축키가 눌렸을
|
||||
경우 `callback` 함수가 호출됩니다.
|
||||
|
||||
### `globalShortcut.isRegistered(accelerator)`
|
||||
|
||||
* `accelerator` [Accelerator](accelerator.md)
|
||||
|
||||
지정된 `accelerator` 단축키가 등록되었는지 여부를 확인합니다. 반환값은 boolean(true, false) 입니다.
|
||||
지정된 `accelerator` 단축키가 등록되었는지 여부를 확인합니다. 반환값은 boolean값
|
||||
입니다.
|
||||
|
||||
### `globalShortcut.unregister(accelerator)`
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
# ipcMain
|
||||
|
||||
`ipcMain` 모듈은 메인 프로세스에서 사용할 때 랜더러 프로세스(웹 페이지)에서 전달된 동기/비동기 메시지를 주고 받는 방법을 제공합니다.
|
||||
랜더러 프로세스에서 메시지를 전달하면 이 모듈을 통해 메시지를 받을 수 있습니다.
|
||||
`ipcMain` 모듈은 메인 프로세스에서 사용할 때 랜더러 프로세스(웹 페이지)에서 전달된
|
||||
동기/비동기 메시지를 주고 받는 방법을 제공합니다. 랜더러 프로세스에서 메시지를 전달하면
|
||||
이 모듈을 통해 메시지를 받을 수 있습니다.
|
||||
|
||||
## 메시지 전송
|
||||
|
||||
물론 메시지를 받는 것 말고도 메인 프로세스에서 랜더러 프로세스로 보내는 것도 가능합니다.
|
||||
자세한 내용은 [webContents.send](web-contents.md#webcontentssendchannel-args)를 참고하세요.
|
||||
자세한 내용은 [webContents.send](web-contents.md#webcontentssendchannel-args)를
|
||||
참고하세요.
|
||||
|
||||
* 메시지를 전송할 때 이벤트 이름은 `channel`이 됩니다.
|
||||
* 메시지에 동기로 응답할 땐 반드시 `event.returnValue`를 설정해야 합니다.
|
||||
|
|
@ -60,7 +62,8 @@ ipc.send('asynchronous-message', 'ping');
|
|||
|
||||
### `Event.sender`
|
||||
|
||||
메시지를 보낸 `webContents` 객체를 반환합니다. `event.sender.send` 메서드를 통해 비동기로 메시지를 전달할 수 있습니다.
|
||||
자세한 내용은 [webContents.send][webcontents-send]를 참고하세요.
|
||||
메시지를 보낸 `webContents` 객체를 반환합니다. `event.sender.send` 메서드를 통해
|
||||
비동기로 메시지를 전달할 수 있습니다. 자세한 내용은
|
||||
[webContents.send][webcontents-send]를 참고하세요.
|
||||
|
||||
[webcontents-send]: web-contents.md#webcontentssendchannel-args
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
# ipcRenderer
|
||||
|
||||
`ipcRenderer` 모듈은 랜더러 프로세스에서 메인 프로세스로 동기/비동기 메시지를 주고 받는 방법을 제공합니다.
|
||||
또한 메인 프로세스로부터 받은 메시지에 응답할 수도 있습니다.
|
||||
`ipcRenderer` 모듈은 랜더러 프로세스에서 메인 프로세스로 동기/비동기 메시지를 주고
|
||||
받는 방법을 제공합니다. 또한 메인 프로세스로부터 받은 메시지에 응답할 수도 있습니다.
|
||||
|
||||
[ipcMain](ipc-main.md)에서 코드 예제를 확인할 수 있습니다.
|
||||
|
||||
|
|
@ -25,24 +25,29 @@
|
|||
* `channel` String - 이벤트 이름
|
||||
* `arg` (optional)
|
||||
|
||||
`channel`을 통해 메인 프로세스에 비동기 메시지를 보냅니다. 그리고 필요에 따라 임의의 인자를 사용할 수도 있습니다.
|
||||
메인 프로세스는 `ipcMain` 모듈의 `channel` 이벤트를 통해 이벤트를 리스닝 할 수 있습니다.
|
||||
`channel`을 통해 메인 프로세스에 비동기 메시지를 보냅니다. 그리고 필요에 따라 임의의
|
||||
인자를 사용할 수도 있습니다. 메인 프로세스는 `ipcMain` 모듈의 `channel` 이벤트를 통해
|
||||
이벤트를 리스닝 할 수 있습니다.
|
||||
|
||||
### `ipcRenderer.sendSync(channel[, arg1][, arg2][, ...])`
|
||||
|
||||
* `channel` String - 이벤트 이름
|
||||
* `arg` (optional)
|
||||
|
||||
`channel`을 통해 메인 프로세스에 동기 메시지를 보냅니다. 그리고 필요에 따라 임의의 인자를 사용할 수도 있습니다.
|
||||
메인 프로세스는 `ipc`를 통해 `channel` 이벤트를 리스닝 할 수 있습니다.
|
||||
`channel`을 통해 메인 프로세스에 동기 메시지를 보냅니다. 그리고 필요에 따라 임의의
|
||||
인자를 사용할 수도 있습니다. 메인 프로세스는 `ipc`를 통해 `channel` 이벤트를 리스닝
|
||||
할 수 있습니다.
|
||||
|
||||
메인 프로세스에선 `ipc` 모듈의 `channel` 이벤트를 통해 받은 `event.returnValue`로 회신 할 수 있습니다.
|
||||
메인 프로세스에선 `ipcMain` 모듈의 `channel` 이벤트를 통해 받은
|
||||
`event.returnValue`로 회신 할 수 있습니다.
|
||||
|
||||
__참고:__ 동기 메서드는 모든 랜더러 프로세스의 작업을 일시 중단시킵니다. 사용 목적이 확실하지 않다면 사용하지 않는 것이 좋습니다.
|
||||
__참고:__ 동기 메서드는 모든 랜더러 프로세스의 작업을 일시 중단시킵니다. 사용 목적이
|
||||
확실하지 않다면 사용하지 않는 것이 좋습니다.
|
||||
|
||||
### `ipcRenderer.sendToHost(channel[, arg1][, arg2][, ...])`
|
||||
|
||||
* `channel` String - 이벤트 이름
|
||||
* `arg` (optional)
|
||||
|
||||
`ipcRenderer.send`와 비슷하지만 이벤트를 메인 프로세스 대신 호스트 페이지내의 `<webview>` 요소로 보냅니다.
|
||||
`ipcRenderer.send`와 비슷하지만 이벤트를 메인 프로세스 대신 호스트 페이지내의
|
||||
`<webview>` 요소로 보냅니다.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
# MenuItem
|
||||
|
||||
`menu-item` 모듈은 어플리케이션 또는 컨텍스트 [`menu`](menu.md)에 항목 아이템을 추가할 수 있도록 관련 클래스를 제공합니다.
|
||||
`menu-item` 모듈은 어플리케이션 또는 컨텍스트 [`menu`](menu.md)에 항목 아이템을
|
||||
추가할 수 있도록 관련 클래스를 제공합니다.
|
||||
|
||||
[`menu`](menu.md)에서 예제를 확인할 수 있습니다.
|
||||
|
||||
|
|
@ -11,9 +12,12 @@
|
|||
### new MenuItem(options)
|
||||
|
||||
* `options` Object
|
||||
* `click` Function - 메뉴 아이템이 클릭될 때 `click(menuItem, browserWindow)` 형태로 호출 되는 콜백 함수
|
||||
* `role` String - 메뉴 아이템의 액션을 정의합니다. 이 속성을 지정하면 `click` 속성이 무시됩니다.
|
||||
* `type` String - `MenuItem`의 타입 `normal`, `separator`, `submenu`, `checkbox` 또는 `radio` 사용가능
|
||||
* `click` Function - 메뉴 아이템이 클릭될 때 `click(menuItem, browserWindow)`
|
||||
형태로 호출 되는 콜백 함수
|
||||
* `role` String - 메뉴 아이템의 액션을 정의합니다. 이 속성을 지정하면 `click`
|
||||
속성이 무시됩니다.
|
||||
* `type` String - `MenuItem`의 타입 `normal`, `separator`, `submenu`,
|
||||
`checkbox` 또는 `radio` 사용가능
|
||||
* `label` String
|
||||
* `sublabel` String
|
||||
* `accelerator` [Accelerator](accelerator.md)
|
||||
|
|
@ -21,11 +25,15 @@
|
|||
* `enabled` Boolean
|
||||
* `visible` Boolean
|
||||
* `checked` Boolean
|
||||
* `submenu` Menu - 보조메뉴를 설정합니다. `type`이 `submenu`일 경우 반드시 설정해야합니다. 일반 메뉴 아이템일 경우 생략할 수 있습니다.
|
||||
* `id` String - 현재 메뉴 아이템에 대해 유일키를 지정합니다. 이 키는 이후 `position` 옵션에서 사용할 수 있습니다.
|
||||
* `position` String - 미리 지정한 `id`를 이용하여 메뉴 아이템의 위치를 세밀하게 조정합니다.
|
||||
* `submenu` Menu - 보조메뉴를 설정합니다. `type`이 `submenu`일 경우 반드시
|
||||
설정해야 합니다. 일반 메뉴 아이템일 경우 생략할 수 있습니다.
|
||||
* `id` String - 현재 메뉴 아이템에 대해 유일키를 지정합니다. 이 키는 이후
|
||||
`position` 옵션에서 사용할 수 있습니다.
|
||||
* `position` String - 미리 지정한 `id`를 이용하여 메뉴 아이템의 위치를 세밀하게
|
||||
조정합니다.
|
||||
|
||||
메뉴 아이템을 생성할 때, 다음 목록과 일치하는 표준 동작은 수동으로 직접 구현하는 대신 `role` 속성을 지정하여 고유 OS 경험을 최대한 살릴 수 있습니다.
|
||||
메뉴 아이템을 생성할 때, 다음 목록과 일치하는 표준 동작은 수동으로 직접 구현하는 대신
|
||||
`role` 속성을 지정하여 고유 OS 경험을 최대한 살릴 수 있습니다.
|
||||
|
||||
`role` 속성은 다음 값을 가질 수 있습니다:
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
# Menu
|
||||
|
||||
`menu` 클래스는 어플리케이션 메뉴와 [컨텍스트 메뉴](https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/PopupGuide/ContextMenus)를 만들 때 사용됩니다.
|
||||
이 모듈은 메인 프로세스용 모듈이지만 `remote` 모듈을 통해 랜더러 프로세스에서도 사용할 수 있습니다.
|
||||
`menu` 클래스는 어플리케이션 메뉴와 [컨텍스트 메뉴](https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/PopupGuide/ContextMenus)를
|
||||
만들 때 사용됩니다. 이 모듈은 메인 프로세스용 모듈이지만 `remote` 모듈을 통해 랜더러
|
||||
프로세스에서도 사용할 수 있습니다.
|
||||
|
||||
각 메뉴는 여러 개의 [메뉴 아이템](menu-item.md)으로 구성되고 서브 메뉴를 가질 수도 있습니다.
|
||||
|
||||
다음 예제는 웹 페이지 내에서 [remote](remote.md) 모듈을 활용하여 동적으로 메뉴를 생성하는 예제입니다.
|
||||
그리고 유저가 페이지에서 오른쪽 클릭을 할 때마다 마우스 위치에 팝업 형태로 메뉴를 표시합니다:
|
||||
다음 예제는 웹 페이지 내에서 [remote](remote.md) 모듈을 활용하여 동적으로 메뉴를
|
||||
생성하는 예제입니다. 그리고 유저가 페이지에서 오른쪽 클릭을 할 때마다 마우스 위치에
|
||||
팝업 형태로 메뉴를 표시합니다:
|
||||
|
||||
```html
|
||||
<!-- index.html -->
|
||||
|
|
@ -27,7 +29,8 @@ window.addEventListener('contextmenu', function (e) {
|
|||
</script>
|
||||
```
|
||||
|
||||
또 하나의 예를 들자면 다음 예제는 랜더러 프로세스에서 template API를 사용하여 어플리케이션 메뉴를 만듭니다:
|
||||
또 하나의 예를 들자면 다음 예제는 랜더러 프로세스에서 template API를 사용하여
|
||||
어플리케이션 메뉴를 만듭니다:
|
||||
|
||||
```javascript
|
||||
var template = [
|
||||
|
|
@ -210,14 +213,15 @@ Menu.setApplicationMenu(menu);
|
|||
|
||||
* `menu` Menu
|
||||
|
||||
지정한 `menu`를 어플리케이션 메뉴로 만듭니다. OS X에선 상단바에 표시되며 Windows와 Linux에선 각 창의 상단에 표시됩니다.
|
||||
지정한 `menu`를 어플리케이션 메뉴로 만듭니다. OS X에선 상단바에 표시되며 Windows와
|
||||
Linux에선 각 창의 상단에 표시됩니다.
|
||||
|
||||
### `Menu.sendActionToFirstResponder(action)` _OS X_
|
||||
|
||||
* `action` String
|
||||
|
||||
`action`을 어플리케이션의 first responder에 전달합니다.
|
||||
이 메서드는 Cocoa 메뉴 동작을 에뮬레이트 하는데 사용되며 보통 `MenuItem`의 `selector` 속성에 사용됩니다.
|
||||
`action`을 어플리케이션의 first responder에 전달합니다. 이 메서드는 Cocoa 메뉴
|
||||
동작을 에뮬레이트 하는데 사용되며 보통 `MenuItem`의 `selector` 속성에 사용됩니다.
|
||||
|
||||
**참고:** 이 메서드는 OS X에서만 사용할 수 있습니다.
|
||||
|
||||
|
|
@ -225,9 +229,11 @@ Menu.setApplicationMenu(menu);
|
|||
|
||||
* `template` Array
|
||||
|
||||
기본적으로 `template`는 [MenuItem](menu-item.md)을 생성할 때 사용하는 `options`의 배열입니다. 사용법은 위에서 설명한 것과 같습니다.
|
||||
기본적으로 `template`는 [MenuItem](menu-item.md)을 생성할 때 사용하는 `options`의
|
||||
배열입니다. 사용법은 위에서 설명한 것과 같습니다.
|
||||
|
||||
또한 `template`에는 다른 속성도 추가할 수 있으며 메뉴가 만들어질 때 해당 메뉴 아이템의 프로퍼티로 변환됩니다.
|
||||
또한 `template`에는 다른 속성도 추가할 수 있으며 메뉴가 만들어질 때 해당 메뉴 아이템의
|
||||
프로퍼티로 변환됩니다.
|
||||
|
||||
### `Menu.popup([browserWindow, x, y])`
|
||||
|
||||
|
|
@ -235,9 +241,8 @@ Menu.setApplicationMenu(menu);
|
|||
* `x` Number (optional)
|
||||
* `y` Number (만약 `x`를 지정했을 경우 반드시 `y`도 지정해야 합니다)
|
||||
|
||||
메뉴를 `browserWindow` 내부 팝업으로 표시합니다.
|
||||
옵션으로 메뉴를 표시할 `(x,y)` 좌표를 지정할 수 있습니다.
|
||||
따로 좌표를 지정하지 않은 경우 마우스 커서 위치에 표시됩니다.
|
||||
메뉴를 `browserWindow` 내부 팝업으로 표시합니다. 옵션으로 메뉴를 표시할 `(x,y)`
|
||||
좌표를 지정할 수 있습니다. 따로 좌표를 지정하지 않은 경우 마우스 커서 위치에 표시됩니다.
|
||||
|
||||
### `Menu.append(menuItem)`
|
||||
|
||||
|
|
@ -259,13 +264,14 @@ Menu.setApplicationMenu(menu);
|
|||
## OS X 어플리케이션 메뉴에 대해 알아 둬야 할 것들
|
||||
|
||||
OS X에선 Windows, Linux와 달리 완전히 다른 어플리케이션 메뉴 스타일을 가지고 있습니다.
|
||||
그래서 어플리케이션을 네이티브처럼 작동할 수 있도록 하기 위해 다음 몇 가지 유의 사항을 숙지해야 합니다.
|
||||
그래서 어플리케이션을 네이티브처럼 작동할 수 있도록 하기 위해 다음 몇 가지 유의 사항을
|
||||
숙지해야 합니다.
|
||||
|
||||
### 기본 메뉴
|
||||
|
||||
OS X엔 `Services`나 `Windows`와 같은 많은 시스템 지정 기본 메뉴가 있습니다.
|
||||
기본 메뉴를 만들려면 반드시 다음 리스트 중 한 가지를 선택하여 메뉴의 `role`로 지정해야 합니다.
|
||||
그러면 Electron이 자동으로 인식하여 해당 메뉴를 기본 메뉴로 만듭니다:
|
||||
OS X엔 `Services`나 `Windows`와 같은 많은 시스템 지정 기본 메뉴가 있습니다. 기본
|
||||
메뉴를 만들려면 반드시 다음 리스트 중 한 가지를 선택하여 메뉴의 `role`로 지정해야
|
||||
합니다. 그러면 Electron이 자동으로 인식하여 해당 메뉴를 기본 메뉴로 만듭니다:
|
||||
|
||||
* `window`
|
||||
* `help`
|
||||
|
|
@ -273,29 +279,38 @@ OS X엔 `Services`나 `Windows`와 같은 많은 시스템 지정 기본 메뉴
|
|||
|
||||
### 메뉴 아이템 기본 동작
|
||||
|
||||
OS X는 몇가지 메뉴 아이템에 대해 `About xxx`, `Hide xxx`, `Hide Others`와 같은 기본 동작을 제공하고 있습니다.
|
||||
메뉴 아이템의 기본 동작을 지정하려면 반드시 메뉴 아이템의 `role` 속성을 지정해야 합니다.
|
||||
OS X는 몇가지 메뉴 아이템에 대해 `About xxx`, `Hide xxx`, `Hide Others`와 같은
|
||||
기본 동작을 제공하고 있습니다. 메뉴 아이템의 기본 동작을 지정하려면 반드시 메뉴
|
||||
아이템의 `role` 속성을 지정해야 합니다.
|
||||
|
||||
### 메인 메뉴의 이름
|
||||
|
||||
OS X에선 지정한 어플리케이션 메뉴에 상관없이 메뉴의 첫번째 라벨은 언제나 어플리케이션의 이름이 됩니다.
|
||||
어플리케이션 이름을 변경하려면 앱 번들내의 `Info.plist` 파일을 수정해야합니다.
|
||||
자세한 내용은 [About Information Property List Files][AboutInformationPropertyListFiles] 문서를 참고하세요.
|
||||
OS X에선 지정한 어플리케이션 메뉴에 상관없이 메뉴의 첫번째 라벨은 언제나 어플리케이션의
|
||||
이름이 됩니다. 어플리케이션 이름을 변경하려면 앱 번들내의 `Info.plist` 파일을 수정해야
|
||||
합니다. 자세한 내용은 [About Information Property List Files][AboutInformationPropertyListFiles] 문서를 참고하세요.
|
||||
|
||||
## 메뉴 아이템 위치
|
||||
|
||||
`Menu.buildFromTemplate`로 메뉴를 만들 때 `position`과 `id`를 사용해서 아이템의 위치를 지정할 수 있습니다.
|
||||
`Menu.buildFromTemplate`로 메뉴를 만들 때 `position`과 `id`를 사용해서 아이템의
|
||||
위치를 지정할 수 있습니다.
|
||||
|
||||
`MenuItem`의 `position` 속성은 `[placement]=[id]`와 같은 형식을 가지며 `placement`는
|
||||
`before`, `after`, `endof` 속성 중 한가지를 사용할 수 있고 `id`는 메뉴 아이템이 가지는 유일 ID 입니다:
|
||||
`MenuItem`의 `position` 속성은 `[placement]=[id]`와 같은 형식을 가지며
|
||||
`placement`는 `before`, `after`, `endof` 속성 중 한가지를 사용할 수 있고 `id`는
|
||||
메뉴 아이템이 가지는 유일 ID 입니다:
|
||||
|
||||
* `before` - 이 아이템을 지정한 id 이전의 위치에 삽입합니다. 만약 참조된 아이템이 없을 경우 메뉴의 맨 뒤에 삽입됩니다.
|
||||
* `after` - 이 아이템을 지정한 id 다음의 위치에 삽입합니다. 만약 참조된 아이템이 없을 경우 메뉴의 맨 뒤에 삽입됩니다.
|
||||
* `endof` - 이 아이템을 id의 논리 그룹에 맞춰서 각 그룹의 항목 뒤에 삽입합니다. (그룹은 분리자 아이템에 의해 만들어집니다)
|
||||
만약 참조된 아이템의 분리자 그룹이 존재하지 않을 경우 지정된 id로 새로운 분리자 그룹을 만든 후 해당 그룹의 뒤에 삽입됩니다.
|
||||
* `before` - 이 아이템을 지정한 id 이전의 위치에 삽입합니다. 만약 참조된 아이템이
|
||||
없을 경우 메뉴의 맨 뒤에 삽입됩니다.
|
||||
* `after` - 이 아이템을 지정한 id 다음의 위치에 삽입합니다. 만약 참조된 아이템이
|
||||
없을 경우 메뉴의 맨 뒤에 삽입됩니다.
|
||||
* `endof` - 이 아이템을 id의 논리 그룹에 맞춰서 각 그룹의 항목 뒤에 삽입합니다.
|
||||
(그룹은 분리자 아이템에 의해 만들어집니다) 만약 참조된 아이템의 분리자 그룹이
|
||||
존재하지 않을 경우 지정된 id로 새로운 분리자 그룹을 만든 후 해당 그룹의 뒤에
|
||||
삽입됩니다.
|
||||
|
||||
위치를 지정한 아이템의 뒤에 위치가 지정되지 않은 아이템이 있을 경우 각 아이템의 위치가 지정되기 전까지 모든 아이템이 위치가 지정된 아이템의 뒤에 삽입됩니다.
|
||||
따라서 위치를 이동하고 싶은 특정 그룹의 아이템들이 있을 경우 해당 그룹의 맨 첫번째 메뉴 아이템의 위치만을 지정하면 됩니다.
|
||||
위치를 지정한 아이템의 뒤에 위치가 지정되지 않은 아이템이 있을 경우 각 아이템의 위치가
|
||||
지정되기 전까지 모든 아이템이 위치가 지정된 아이템의 뒤에 삽입됩니다. 따라서 위치를
|
||||
이동하고 싶은 특정 그룹의 아이템들이 있을 경우 해당 그룹의 맨 첫번째 메뉴 아이템의
|
||||
위치만을 지정하면 됩니다.
|
||||
|
||||
### 예제
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
# nativeImage
|
||||
|
||||
Electron은 파일 경로 또는 `nativeImage` 인스턴스를 통해 이미지를 사용할 수 있는 API를 가지고 있습니다.
|
||||
`null`을 전달할 경우 빈 이미지가 생성됩니다.
|
||||
Electron은 파일 경로 또는 `nativeImage` 인스턴스를 통해 이미지를 사용할 수 있는 API를
|
||||
가지고 있습니다. `null`을 전달할 경우 빈 이미지가 생성됩니다.
|
||||
|
||||
예를 들어 트레이 메뉴를 만들거나 윈도우의 아이콘을 설정할 때 다음과 같이 파일 경로를 전달하여 이미지를 사용할 수 있습니다:
|
||||
예를 들어 트레이 메뉴를 만들거나 윈도우의 아이콘을 설정할 때 다음과 같이 파일 경로를
|
||||
전달하여 이미지를 사용할 수 있습니다:
|
||||
|
||||
```javascript
|
||||
var appIcon = new Tray('/Users/somebody/images/icon.png');
|
||||
|
|
@ -26,11 +27,15 @@ var appIcon = new Tray(image);
|
|||
|
||||
## 고해상도 이미지
|
||||
|
||||
플랫폼이 high-DPI를 지원하는 경우 `@2x`와 같이 이미지의 파일명 뒤에 접미사를 추가하여 고해상도 이미지로 지정할 수 있습니다.
|
||||
플랫폼이 high-DPI를 지원하는 경우 `@2x`와 같이 이미지의 파일명 뒤에 접미사를 추가하여
|
||||
고해상도 이미지로 지정할 수 있습니다.
|
||||
|
||||
예를 들어 `icon.png` 라는 기본 해상도의 이미지를 기준으로 크기를 두 배로 늘린 이미지를 `icon@2x.png` 처럼 지정하면 고해상도 이미지로 처리됩니다.
|
||||
예를 들어 `icon.png` 라는 기본 해상도의 이미지를 기준으로 크기를 두 배로 늘린 이미지를
|
||||
`icon@2x.png` 처럼 지정하면 고해상도 이미지로 처리됩니다.
|
||||
|
||||
서로 다른 해상도(DPI)의 이미지를 같이 지원하고 싶다면 다중 해상도의 이미지를 접미사를 붙여 한 폴더에 같이 넣으면 됩니다. 이 이미지를 사용(로드)할 땐 따로 접미사를 붙이지 않습니다:
|
||||
서로 다른 해상도(DPI)의 이미지를 같이 지원하고 싶다면 다중 해상도의 이미지를 접미사를
|
||||
붙여 한 폴더에 같이 넣으면 됩니다. 이 이미지를 사용(로드)할 땐 따로 접미사를 붙이지
|
||||
않습니다:
|
||||
|
||||
```text
|
||||
images/
|
||||
|
|
@ -60,14 +65,16 @@ var appIcon = new Tray('/Users/somebody/images/icon.png');
|
|||
|
||||
## 템플릿 이미지
|
||||
|
||||
템플릿 이미지는 검은색과 명확한 색상(알파 채널)으로 이루어져 있습니다.
|
||||
템플릿 이미지는 단독 이미지로 사용되지 않고 다른 컨텐츠와 혼합되어 최종 외관 만드는데 사용됩니다.
|
||||
템플릿 이미지는 검은색과 명확한 색상(알파 채널)으로 이루어져 있습니다. 템플릿 이미지는
|
||||
단독 이미지로 사용되지 않고 다른 컨텐츠와 혼합되어 최종 외관 만드는데 사용됩니다.
|
||||
|
||||
가장 일반적으로 템플릿 이미지는 밝고 어두운 테마 색상으로 변경할 수 있는 메뉴 바 아이콘 등에 사용되고 있습니다.
|
||||
가장 일반적으로 템플릿 이미지는 밝고 어두운 테마 색상으로 변경할 수 있는 메뉴 바 아이콘
|
||||
등에 사용되고 있습니다.
|
||||
|
||||
**참고:** 템플릿 이미지는 OS X 운영체제만 지원합니다.
|
||||
|
||||
템플릿 이미지를 지정하려면 다음 예제와 같이 파일명에 `Template` 문자열을 추가해야 합니다:
|
||||
템플릿 이미지를 지정하려면 다음 예제와 같이 파일명에 `Template` 문자열을 추가해야
|
||||
합니다:
|
||||
|
||||
* `xxxTemplate.png`
|
||||
* `xxxTemplate@2x.png`
|
||||
|
|
@ -91,7 +98,8 @@ var appIcon = new Tray('/Users/somebody/images/icon.png');
|
|||
* `buffer` [Buffer][buffer]
|
||||
* `scaleFactor` Double (optional)
|
||||
|
||||
`buffer`로부터 이미지를 로드하여 새로운 `nativeImage` 인스턴스를 만듭니다. `scaleFactor`의 기본값은 1.0 입니다.
|
||||
`buffer`로부터 이미지를 로드하여 새로운 `nativeImage` 인스턴스를 만듭니다.
|
||||
`scaleFactor`의 기본값은 1.0 입니다.
|
||||
|
||||
### `nativeImage.createFromDataURL(dataURL)`
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
# powerMonitor
|
||||
|
||||
`power-monitor` 모듈은 PC의 파워 상태를 나타냅니다. (주로 노트북 등에서 사용됩니다)
|
||||
이 모듈은 메인 프로세스에서만 사용할 수 있으며, (remote 모듈(RPC)을 사용해도 작동이 됩니다)
|
||||
메인 프로세스의 `app` 모듈에서 `ready` 이벤트를 호출하기 전까지 사용할 수 없습니다.
|
||||
이 모듈은 메인 프로세스에서만 사용할 수 있으며, (remote 모듈(RPC)을 사용해도 작동이
|
||||
됩니다) 메인 프로세스의 `app` 모듈에서 `ready` 이벤트를 호출하기 전까지 사용할 수
|
||||
없습니다.
|
||||
|
||||
예제:
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
# powerSaveBlocker
|
||||
|
||||
`powerSaveBlocker` 모듈은 시스템이 저전력(슬립) 모드로 진입하는 것을 막고 앱 시스템과 화면이 항상 활성화 상태를 유지할 수 있도록 하는 몇가지 유틸리티를 제공하는 모듈입니다.
|
||||
`powerSaveBlocker` 모듈은 시스템이 저전력(슬립) 모드로 진입하는 것을 막고 앱 시스템과
|
||||
화면이 항상 활성화 상태를 유지할 수 있도록 하는 몇가지 유틸리티를 제공하는 모듈입니다.
|
||||
|
||||
예제:
|
||||
|
||||
|
|
@ -20,27 +21,36 @@ powerSaveBlocker.stop(id);
|
|||
### `powerSaveBlocker.start(type)`
|
||||
|
||||
* `type` String - Power save blocker 종류
|
||||
* `prevent-app-suspension` - 저전력 모드 등으로 인한 어플리케이션 작동 중단을 방지합니다.
|
||||
시스템을 항시 활성화 상태로 만듭니다. 하지만 화면은 자동으로 꺼질 수 있습니다. 사용 예시: 파일 다운로드, 음악 재생 등.
|
||||
* `prevent-display-sleep`- 슬립 모드 등으로 인한 어플리케이션의 작동 중단을 방지합니다.
|
||||
시스템을 항시 활성화 상태로 만들고 슬립 모드(화면 꺼짐)를 방지합니다. 사용 예시: 비디오 재생 등.
|
||||
* `prevent-app-suspension` - 저전력 모드 등으로 인한 어플리케이션 작동 중단을
|
||||
방지합니다. 시스템을 항시 활성화 상태로 만듭니다. 하지만 화면은 자동으로 꺼질 수
|
||||
있습니다. 사용 예시: 파일 다운로드, 음악 재생 등.
|
||||
* `prevent-display-sleep`- 슬립 모드 등으로 인한 어플리케이션의 작동 중단을
|
||||
방지합니다. 시스템을 항시 활성화 상태로 만들고 슬립 모드(화면 꺼짐)를 방지합니다.
|
||||
사용 예시: 비디오 재생 등.
|
||||
|
||||
시스템이 저전력 모드(슬립)로 진입하는 것을 막기 시작합니다. 정수로 된 식별 ID를 반환합니다.
|
||||
시스템이 저전력 모드(슬립)로 진입하는 것을 막기 시작합니다. 정수로 된 식별 ID를
|
||||
반환합니다.
|
||||
|
||||
**참고:** `prevent-display-sleep` 모드는 `prevent-app-suspension` 보다 우선 순위가 높습니다.
|
||||
두 모드 중 가장 높은 우선 순위의 모드만 작동합니다. 다시 말해 `prevent-display-sleep` 모드는 언제나 `prevent-app-suspension` 모드의 효과를 덮어씌웁니다.
|
||||
**참고:** `prevent-display-sleep` 모드는 `prevent-app-suspension` 보다 우선 순위가
|
||||
높습니다. 두 모드 중 가장 높은 우선 순위의 모드만 작동합니다. 다시 말해
|
||||
`prevent-display-sleep` 모드는 언제나 `prevent-app-suspension` 모드의 효과를
|
||||
덮어씌웁니다.
|
||||
|
||||
예를 들어 A-요청이 `prevent-app-suspension` 모드를 사용하고 B-요청이 `prevent-display-sleep`를 사용하는 API 호출이 있었다 치면
|
||||
`prevent-display-sleep` 모드를 사용하는 B의 작동이 중단(stop)되기 전까지 작동하다 B가 중단되면 `prevent-app-suspension` 모드를 사용하는 A가 작동하기 시작합니다.
|
||||
예를 들어 A-요청이 `prevent-app-suspension` 모드를 사용하고 B-요청이
|
||||
`prevent-display-sleep`를 사용하는 API 호출이 있었다 하면 `prevent-display-sleep`
|
||||
모드를 사용하는 B의 작동이 중단(stop)되기 전까지 작동하다 B가 중단되면
|
||||
`prevent-app-suspension` 모드를 사용하는 A가 작동하기 시작합니다.
|
||||
|
||||
### `powerSaveBlocker.stop(id)`
|
||||
|
||||
* `id` Integer - `powerSaveBlocker.start`로 부터 반환되는 power save blocker 식별 ID.
|
||||
* `id` Integer - `powerSaveBlocker.start`로부터 반환되는 power save blocker 식별
|
||||
ID.
|
||||
|
||||
설정한 power save blocker를 중지합니다.
|
||||
|
||||
### `powerSaveBlocker.isStarted(id)`
|
||||
|
||||
* `id` Integer - `powerSaveBlocker.start`로 부터 반환되는 power save blocker 식별 ID.
|
||||
* `id` Integer - `powerSaveBlocker.start`로부터 반환되는 power save blocker 식별
|
||||
ID.
|
||||
|
||||
지정한 id의 `powerSaveBlocker`가 실행 중인지 확인합니다.
|
||||
|
|
|
|||
|
|
@ -2,19 +2,23 @@
|
|||
|
||||
Electron의 `process` 객체는 기존의 node와는 달리 약간의 차이점이 있습니다:
|
||||
|
||||
* `process.type` String - 프로세스의 타입, `browser` (메인 프로세스) 또는 `renderer`가 됩니다.
|
||||
* `process.type` String - 프로세스의 타입, `browser` (메인 프로세스) 또는
|
||||
`renderer`가 됩니다.
|
||||
* `process.versions['electron']` String - Electron의 버전.
|
||||
* `process.versions['chrome']` String - Chromium의 버전.
|
||||
* `process.resourcesPath` String - JavaScript 소스 코드의 경로.
|
||||
* `process.mas` Boolean - Mac 앱 스토어용 빌드일 때 `true`로 지정됩니다. 다른 빌드일 땐 `undefined`로 지정됩니다.
|
||||
* `process.mas` Boolean - Mac 앱 스토어용 빌드일 때 `true`로 지정됩니다. 다른
|
||||
빌드일 땐 `undefined`로 지정됩니다.
|
||||
|
||||
## Events
|
||||
|
||||
### Event: 'loaded'
|
||||
|
||||
Electron 내부 초기화 스크립트의 로드가 완료되고, 웹 페이지나 메인 스크립트를 로드하기 시작할 때 발생하는 이벤트입니다.
|
||||
Electron 내부 초기화 스크립트의 로드가 완료되고, 웹 페이지나 메인 스크립트를 로드하기
|
||||
시작할 때 발생하는 이벤트입니다.
|
||||
|
||||
이 이벤트는 preload 스크립트를 통해 node 통합이 꺼져있는 전역 스코프에 node의 전역 심볼들을 다시 추가할 때 사용할 수 있습니다:
|
||||
이 이벤트는 preload 스크립트를 통해 node 통합이 꺼져있는 전역 스코프에 node의 전역
|
||||
심볼들을 다시 추가할 때 사용할 수 있습니다:
|
||||
|
||||
```javascript
|
||||
// preload.js
|
||||
|
|
@ -38,4 +42,5 @@ process.once('loaded', function() {
|
|||
|
||||
* `maxDescriptors` Integer
|
||||
|
||||
현재 프로세스의 파일 기술자의 제한 값을 소프트 제한 `maxDescriptors`의 값이나 OS 하드 제한 중 낮은 값으로 설정합니다.
|
||||
현재 프로세스 파일 디스크립터의 제한 값을 소프트 제한 `maxDescriptors`의 값이나 OS 하드
|
||||
제한 중 낮은 값으로 설정합니다.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
# protocol
|
||||
|
||||
`protocol` 모듈은 이미 있는 프로토콜의 동작을 가로채거나 새로운 프로토콜을 만들 수 있는 기능을 제공합니다.
|
||||
`protocol` 모듈은 이미 있는 프로토콜의 동작을 가로채거나 새로운 프로토콜을 만들 수
|
||||
있는 기능을 제공합니다.
|
||||
|
||||
다음 예제는 `file://` 프로토콜과 비슷한 일을 하는 커스텀 프로토콜을 설정합니다:
|
||||
|
||||
|
|
@ -31,8 +32,8 @@ app.on('ready', function() {
|
|||
|
||||
* `schemes` Array - 표준 스킴으로 등록할 커스텀 스킴 리스트
|
||||
|
||||
표준 `scheme`의 형식은 RFC 3986 [일반 URI 구문](https://tools.ietf.org/html/rfc3986#section-3) 표준을 따릅니다.
|
||||
이 형식은 `file:`과 `filesystem:`을 포함합니다.
|
||||
표준 `scheme`의 형식은 RFC 3986 [일반 URI 구문](https://tools.ietf.org/html/rfc3986#section-3)
|
||||
표준을 따릅니다. 이 형식은 `file:`과 `filesystem:`을 포함합니다.
|
||||
|
||||
### `protocol.registerFileProtocol(scheme, handler[, completion])`
|
||||
|
||||
|
|
@ -40,20 +41,23 @@ app.on('ready', function() {
|
|||
* `handler` Function
|
||||
* `completion` Function (optional)
|
||||
|
||||
`scheme`에 파일을 응답으로 보내는 프로토콜을 등록합니다.
|
||||
`handler`는 `scheme`와 함께 `request`가 생성될 때 `handler(request, callback)` 형식으로 호출됩니다.
|
||||
`completion` 콜백은 `scheme`가 성공적으로 등록되었을 때 `completion(null)` 형식으로 호출되고
|
||||
등록에 실패했을 땐 `completion(error)` 형식으로 에러 내용을 담아 호출됩니다.
|
||||
`scheme`에 파일을 응답으로 보내는 프로토콜을 등록합니다. `handler`는 `scheme`와 함께
|
||||
`request`가 생성될 때 `handler(request, callback)` 형식으로 호출됩니다.
|
||||
`completion` 콜백은 `scheme`가 성공적으로 등록되었을 때 `completion(null)` 형식으로
|
||||
호출되고, 등록에 실패했을 땐 `completion(error)` 형식으로 에러 내용을 담아 호출됩니다.
|
||||
|
||||
`request`를 처리할 때 반드시 파일 경로 또는 `path` 속성을 포함하는 객체를 인자에 포함하여 `callback`을 호출해야 합니다.
|
||||
예: `callback(filePath)` 또는 `callback({path: filePath})`.
|
||||
`request`를 처리할 때 반드시 파일 경로 또는 `path` 속성을 포함하는 객체를 인자에
|
||||
포함하여 `callback`을 호출해야 합니다. 예: `callback(filePath)` 또는
|
||||
`callback({path: filePath})`.
|
||||
|
||||
만약 `callback`이 아무 인자도 없이 호출되거나 숫자나 `error` 프로퍼티를 가진 객체가 인자로 전달될 경우
|
||||
`request`는 지정한 `error` 코드(숫자)를 출력합니다.
|
||||
사용할 수 있는 에러 코드는 [네트워크 에러 목록](https://code.google.com/p/chromium/codesearch#chromium/src/net/base/net_error_list.h)에서 확인할 수 있습니다.
|
||||
만약 `callback`이 아무 인자도 없이 호출되거나 숫자나 `error` 프로퍼티를 가진 객체가
|
||||
인자로 전달될 경우 `request`는 지정한 `error` 코드(숫자)를 출력합니다. 사용할 수 있는
|
||||
에러 코드는 [네트워크 에러 목록](https://code.google.com/p/chromium/codesearch#chromium/src/net/base/net_error_list.h)에서
|
||||
확인할 수 있습니다.
|
||||
|
||||
기본적으로 `scheme`은 `http:`와 같이 처리됩니다. `file:`과 같이 "일반적인 URI 문법"과는 다르게 인식되는 프로토콜은
|
||||
`protocol.registerStandardSchemes`을 사용하여 표준 스킴으로 처리되도록 할 수 있습니다.
|
||||
기본적으로 `scheme`은 `http:`와 같이 처리됩니다. `file:`과 같이 "일반적인 URI 문법"
|
||||
과는 다르게 인식되는 프로토콜은 `protocol.registerStandardSchemes`을 사용하여 표준
|
||||
스킴으로 처리되도록 할 수 있습니다.
|
||||
|
||||
### `protocol.registerBufferProtocol(scheme, handler[, completion])`
|
||||
|
||||
|
|
@ -61,8 +65,9 @@ app.on('ready', function() {
|
|||
* `handler` Function
|
||||
* `completion` Function (optional)
|
||||
|
||||
`scheme`에 `Buffer`를 응답으로 보내는 프로토콜을 등록합니다.
|
||||
반드시 `Buffer` 또는 `data`, `mimeType`, `chart` 속성을 포함한 객체 중 하나를 인자에 포함하여 `callback`을 호출해야 합니다.
|
||||
`scheme`에 `Buffer`를 응답으로 보내는 프로토콜을 등록합니다. 반드시 `Buffer` 또는
|
||||
`data`, `mimeType`, `chart` 속성을 포함한 객체 중 하나를 인자에 포함하여
|
||||
`callback`을 호출해야 합니다.
|
||||
|
||||
예제:
|
||||
|
||||
|
|
@ -81,8 +86,9 @@ protocol.registerBufferProtocol('atom', function(request, callback) {
|
|||
* `handler` Function
|
||||
* `completion` Function (optional)
|
||||
|
||||
`scheme`에 `문자열`을 응답으로 보내는 프로토콜을 등록합니다.
|
||||
반드시 `문자열` 또는 `data`, `mimeType`, `chart` 속성을 포함한 객체 중 하나를 인자에 포함하여 `callback`을 호출해야 합니다.
|
||||
`scheme`에 `문자열`을 응답으로 보내는 프로토콜을 등록합니다. 반드시 `문자열` 또는
|
||||
`data`, `mimeType`, `chart` 속성을 포함한 객체 중 하나를 인자에 포함하여
|
||||
`callback`을 호출해야 합니다.
|
||||
|
||||
### `protocol.registerHttpProtocol(scheme, handler[, completion])`
|
||||
|
||||
|
|
@ -90,10 +96,12 @@ protocol.registerBufferProtocol('atom', function(request, callback) {
|
|||
* `handler` Function
|
||||
* `completion` Function (optional)
|
||||
|
||||
`scheme`에 HTTP 요청을 응답으로 보내는 프로토콜을 등록합니다.
|
||||
반드시 `url`, `method`, `referer`, `session` 속성을 포함하는 객체를 인자에 포함하여 `callback`을 호출해야 합니다.
|
||||
`scheme`에 HTTP 요청을 응답으로 보내는 프로토콜을 등록합니다. 반드시 `url`,
|
||||
`method`, `referrer`, `session` 속성을 포함하는 객체를 인자에 포함하여 `callback`을
|
||||
호출해야 합니다.
|
||||
|
||||
기본적으로 HTTP 요청은 현재 세션을 재사용합니다. 만약 서로 다른 세션에 요청을 보내고 싶으면 `session`을 `null`로 지정해야 합니다.
|
||||
기본적으로 HTTP 요청은 현재 세션을 재사용합니다. 만약 서로 다른 세션에 요청을 보내고
|
||||
싶으면 `session`을 `null`로 지정해야 합니다.
|
||||
|
||||
### `protocol.unregisterProtocol(scheme[, completion])`
|
||||
|
||||
|
|
@ -107,7 +115,8 @@ protocol.registerBufferProtocol('atom', function(request, callback) {
|
|||
* `scheme` String
|
||||
* `callback` Function
|
||||
|
||||
`scheme`에 동작(handler)이 등록되어 있는지 여부를 확인합니다. `callback`으로 결과(boolean)가 반환됩니다.
|
||||
`scheme`에 동작(handler)이 등록되어 있는지 여부를 확인합니다. `callback`으로
|
||||
결과(boolean)가 반환됩니다.
|
||||
|
||||
### `protocol.interceptFileProtocol(scheme, handler[, completion])`
|
||||
|
||||
|
|
@ -131,7 +140,8 @@ protocol.registerBufferProtocol('atom', function(request, callback) {
|
|||
* `handler` Function
|
||||
* `completion` Function (optional)
|
||||
|
||||
`scheme` 프로토콜을 가로채고 `handler`를 `Buffer` 전송에 대한 새로운 동작으로 사용합니다.
|
||||
`scheme` 프로토콜을 가로채고 `handler`를 `Buffer` 전송에 대한 새로운 동작으로
|
||||
사용합니다.
|
||||
|
||||
### `protocol.interceptHttpProtocol(scheme, handler[, completion])`
|
||||
|
||||
|
|
@ -139,7 +149,8 @@ protocol.registerBufferProtocol('atom', function(request, callback) {
|
|||
* `handler` Function
|
||||
* `completion` Function (optional)
|
||||
|
||||
`scheme` 프로토콜을 가로채고 `handler`를 HTTP 프로토콜의 요청에 대한 새로운 동작으로 사용합니다.
|
||||
`scheme` 프로토콜을 가로채고 `handler`를 HTTP 프로토콜의 요청에 대한 새로운 동작으로
|
||||
사용합니다.
|
||||
|
||||
### `protocol.uninterceptProtocol(scheme[, completion])`
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
# remote
|
||||
|
||||
`remote` 모듈은 메인 프로세스와 랜더러 프로세스(웹 페이지) 사이의 inter-process (IPC) 통신을 간단하게 추상화 한 모듈입니다.
|
||||
`remote` 모듈은 메인 프로세스와 랜더러 프로세스(웹 페이지) 사이의 inter-process
|
||||
(IPC) 통신을 간단하게 추상화 한 모듈입니다.
|
||||
|
||||
Electron의 메인 프로세스에선 GUI와 관련 있는(`dialog`, `menu`등) 모듈만 사용할 수 있습니다.
|
||||
랜더러 프로세스에서 이러한 모듈들을 사용하려면 `ipc` 모듈을 통해 메인 프로세스와 inter-process 통신을 해야합니다.
|
||||
또한, `remote` 모듈을 사용하면 inter-process 통신을 하지 않고도 간단한 API를 통해 직접 메인 프로세스의 모듈과 메서드를 사용할 수 있습니다.
|
||||
이 개념은 Java의 [RMI][rmi]와 비슷합니다.
|
||||
Electron의 메인 프로세스에선 GUI와 관련 있는(`dialog`, `menu`등) 모듈만 사용할 수
|
||||
있습니다. 랜더러 프로세스에서 이러한 모듈들을 사용하려면 `ipc` 모듈을 통해 메인
|
||||
프로세스와 inter-process 통신을 해야합니다. 또한, `remote` 모듈을 사용하면
|
||||
inter-process 통신을 하지 않고도 간단한 API를 통해 직접 메인 프로세스의 모듈과
|
||||
메서드를 사용할 수 있습니다. 이 개념은 Java의 [RMI][rmi]와 비슷합니다.
|
||||
|
||||
다음 예제는 랜더러 프로세스에서 브라우저 창을 만드는 예제입니다:
|
||||
|
||||
|
|
@ -17,35 +19,44 @@ var win = new BrowserWindow({ width: 800, height: 600 });
|
|||
win.loadURL('https://github.com');
|
||||
```
|
||||
|
||||
**참고:** 반대로 메인 프로세스에서 랜더러 프로세스에 접근 하려면 [webContents.executeJavascript](web-contents.md#webcontentsexecutejavascriptcode-usergesture) 메서드를 사용하면 됩니다.
|
||||
**참고:** 반대로 메인 프로세스에서 랜더러 프로세스에 접근 하려면 [webContents.executeJavascript](web-contents.md#webcontentsexecutejavascriptcode-usergesture)
|
||||
메서드를 사용하면 됩니다.
|
||||
|
||||
## Remote 객체
|
||||
|
||||
`remote` 모듈로부터 반환된 각 객체(메서드 포함)는 메인 프로세스의 객체를 추상화 한 객체입니다. (우리는 그것을 remote 객체 또는 remote 함수라고 부릅니다)
|
||||
Remote 모듈의 메서드를 호출하거나, 객체에 접근하거나, 생성자로 객체를 생성하는 등의 작업은 실질적으로 동기형 inter-process 메시지를 보냅니다.
|
||||
`remote` 모듈로부터 반환된 각 객체(메서드 포함)는 메인 프로세스의 객체를 추상화 한
|
||||
객체입니다. (우리는 그것을 remote 객체 또는 remote 함수라고 부릅니다) Remote 모듈의
|
||||
메서드를 호출하거나, 객체에 접근하거나, 생성자로 객체를 생성하는 등의 작업은 실질적으로
|
||||
동기형 inter-process 메시지를 보냅니다.
|
||||
|
||||
위의 예제에서 사용한 두 `BrowserWindow`와 `win`은 remote 객체입니다. 그리고 `new BrowserWindow`이 생성하는 `BrowserWindow` 객체는 랜더러 프로세스에서 생성되지 않습니다.
|
||||
대신에 이 `BrowserWindow` 객체는 메인 프로세스에서 생성되며 랜더러 프로세스에 `win` 객체와 같이 이에 대응하는 remote 객체를 반환합니다.
|
||||
위의 예제에서 사용한 두 `BrowserWindow`와 `win`은 remote 객체입니다. 그리고
|
||||
`new BrowserWindow`이 생성하는 `BrowserWindow` 객체는 랜더러 프로세스에서 생성되지
|
||||
않습니다. 대신에 이 `BrowserWindow` 객체는 메인 프로세스에서 생성되며 랜더러
|
||||
프로세스에 `win` 객체와 같이 이에 대응하는 remote 객체를 반환합니다.
|
||||
|
||||
## Remote 객체의 생명 주기
|
||||
|
||||
Electron은 랜더러 프로세스의 remote 객체가 살아있는 한(다시 말해서 GC(garbage collection)가 일어나지 않습니다) 대응하는 메인 프로세스의 객체는 릴리즈되지 않습니다.
|
||||
Electron은 랜더러 프로세스의 remote 객체가 살아있는 한(다시 말해서 GC(garbage
|
||||
collection)가 일어나지 않습니다) 대응하는 메인 프로세스의 객체는 릴리즈되지 않습니다.
|
||||
Remote 객체가 GC 되려면 대응하는 메인 프로세스 내부 객체의 참조가 해제되어야만 합니다.
|
||||
|
||||
만약 remote 객체가 랜더러 프로세스에서 누수가 생겼다면 (예시: 맵에 저장하고 할당 해제하지 않음) 대응하는 메인 프로세스의 객체도 누수가 생깁니다.
|
||||
그래서 remote 객체를 사용할 땐 메모리 누수가 생기지 않도록 매우 주의해서 사용해야 합니다.
|
||||
만약 remote 객체가 랜더러 프로세스에서 누수가 생겼다면 (예시: 맵에 저장하고 할당
|
||||
해제하지 않음) 대응하는 메인 프로세스의 객체도 누수가 생깁니다. 그래서 remote 객체를
|
||||
사용할 땐 메모리 누수가 생기지 않도록 매우 주의해서 사용해야 합니다.
|
||||
|
||||
참고로 문자열, 숫자와 같은 원시 값 타입은 복사에 의한 참조로 전달됩니다.
|
||||
|
||||
## 메인 프로세스로 콜백 넘기기
|
||||
|
||||
메인 프로세스의 코드는 `remote` 모듈을 통해 랜더러 프로세스가 전달하는 콜백 함수를 받을 수 있습니다.
|
||||
하지만 이 작업은 반드시 주의를 기울여 사용해야 합니다.
|
||||
메인 프로세스의 코드는 `remote` 모듈을 통해 랜더러 프로세스가 전달하는 콜백 함수를
|
||||
받을 수 있습니다. 하지만 이 작업은 반드시 주의를 기울여 사용해야 합니다.
|
||||
|
||||
첫째, 데드락을 피하기 위해 메인 프로세스로 전달된 콜백들은 비동기로 호출됩니다.
|
||||
이러한 이유로 메인 프로세스로 전달된 콜백들의 반환 값을 내부 함수에서 언제나 정상적으로 받을 것이라고 예측해선 안됩니다.
|
||||
첫째, 데드락을 피하기 위해 메인 프로세스로 전달된 콜백들은 비동기로 호출됩니다. 이러한
|
||||
이유로 메인 프로세스로 전달된 콜백들의 반환 값을 내부 함수에서 언제나 정상적으로 받을
|
||||
것이라고 예측해선 안됩니다.
|
||||
|
||||
예를 들어 메인 프로세스에서 `Array.map` 같은 메서드를 사용할 때 랜더러 프로세스에서 전달된 함수를 사용해선 안됩니다:
|
||||
예를 들어 메인 프로세스에서 `Array.map` 같은 메서드를 사용할 때 랜더러 프로세스에서
|
||||
전달된 함수를 사용해선 안됩니다:
|
||||
|
||||
```javascript
|
||||
// mapNumbers.js 메인 프로세스
|
||||
|
|
@ -76,10 +87,12 @@ console.log(withRendererCb, withLocalCb) // [true, true, true], [2, 3, 4]
|
|||
보다시피 랜더러 콜백의 동기 반환 값은 예상되지 않은 처리입니다.
|
||||
그리고 메인 프로세스에서 처리한 함수의 반환 값과 일치하지 않습니다.
|
||||
|
||||
둘째, 콜백들은 메인 프로세스로 전달, 호출된 이후에도 자동으로 함수의 참조가 릴리즈 되지 않습니다.
|
||||
함수 참조는 메인 프로세스에서 GC가 일어나기 전까지 계속 프로세스에 남아있게 됩니다.
|
||||
둘째, 콜백들은 메인 프로세스로 전달, 호출된 이후에도 자동으로 함수의 참조가 릴리즈 되지
|
||||
않습니다. 함수 참조는 메인 프로세스에서 GC가 일어나기 전까지 계속 프로세스에 남아있게
|
||||
됩니다.
|
||||
|
||||
다음 코드를 보면 느낌이 올 것입니다. 이 예제는 remote 객체에 `close` 이벤트 콜백을 설치합니다:
|
||||
다음 코드를 보면 느낌이 올 것입니다. 이 예제는 remote 객체에 `close` 이벤트 콜백을
|
||||
설치합니다:
|
||||
|
||||
```javascript
|
||||
var remote = require('remote');
|
||||
|
|
@ -89,19 +102,23 @@ remote.getCurrentWindow().on('close', function() {
|
|||
});
|
||||
```
|
||||
|
||||
하지만 이 코드 처럼 이벤트를 명시적으로 제거하지 않는 이상 콜백 함수의 참조가 계속해서 메인 프로세스에 남아있게 됩니다.
|
||||
만약 명시적으로 콜백을 제거하지 않으면 매 번 창을 새로고침 할 때마다 콜백을 새로 설치합니다.
|
||||
게다가 이전 콜백이 제거되지 않고 계속해서 쌓이면서 메모리 누수가 발생합니다.
|
||||
하지만 이 코드 처럼 이벤트를 명시적으로 제거하지 않는 이상 콜백 함수의 참조가 계속해서
|
||||
메인 프로세스에 남아있게 됩니다. 만약 명시적으로 콜백을 제거하지 않으면 매 번 창을
|
||||
새로고침 할 때마다 콜백을 새로 설치합니다. 게다가 이전 콜백이 제거되지 않고 계속해서
|
||||
쌓이면서 메모리 누수가 발생합니다.
|
||||
|
||||
설상가상으로 이전에 설치된 콜백의 콘텍스트가 릴리즈 되고 난 후(예: 페이지 새로고침) `close` 이벤트가 발생하면 예외가 발생하고 메인 프로세스가 작동 중지됩니다.
|
||||
설상가상으로 이전에 설치된 콜백의 콘텍스트가 릴리즈 되고 난 후(예: 페이지 새로고침)
|
||||
`close` 이벤트가 발생하면 예외가 발생하고 메인 프로세스가 작동 중지됩니다.
|
||||
|
||||
이러한 문제를 피하려면 랜더러 프로세스에서 메인 프로세스로 넘긴 함수의 참조를 사용 후 확실하게 제거해야 합니다.
|
||||
작업 후 이벤트 콜백을 포함하여 책임 있게 함수의 참조를 제거하거나 메인 프로세스에서 랜더러 프로세스가 종료될 때 내부적으로 함수 참조를 제거하도록 설계해야 합니다.
|
||||
이러한 문제를 피하려면 랜더러 프로세스에서 메인 프로세스로 넘긴 함수의 참조를 사용 후
|
||||
확실하게 제거해야 합니다. 작업 후 이벤트 콜백을 포함하여 책임 있게 함수의 참조를
|
||||
제거하거나 메인 프로세스에서 랜더러 프로세스가 종료될 때 내부적으로 함수 참조를
|
||||
제거하도록 설계해야 합니다.
|
||||
|
||||
## 메인 프로세스의 빌트인 모듈에 접근
|
||||
|
||||
메인 프로세스의 빌트인 모듈은 `remote` 모듈에 getter로 등록되어 있습니다.
|
||||
따라서 `remote` 모듈을 `electron` 모듈처럼 직접 사용할 수 있습니다.
|
||||
메인 프로세스의 빌트인 모듈은 `remote` 모듈에 getter로 등록되어 있습니다. 따라서
|
||||
`remote` 모듈을 `electron` 모듈처럼 직접 사용할 수 있습니다.
|
||||
|
||||
```javascript
|
||||
const app = remote.app;
|
||||
|
|
@ -133,6 +150,7 @@ const app = remote.app;
|
|||
|
||||
### `remote.process`
|
||||
|
||||
메인 프로세스의 `process` 객체를 반환합니다. `remote.getGlobal('process')`와 같습니다. 하지만 캐시 됩니다.
|
||||
메인 프로세스의 `process` 객체를 반환합니다. `remote.getGlobal('process')`와
|
||||
같습니다. 하지만 캐시 됩니다.
|
||||
|
||||
[rmi]: http://en.wikipedia.org/wiki/Java_remote_method_invocation
|
||||
[rmi]: http://en.wikipedia.org/wiki/Java_remote_method_invocation
|
||||
|
|
|
|||
|
|
@ -3,10 +3,12 @@
|
|||
`screen` 모듈은 화면 크기, 디스플레이, 커서 위치 등등의 다양한 정보를 가져옵니다.
|
||||
이 모듈은 `app` 모듈의 `ready` 이벤트가 발생하기 전까지 사용할 수 없습니다.
|
||||
|
||||
`screen`은 [EventEmitter](http://nodejs.org/api/events.html#events_class_events_eventemitter)를 상속 받았습니다.
|
||||
`screen`은 [EventEmitter](http://nodejs.org/api/events.html#events_class_events_eventemitter)를
|
||||
상속 받았습니다.
|
||||
|
||||
**참고:** 랜더러 / DevTools에선 이미 DOM 속성이 `window.screen`을 가지고 있으므로 `screen = require('screen')` 형식으로 모듈을 사용할 수 없습니다.
|
||||
아래의 예제와 같이 `electronScreen` 같은 이름으로 모듈 이름을 대체하여 사용해야 합니다.
|
||||
**참고:** 랜더러 / DevTools에선 이미 DOM 속성이 `window.screen`을 가지고 있으므로
|
||||
`screen = require('screen')` 형식으로 모듈을 사용할 수 없습니다. 아래의 예제와 같이
|
||||
`electronScreen` 같은 이름으로 모듈 이름을 대체하여 사용해야 합니다.
|
||||
|
||||
다음 예제는 화면 전체를 채우는 윈도우 창을 생성합니다:
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
# session
|
||||
|
||||
`session` 객체는 [`BrowserWindow`](browser-window.md)의 [`webContents`](web-contents.md)의 프로퍼티입니다.
|
||||
다음과 같이 `BrowserWindow` 인스턴스에서 접근할 수 있습니다:
|
||||
`session` 객체는 [`BrowserWindow`](browser-window.md)의
|
||||
[`webContents`](web-contents.md)의 프로퍼티입니다. 다음과 같이 `BrowserWindow`
|
||||
인스턴스에서 접근할 수 있습니다:
|
||||
|
||||
```javascript
|
||||
var BrowserWindow = require('browser-window');
|
||||
|
|
@ -43,7 +44,8 @@ session.on('will-download', function(event, item, webContents) {
|
|||
* `callback` Function
|
||||
|
||||
`hostname`에 대한 `certificate`의 유효성 검증이 실패했을 때 발생하는 이벤트 입니다.
|
||||
인증서를 신뢰한다면 `event.preventDefault()` 와 `callback(true)`를 호출하여 기본 동작을 방지해야 합니다.
|
||||
인증서를 신뢰한다면 `event.preventDefault()` 와 `callback(true)`를 호출하여 기본
|
||||
동작을 방지해야 합니다.
|
||||
|
||||
```javascript
|
||||
session.on('verify-certificate', function(event, hostname, certificate, callback) {
|
||||
|
|
@ -63,7 +65,8 @@ session.on('verify-certificate', function(event, hostname, certificate, callback
|
|||
|
||||
### `session.cookies`
|
||||
|
||||
`cookies` 속성은 쿠키를 조작하는 방법을 제공합니다. 예를 들어 다음과 같이 할 수 있습니다:
|
||||
`cookies` 속성은 쿠키를 조작하는 방법을 제공합니다. 예를 들어 다음과 같이 할 수
|
||||
있습니다:
|
||||
|
||||
```javascript
|
||||
var BrowserWindow = require('browser-window');
|
||||
|
|
@ -101,7 +104,8 @@ win.webContents.on('did-finish-load', function() {
|
|||
|
||||
`details` Object, properties:
|
||||
|
||||
* `url` String - `url`에 관련된 쿠키를 가져옵니다. 이 속성을 비워두면 모든 url의 쿠키를 가져옵니다.
|
||||
* `url` String - `url`에 관련된 쿠키를 가져옵니다. 이 속성을 비워두면 모든 url의
|
||||
쿠키를 가져옵니다.
|
||||
* `name` String - 이름을 기준으로 쿠키를 필터링합니다.
|
||||
* `domain` String - `domain`과 일치하는 도메인과 서브 도메인에 대한 쿠키를 가져옵니다.
|
||||
* `path` String - `path`와 일치하는 경로에 대한 쿠키를 가져옵니다.
|
||||
|
|
@ -116,23 +120,29 @@ win.webContents.on('did-finish-load', function() {
|
|||
* `domain` String - 쿠키의 도메인.
|
||||
* `host_only` String - 쿠키가 호스트 전용인가에 대한 여부.
|
||||
* `path` String - 쿠키의 경로.
|
||||
* `secure` Boolean - 쿠키가 안전한 것으로 표시되는지에 대한 여부. (일반적으로 HTTPS)
|
||||
* `secure` Boolean - 쿠키가 안전한 것으로 표시되는지에 대한 여부. (일반적으로
|
||||
HTTPS)
|
||||
* `http_only` Boolean - 쿠키가 HttpOnly로 표시되는지에 대한 여부.
|
||||
* `session` Boolean - 쿠키가 세션 쿠키 또는 만료일이 있는 영구 쿠키인지에 대한 여부.
|
||||
* `expirationDate` Double - (Option) UNIX 시간으로 표시되는 쿠키의 만료일에 대한 초 단위 시간. 세션 쿠키는 지원되지 않음.
|
||||
* `session` Boolean - 쿠키가 세션 쿠키 또는 만료일이 있는 영구 쿠키인지에 대한
|
||||
여부.
|
||||
* `expirationDate` Double - (Option) UNIX 시간으로 표시되는 쿠키의 만료일에
|
||||
대한 초 단위 시간. 세션 쿠키는 지원되지 않음.
|
||||
|
||||
### `session.cookies.set(details, callback)`
|
||||
|
||||
`details` Object, properties:
|
||||
|
||||
* `url` String - `url`에 관련된 쿠키를 가져옵니다.
|
||||
* `url` String - `url`에 관련된 쿠키를 가져옵니다.
|
||||
* `name` String - 쿠키의 이름입니다. 기본적으로 비워두면 생략됩니다.
|
||||
* `value` String - 쿠키의 값입니다. 기본적으로 비워두면 생략됩니다.
|
||||
* `domain` String - 쿠키의 도메인입니다. 기본적으로 비워두면 생략됩니다.
|
||||
* `path` String - 쿠키의 경로입니다. 기본적으로 비워두면 생략됩니다.
|
||||
* `secure` Boolean - 쿠키가 안전한 것으로 표시되는지에 대한 여부입니다. 기본값은 false입니다.
|
||||
* `session` Boolean - 쿠키가 HttpOnly로 표시되는지에 대한 여부입니다. 기본값은 false입니다.
|
||||
* `expirationDate` Double - UNIX 시간으로 표시되는 쿠키의 만료일에 대한 초 단위 시간입니다. 생략하면 쿠키는 세션 쿠키가 됩니다.
|
||||
* `secure` Boolean - 쿠키가 안전한 것으로 표시되는지에 대한 여부입니다. 기본값은
|
||||
false입니다.
|
||||
* `session` Boolean - 쿠키가 HttpOnly로 표시되는지에 대한 여부입니다. 기본값은
|
||||
false입니다.
|
||||
* `expirationDate` Double - UNIX 시간으로 표시되는 쿠키의 만료일에 대한 초 단위
|
||||
시간입니다. 생략하면 쿠키는 세션 쿠키가 됩니다.
|
||||
|
||||
* `callback` Function - function(error)
|
||||
* `error` Error
|
||||
|
|
@ -154,7 +164,8 @@ win.webContents.on('did-finish-load', function() {
|
|||
### `session.clearStorageData([options, ]callback)`
|
||||
|
||||
* `options` Object (optional), proprties:
|
||||
* `origin` String - `scheme://host:port`와 같은 `window.location.origin` 규칙을 따르는 origin 문자열.
|
||||
* `origin` String - `scheme://host:port`와 같은 `window.location.origin` 규칙을
|
||||
따르는 origin 문자열.
|
||||
* `storages` Array - 비우려는 스토리지의 종류, 다음과 같은 타입을 포함할 수 있습니다:
|
||||
`appcache`, `cookies`, `filesystem`, `indexdb`, `local storage`,
|
||||
`shadercache`, `websql`, `serviceworkers`
|
||||
|
|
@ -171,7 +182,8 @@ win.webContents.on('did-finish-load', function() {
|
|||
|
||||
세션에 사용할 프록시 `config`를 분석하고 프록시를 적용합니다.
|
||||
|
||||
세션에 사용할 프록시는 `config`가 PAC 주소일 경우 그대로 적용하고, 다른 형식일 경우 다음 규칙에 따라 적용합니다.
|
||||
세션에 사용할 프록시는 `config`가 PAC 주소일 경우 그대로 적용하고, 다른 형식일 경우
|
||||
다음 규칙에 따라 적용합니다.
|
||||
|
||||
```
|
||||
config = scheme-proxies[";"<scheme-proxies>]
|
||||
|
|
@ -181,27 +193,35 @@ proxy-uri-list = <proxy-uri>[","<proxy-uri-list>]
|
|||
proxy-uri = [<proxy-scheme>"://"]<proxy-host>[":"<proxy-port>]
|
||||
|
||||
예시:
|
||||
"http=foopy:80;ftp=foopy2" -- http:// URL에 "foopy:80" HTTP 프록시를 사용합니다.
|
||||
"foopy2:80" 는 ftp:// URL에 사용됩니다.
|
||||
"http=foopy:80;ftp=foopy2" -- http:// URL에 "foopy:80" HTTP 프록시를
|
||||
사용합니다. "foopy2:80" 는 ftp:// URL에
|
||||
사용됩니다.
|
||||
"foopy:80" -- 모든 URL에 "foopy:80" 프록시를 사용합니다.
|
||||
"foopy:80,bar,direct://" -- 모든 URL에 "foopy:80" HTTP 프록시를 사용합니다.
|
||||
문제가 발생하여 "foopy:80"를 사용할 수 없는 경우 "bar"를 대신 사용하여
|
||||
장애를 복구하며 그 다음 문제가 생긴 경우 프록시를 사용하지 않습니다.
|
||||
"socks4://foopy" -- 모든 URL에 "foopy:1000" SOCKS v4 프록시를 사용합니다.
|
||||
"http=foopy,socks5://bar.com -- http:// URL에 "foopy" HTTP 프록시를 사용합니다.
|
||||
문제가 발생하여 "foopy"를 사용할 수 없는 경우 SOCKS5 "bar.com"
|
||||
"foopy:80,bar,direct://" -- 모든 URL에 "foopy:80" HTTP 프록시를
|
||||
사용합니다. 문제가 발생하여 "foopy:80"를
|
||||
사용할 수 없는 경우 "bar"를 대신 사용하여
|
||||
장애를 복구하며 그 다음 문제가 생긴 경우
|
||||
프록시를 사용하지 않습니다.
|
||||
"socks4://foopy" -- 모든 URL에 "foopy:1000" SOCKS v4 프록시를
|
||||
사용합니다.
|
||||
"http=foopy,socks5://bar.com -- http:// URL에 "foopy" HTTP 프록시를
|
||||
사용합니다. 문제가 발생하여 "foopy"를
|
||||
사용할 수 없는 경우 SOCKS5 "bar.com"
|
||||
프록시를 대신 사용합니다.
|
||||
"http=foopy,direct:// -- http:// URL에 "foopy" HTTP 프록시를 사용합니다.
|
||||
그리고 문제가 발생하여 "foopy"를 사용할 수 없는 경우 프록시를 사용하지 않습니다.
|
||||
"http=foopy;socks=foopy2 -- http:// URL에 "foopy" HTTP 프록시를 사용합니다.
|
||||
그리고 "socks4://foopy2" 프록시를 다른 모든 URL에 사용합니다.
|
||||
"http=foopy,direct:// -- http:// URL에 "foopy" HTTP 프록시를
|
||||
사용합니다. 그리고 문제가 발생하여 "foopy"를
|
||||
사용할 수 없는 경우 프록시를 사용하지 않습니다.
|
||||
"http=foopy;socks=foopy2 -- http:// URL에 "foopy" HTTP 프록시를
|
||||
사용합니다. 그리고 "socks4://foopy2"
|
||||
프록시를 다른 모든 URL에 사용합니다.
|
||||
```
|
||||
|
||||
### `session.setDownloadPath(path)`
|
||||
|
||||
* `path` String - 다운로드 위치
|
||||
|
||||
다운로드 저장 위치를 지정합니다. 기본 다운로드 위치는 각 어플리케이션 데이터 디렉터리의 `Downloads` 폴더입니다.
|
||||
다운로드 저장 위치를 지정합니다. 기본 다운로드 위치는 각 어플리케이션 데이터 디렉터리의
|
||||
`Downloads` 폴더입니다.
|
||||
|
||||
### `session.enableNetworkEmulation(options)`
|
||||
|
||||
|
|
|
|||
|
|
@ -29,9 +29,10 @@ shell.openExternal('https://github.com');
|
|||
|
||||
* `url` String
|
||||
|
||||
제공된 외부 프로토콜 URL을 기반으로 데스크톱의 기본 프로그램으로 엽니다. (예를 들어 mailto: URL은 유저의 기본 이메일 에이전트로 URL을 엽니다.)
|
||||
제공된 외부 프로토콜 URL을 기반으로 데스크톱의 기본 프로그램으로 엽니다. (예를 들어
|
||||
mailto: URL은 유저의 기본 이메일 에이전트로 URL을 엽니다.)
|
||||
|
||||
역주: 폴더는 'file:\\\\C:\\'와 같이 지정하여 열 수 있습니다. (`\\`로 경로를 표현한 이유는 Escape 문자열을 참고하세요.)
|
||||
역주: 폴더는 'file:\\\\C:\\'와 같이 지정하여 열 수 있습니다. (Windows의 경우)
|
||||
|
||||
### `shell.moveItemToTrash(fullPath)`
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,17 @@
|
|||
# 개요
|
||||
|
||||
Electron은 모든 [Node.js의 built-in 모듈](http://nodejs.org/api/)과 third-party node 모듈을 완벽하게 지원합니다. ([네이티브 모듈](../tutorial/using-native-node-modules.md) 포함)
|
||||
Electron은 모든 [Node.js의 built-in 모듈](http://nodejs.org/api/)과 third-party
|
||||
node 모듈을 완벽하게 지원합니다. ([네이티브 모듈](../tutorial/using-native-node-modules.md)
|
||||
포함)
|
||||
|
||||
또한 Electron은 네이티브 데스크톱 어플리케이션을 개발 할 수 있도록 추가적인 built-in 모듈을 제공합니다.
|
||||
몇몇 모듈은 메인 프로세스에서만 사용할 수 있고 어떤 모듈은 랜더러 프로세스(웹 페이지)에서만 사용할 수 있습니다.
|
||||
또한 두 프로세스 모두 사용할 수 있는 모듈도 있습니다.
|
||||
또한 Electron은 네이티브 데스크톱 어플리케이션을 개발 할 수 있도록 추가적인 built-in
|
||||
모듈을 제공합니다. 몇몇 모듈은 메인 프로세스에서만 사용할 수 있고 어떤 모듈은 랜더러
|
||||
프로세스(웹 페이지)에서만 사용할 수 있습니다. 또한 두 프로세스 모두 사용할 수 있는
|
||||
모듈도 있습니다.
|
||||
|
||||
기본적인 규칙으로 [GUI][gui]와 저 수준 시스템에 관련된 모듈들은 오직 메인 프로세스에서만 사용할 수 있습니다.
|
||||
[메인 프로세스 vs. 랜더러 프로세스](../tutorial/quick-start.md#메인-프로세스) 컨셉에 익숙해야 모듈을 다루기 쉬우므로 관련 문서를 읽어 보는 것을 권장합니다.
|
||||
기본적인 규칙으로 [GUI][gui]와 저 수준 시스템에 관련된 모듈들은 오직 메인
|
||||
프로세스에서만 사용할 수 있습니다. [메인 프로세스 vs. 랜더러 프로세스](../tutorial/quick-start.md#메인-프로세스)
|
||||
컨셉에 익숙해야 모듈을 다루기 쉬우므로 관련 문서를 읽어 보는 것을 권장합니다.
|
||||
|
||||
메인 프로세스 스크립트는 일반 Node.js 스크립트와 비슷합니다:
|
||||
|
||||
|
|
@ -24,7 +28,8 @@ app.on('ready', function() {
|
|||
});
|
||||
```
|
||||
|
||||
랜더러 프로세스도 예외적인 node module들을 사용할 수 있다는 점을 제외하면 일반 웹 페이지와 크게 다를게 없습니다:
|
||||
랜더러 프로세스도 예외적인 node module들을 사용할 수 있다는 점을 제외하면 일반 웹
|
||||
페이지와 크게 다를게 없습니다:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
|
|
@ -38,7 +43,8 @@ app.on('ready', function() {
|
|||
</html>
|
||||
```
|
||||
|
||||
어플리케이션을 실행하려면 [앱 실행하기](../tutorial/quick-start.md#앱 실행하기) 문서를 참고하기 바랍니다.
|
||||
어플리케이션을 실행하려면 [앱 실행하기](../tutorial/quick-start.md#앱 실행하기)
|
||||
문서를 참고하기 바랍니다.
|
||||
|
||||
## 분리 할당
|
||||
|
||||
|
|
@ -49,15 +55,17 @@ app.on('ready', function() {
|
|||
const {app, BrowserWindow} = require('electron')
|
||||
```
|
||||
|
||||
아직 플레인 자바스크립트를 쓰고 있다면, Chrome이 ES6를 완전히 지원하기 전까지 기다려야 합니다.
|
||||
아직 플레인 자바스크립트를 쓰고 있다면, Chrome이 ES6를 완전히 지원하기 전까지 기다려야
|
||||
합니다.
|
||||
|
||||
## 이전 스타일의 빌트인 모듈 비활성화
|
||||
|
||||
v0.35.0 이전 버전에선 빌트인 모듈이 모두 `require('module-name')`같은 형식으로 사용되었습니다.
|
||||
하지만 [많은 단점][issue-387]이 있기 때문에 현재 변경되었습니다.
|
||||
v0.35.0 이전 버전에선 빌트인 모듈이 모두 `require('module-name')`같은 형식으로
|
||||
사용되었습니다. 하지만 [많은 단점][issue-387]이 있기 때문에 현재 API가 변경되었습니다.
|
||||
하지만 오래된 앱의 호환성 유지를 위해 아직 구 버전 API를 지원하고 있습니다.
|
||||
|
||||
완벽하게 모든 구 버전 API를 비활성화하려면 `ELECTRON_HIDE_INTERNAL_MODULES` 환경 변수를 설정하면 됩니다:
|
||||
완벽하게 모든 구 버전 API를 비활성화하려면 `ELECTRON_HIDE_INTERNAL_MODULES` 환경
|
||||
변수를 설정하면 됩니다:
|
||||
|
||||
```javascript
|
||||
process.env.ELECTRON_HIDE_INTERNAL_MODULES = 'true'
|
||||
|
|
@ -72,4 +80,4 @@ require('electron').hideInternalModules()
|
|||
[gui]: https://en.wikipedia.org/wiki/Graphical_user_interface
|
||||
[main-process]: ../tutorial/quick-start.md#메인-프로세스
|
||||
[desctructuring-assignment]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
|
||||
[issue-387]: https://github.com/atom/electron/issues/387
|
||||
[issue-387]: https://github.com/atom/electron/issues/387
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
# Tray
|
||||
|
||||
`Tray`는 OS의 알림 영역에 아이콘을 표시합니다. 보통 컨텍스트 메뉴(context menu)를 같이 사용합니다.
|
||||
`Tray`는 OS의 알림 영역에 아이콘을 표시합니다. 보통 컨텍스트 메뉴(context menu)를
|
||||
같이 사용합니다.
|
||||
|
||||
```javascript
|
||||
const electron = require('electron');
|
||||
|
|
@ -25,13 +26,15 @@ app.on('ready', function(){
|
|||
|
||||
__플랫폼별 한계:__
|
||||
|
||||
* Linux에서는 앱 알림 표시기(app indicator)가 지원되면 해당 기능을 사용합니다. 만약 지원하지 않으면 `GtkStatusIcon`을 대신 사용합니다.
|
||||
* Linux 배포판이 앱 알림 표시기만 지원하고 있다면 `libappindicator1`를 설치하여 트레이 아이콘이 작동하도록 만들 수 있습니다.
|
||||
* Linux에서는 앱 알림 표시기(app indicator)가 지원되면 해당 기능을 사용합니다. 만약
|
||||
지원하지 않으면 `GtkStatusIcon`을 대신 사용합니다.
|
||||
* Linux 배포판이 앱 알림 표시기만 지원하고 있다면 `libappindicator1`를 설치하여
|
||||
트레이 아이콘이 작동하도록 만들 수 있습니다.
|
||||
* 앱 알림 표시기는 컨텍스트 메뉴를 가지고 있을 때만 보입니다.
|
||||
* Linux에서 앱 알림 표시기가 사용될 경우, `clicked` 이벤트는 무시됩니다.
|
||||
* Linux에서 앱 표시기가 사용될 경우, `click` 이벤트는 무시됩니다.
|
||||
|
||||
이러한 이유로 Tray API가 모든 플랫폼에서 똑같이 작동하게 하고 싶다면 `click` 이벤트에 의존해선 안됩니다.
|
||||
그리고 언제나 컨텍스트 메뉴를 포함해야 합니다.
|
||||
이러한 이유로 Tray API가 모든 플랫폼에서 똑같이 작동하게 하고 싶다면 `click` 이벤트에
|
||||
의존해선 안되며 언제나 컨텍스트 메뉴를 포함해야 합니다.
|
||||
|
||||
## Class: Tray
|
||||
|
||||
|
|
@ -47,7 +50,7 @@ __플랫폼별 한계:__
|
|||
|
||||
`Tray` 모듈은 다음과 같은 이벤트를 가지고 있습니다:
|
||||
|
||||
**참고:** 몇가지 이벤트는 특정한 플랫폼에서만 작동합니다.
|
||||
**참고:** 몇몇 이벤트는 특정한 플랫폼에서만 작동합니다.
|
||||
|
||||
### Event: 'click'
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
# webContents
|
||||
|
||||
`webContents`는 [EventEmitter](http://nodejs.org/api/events.html#events_class_events_eventemitter)를 상속받았습니다.
|
||||
|
||||
웹 페이지의 렌더링과 관리를 책임지며 [`BrowserWindow`](browser-window.md)의 속성입니다. 다음은 `webContents` 객체에 접근하는 예제입니다:
|
||||
`webContents`는 [EventEmitter](http://nodejs.org/api/events.html#events_class_events_eventemitter)를
|
||||
상속받았습니다. 웹 페이지의 렌더링과 관리를 책임지며
|
||||
[`BrowserWindow`](browser-window.md)의 속성입니다. 다음은 `webContents` 객체에
|
||||
접근하는 예제입니다:
|
||||
|
||||
```javascript
|
||||
const BrowserWindow = require('electron').BrowserWindow;
|
||||
|
|
@ -19,7 +20,8 @@ var webContents = win.webContents;
|
|||
|
||||
### Event: 'did-finish-load'
|
||||
|
||||
탐색 작업이 끝났을 때 발생하는 이벤트입니다. 브라우저의 탭의 스피너가 멈추고 `onload` 이벤트가 발생했을 때를 말합니다.
|
||||
탐색 작업이 끝났을 때 발생하는 이벤트입니다. 브라우저의 탭의 스피너가 멈추고 `onload`
|
||||
이벤트가 발생했을 때를 말합니다.
|
||||
|
||||
### Event: 'did-fail-load'
|
||||
|
||||
|
|
@ -30,8 +32,10 @@ Returns:
|
|||
* `errorDescription` String
|
||||
* `validatedURL` String
|
||||
|
||||
이 이벤트는 `did-finish-load`와 비슷하나, 로드가 실패했거나 취소되었을 때 발생합니다. 예를 들면 `window.stop()`이 실행되었을 때 발생합니다.
|
||||
발생할 수 있는 전체 에러 코드의 목록과 설명은 [여기](https://code.google.com/p/chromium/codesearch#chromium/src/net/base/net_error_list.h)서 확인할 수 있습니다.
|
||||
이 이벤트는 `did-finish-load`와 비슷하나, 로드가 실패했거나 취소되었을 때 발생합니다.
|
||||
예를 들면 `window.stop()`이 실행되었을 때 발생합니다. 발생할 수 있는 전체 에러 코드의
|
||||
목록과 설명은 [여기](https://code.google.com/p/chromium/codesearch#chromium/src/net/base/net_error_list.h)서
|
||||
확인할 수 있습니다.
|
||||
|
||||
### Event: 'did-frame-finish-load'
|
||||
|
||||
|
|
@ -126,8 +130,8 @@ Returns:
|
|||
사용자 또는 페이지가 새로운 페이지로 이동할 때 발생하는 이벤트입니다.
|
||||
`window.location` 객체가 변경되거나 사용자가 페이지의 링크를 클릭했을 때 발생합니다.
|
||||
|
||||
이 이벤트는 `webContents.loadURL`과 `webContents.back` 같은 API를 이용하여 프로그램적으로
|
||||
시작된 탐색에 대해서는 발생하지 않습니다.
|
||||
이 이벤트는 `webContents.loadURL`과 `webContents.back` 같은 API를 이용하여
|
||||
프로그램적으로 시작된 탐색에 대해서는 발생하지 않습니다.
|
||||
|
||||
`event.preventDefault()`를 호출하면 탐색을 방지할 수 있습니다.
|
||||
|
||||
|
|
@ -200,8 +204,9 @@ webContents에서 사용되는 `session`객체를 반환합니다.
|
|||
* `userAgent` String - 요청을 시작한 유저 에이전트.
|
||||
* `extraHeaders` String - "\n"로 구분된 Extra 헤더들.
|
||||
|
||||
윈도우에 웹 페이지 `url`을 로드합니다. `url`은 `http://` or `file://`과 같은 프로토콜 접두사를 가지고 있어야 합니다.
|
||||
만약 반드시 http 캐시를 사용하지 않고 로드해야 하는 경우 `pragma` 헤더를 사용할 수 있습니다.
|
||||
윈도우에 웹 페이지 `url`을 로드합니다. `url`은 `http://` or `file://`과 같은
|
||||
프로토콜 접두사를 가지고 있어야 합니다. 만약 반드시 http 캐시를 사용하지 않고 로드해야
|
||||
하는 경우 `pragma` 헤더를 사용할 수 있습니다.
|
||||
|
||||
```javascript
|
||||
const options = {"extraHeaders" : "pragma: no-cache\n"}
|
||||
|
|
@ -308,8 +313,9 @@ CSS 코드를 현재 웹 페이지에 삽입합니다.
|
|||
|
||||
페이지에서 자바스크립트 코드를 실행합니다.
|
||||
|
||||
기본적으로 `requestFullScreen`와 같은 몇몇 HTML API들은 사용자의 조작에 의해서만 호출될 수 있습니다.
|
||||
`userGesture`를 `true`로 설정하면 이러한 제약을 무시할 수 있습니다.
|
||||
기본적으로 `requestFullScreen`와 같은 몇몇 HTML API들은 사용자의 조작에 의해서만
|
||||
호출될 수 있습니다. `userGesture`를 `true`로 설정하면 이러한 제약을 무시할 수
|
||||
있습니다.
|
||||
|
||||
### `webContents.setAudioMuted(muted)`
|
||||
|
||||
|
|
@ -373,14 +379,15 @@ CSS 코드를 현재 웹 페이지에 삽입합니다.
|
|||
|
||||
* `callback` Function
|
||||
|
||||
ServiceWorker가 등록되어있는지 확인하고 `callback`에 대한 응답으로 boolean 값을 반환합니다.
|
||||
ServiceWorker가 등록되어있는지 확인하고 `callback`에 대한 응답으로 boolean 값을
|
||||
반환합니다.
|
||||
|
||||
### `webContents.unregisterServiceWorker(callback)`
|
||||
|
||||
* `callback` Function
|
||||
|
||||
ServiceWorker가 존재하면 모두 등록을 해제하고 JS Promise가 만족될 때 `callback`에 대한
|
||||
응답으로 boolean을 반환하거나 JS Promise가 만족되지 않을 때 `false`를 반환합니다.
|
||||
ServiceWorker가 존재하면 모두 등록을 해제하고 JS Promise가 만족될 때 `callback`에
|
||||
대한 응답으로 boolean을 반환하거나 JS Promise가 만족되지 않을 때 `false`를 반환합니다.
|
||||
|
||||
### `webContents.print([options])`
|
||||
|
||||
|
|
@ -390,14 +397,16 @@ ServiceWorker가 존재하면 모두 등록을 해제하고 JS Promise가 만족
|
|||
* `printBackground` Boolean - 웹 페이지의 배경 색과 이미지를 출력합니다. 기본값은
|
||||
`false`입니다.
|
||||
|
||||
윈도우의 웹 페이지를 프린트합니다. `silent`가 `false`로 지정되어있을 땐, Electron이 시스템의
|
||||
기본 프린터와 기본 프린터 설정을 가져옵니다.
|
||||
윈도우의 웹 페이지를 프린트합니다. `silent`가 `false`로 지정되어있을 땐, Electron이
|
||||
시스템의 기본 프린터와 기본 프린터 설정을 가져옵니다.
|
||||
|
||||
웹 페이지에서 `window.print()`를 호출하는 것은
|
||||
`webContents.print({silent: false, printBackground: false})`를 호출하는 것과 같습니다.
|
||||
`webContents.print({silent: false, printBackground: false})`를 호출하는 것과
|
||||
같습니다.
|
||||
|
||||
**Note:** Windows에서의 프린터 API는 `pdf.dll`에 의존합니다.
|
||||
어플리케이션이 print 기능을 사용하지 않는 경우 전체 바이너리 크기를 줄이기 위해 `pdf.dll`을 삭제해도 됩니다.
|
||||
**참고:** Windows에서의 프린터 API는 `pdf.dll`에 의존합니다. 따라서 어플리케이션이
|
||||
print기능을 사용하지 않는 경우 전체 바이너리 크기를 줄이기 위해 `pdf.dll`을 삭제해도
|
||||
됩니다.
|
||||
|
||||
### `webContents.printToPDF(options, callback)`
|
||||
|
||||
|
|
@ -423,7 +432,8 @@ ServiceWorker가 존재하면 모두 등록을 해제하고 JS Promise가 만족
|
|||
* `error` Error
|
||||
* `data` Buffer - PDF 파일 내용.
|
||||
|
||||
Chromium의 미리보기 프린팅 커스텀 설정을 이용하여 윈도우의 웹 페이지를 PDF로 프린트합니다.
|
||||
Chromium의 미리보기 프린팅 커스텀 설정을 이용하여 윈도우의 웹 페이지를 PDF로
|
||||
프린트합니다.
|
||||
|
||||
기본으로 비어있는 `options`은 다음과 같이 여겨지게 됩니다:
|
||||
|
||||
|
|
@ -507,8 +517,9 @@ win.webContents.on("did-finish-load", function() {
|
|||
* `channel` String
|
||||
* `arg` (optional)
|
||||
|
||||
`channel`을 통하여 렌더러 프로세스에 비동기 메시지를 보냅ㄹ니다. 임의의 아규먼트를 보낼수도 있습니다.
|
||||
렌더러 프로세스는 `ipcRenderer` 모듈을 통하여 `channel`를 리슨하여 메시지를 처리할 수 있습니다.
|
||||
`channel`을 통하여 렌더러 프로세스에 비동기 메시지를 보냅니다. 임의의 인수를 보낼수도
|
||||
있습니다. 렌더러 프로세스는 `ipcRenderer` 모듈을 통하여 `channel`를 리슨하여 메시지를
|
||||
처리할 수 있습니다.
|
||||
|
||||
메인 프로세스에서 렌더러 프로세스로 메시지를 보내는 예시 입니다:
|
||||
|
||||
|
|
@ -545,42 +556,43 @@ app.on('ready', function() {
|
|||
(기본값: `desktop`)
|
||||
* `desktop`
|
||||
* `mobile`
|
||||
* `screenSize` Object - 에뮬레이트 화면의 크기를 지정합니다 (screenPosition == mobile)
|
||||
* `screenSize` Object - 에뮬레이트 화면의 크기를 지정합니다 (screenPosition ==
|
||||
mobile)
|
||||
* `width` Integer - 에뮬레이트 화면의 너비를 지정합니다
|
||||
* `height` Integer - 에뮬레이트 화면의 높이를 지정합니다
|
||||
* `viewPosition` Object - 화면에서 뷰의 위치
|
||||
(screenPosition == mobile) (기본값: `{x: 0, y: 0}`)
|
||||
* `viewPosition` Object - 화면에서 뷰의 위치 (screenPosition == mobile) (기본값:
|
||||
`{x: 0, y: 0}`)
|
||||
* `x` Integer - 좌상단 모서리로부터의 x 축의 오프셋
|
||||
* `y` Integer - 좌상단 모서리로부터의 y 축의 오프셋
|
||||
* `deviceScaleFactor` Integer - 디바이스의 스케일 팩터(scale factor)를 지정합니다.
|
||||
(0일 경우 기본 디바이스 스케일 팩터를 기본으로 사용합니다) (기본값: `0`)
|
||||
* `viewSize` Object - 에뮬레이트 된 뷰의 크기를 지정합니다 (빈 값은 오버라이드 하지 않는 다는
|
||||
것을 의미합니다)
|
||||
(0일 경우 기본 디바이스 스케일 팩터를 기본으로 사용합니다. 기본값: `0`)
|
||||
* `viewSize` Object - 에뮬레이트 된 뷰의 크기를 지정합니다 (빈 값은 덮어쓰지 않는
|
||||
다는 것을 의미합니다)
|
||||
* `width` Integer - 에뮬레이트 된 뷰의 너비를 지정합니다
|
||||
* `height` Integer - 에뮬레이트 된 뷰의 높이를 지정합니다
|
||||
* `fitToView` Boolean - 에뮬레이트의 뷰가 사용 가능한 공간에 맞추어 스케일 다운 될지 여부를
|
||||
* `fitToView` Boolean - 에뮬레이트의 뷰가 사용 가능한 공간에 맞추어 스케일 다운될지를
|
||||
지정합니다 (기본값: `false`)
|
||||
* `offset` Object - 사용 가능한 공간에서 에뮬레이트 된 뷰의 오프셋을 지정합니다
|
||||
(fit to view 모드 외에서) (기본값: `{x: 0, y: 0}`)
|
||||
* `offset` Object - 사용 가능한 공간에서 에뮬레이트 된 뷰의 오프셋을 지정합니다 (fit
|
||||
to view 모드 외에서) (기본값: `{x: 0, y: 0}`)
|
||||
* `x` Float - 좌상단 모서리에서 x 축의 오프셋을 지정합니다
|
||||
* `y` Float - 좌상단 모서리에서 y 축의 오프셋을 지정합니다
|
||||
* `scale` Float - 사용 가능한 공간에서 에뮬레이드 된 뷰의 스케일 (fit to view 모드 외에서)
|
||||
(기본값: `1`)
|
||||
* `scale` Float - 사용 가능한 공간에서 에뮬레이드 된 뷰의 스케일 (fit to view 모드
|
||||
외에서, 기본값: `1`)
|
||||
|
||||
주어진 파라미터로 디바이스 에뮬레이션을 사용합니다.
|
||||
`parameters`로 디바이스 에뮬레이션을 사용합니다.
|
||||
|
||||
### `webContents.disableDeviceEmulation()`
|
||||
|
||||
`webContents.enableDeviceEmulation`로 사용가능해진 디바이스 에뮬레이선을 비활성화 합니다.
|
||||
`webContents.enableDeviceEmulation`로 활성화된 디바이스 에뮬레이선을 비활성화 합니다.
|
||||
|
||||
### `webContents.sendInputEvent(event)`
|
||||
|
||||
* `event` Object
|
||||
* `type` String (**required**) - 이벤트의 타입. 다음 값들을 사용할 수 있습니다: `mouseDown`,
|
||||
`mouseUp`, `mouseEnter`, `mouseLeave`, `contextMenu`, `mouseWheel`,
|
||||
`mouseMove`, `keyDown`, `keyUp`, `char`.
|
||||
* `modifiers` Array - 이벤트의 수정자(modifier)들에 대한 배열. 다음 값들을 포함 할 수
|
||||
있습니다: `shift`, `control`, `alt`, `meta`, `isKeypad`, `isAutoRepeat`,
|
||||
* `type` String (**required**) - 이벤트의 타입. 다음 값들을 사용할 수 있습니다:
|
||||
`mouseDown`, `mouseUp`, `mouseEnter`, `mouseLeave`, `contextMenu`,
|
||||
`mouseWheel`, `mouseMove`, `keyDown`, `keyUp`, `char`.
|
||||
* `modifiers` Array - 이벤트의 수정자(modifier)들에 대한 배열. 다음 값들을 포함
|
||||
할 수 있습니다: `shift`, `control`, `alt`, `meta`, `isKeypad`, `isAutoRepeat`,
|
||||
`leftButtonDown`, `middleButtonDown`, `rightButtonDown`, `capsLock`,
|
||||
`numLock`, `left`, `right`.
|
||||
|
||||
|
|
@ -588,10 +600,11 @@ Input `event`를 웹 페이지로 전송합니다.
|
|||
|
||||
키보드 이벤트들에 대해서는 `event` 객체는 다음 속성들을 사용할 수 있습니다:
|
||||
|
||||
* `keyCode` Char or String (**required**) - 키보드 이벤트로 보내지는 문자.
|
||||
단일 UTF-8 문자를 사용할 수 있고 이벤트를 발생시키는 다음 키 중 하나를 포함할 수 있습니다:
|
||||
`enter`, `backspace`, `delete`, `tab`, `escape`, `control`, `alt`, `shift`, `end`,
|
||||
`home`, `insert`, `left`, `up`, `right`, `down`, `pageUp`, `pageDown`, `printScreen`
|
||||
* `keyCode` Char or String (**required**) - 키보드 이벤트로 보내지는 문자. 단일
|
||||
UTF-8 문자를 사용할 수 있고 이벤트를 발생시키는 다음 키 중 하나를 포함할 수 있습니다:
|
||||
`enter`, `backspace`, `delete`, `tab`, `escape`, `control`, `alt`, `shift`,
|
||||
`end`, `home`, `insert`, `left`, `up`, `right`, `down`, `pageUp`, `pageDown`,
|
||||
`printScreen`
|
||||
|
||||
마우스 이벤트들에 대해서는 `event` 객체는 다음 속성들을 사용할 수 있습니다:
|
||||
|
||||
|
|
@ -619,13 +632,14 @@ Input `event`를 웹 페이지로 전송합니다.
|
|||
|
||||
* `callback` Function
|
||||
|
||||
프레젠테이션 이벤트들과 캡쳐된 프레임들에 대한 구독을 시작하면 `callback`이 프레젠테이션 이벤트가
|
||||
발생할 때 `callback(frameBuffer)`과 같은 형식으로 호출됩니다.
|
||||
캡처된 프레임과 프레젠테이션 이벤트를 구독하기 시작합니다. `callback`은
|
||||
프레젠테이션 이벤트가 발생했을 때 `callback(frameBuffer)` 형태로 호출됩니다.
|
||||
|
||||
`frameBuffer`는 raw 픽셀 데이터를 포함한 `Buffer`입니다. 대부분의 기계에서 픽셀 데이터는 32bit
|
||||
BGRA 포맷으로 효율적으로 저장됩니다. 하지만 실제 재프리젠테이션은 프로세서의 endianness에 의존성을
|
||||
가지고 있습니다(대부분의 현재 프로세스들은 little-endian입니다. big-endian 프로세서들를 가진
|
||||
기계들에서 data는 32bit ARGB format입니다).
|
||||
`frameBuffer`는 raw 픽셀 데이터를 가지고 있는 `Buffer` 객체입니다. 많은 장치에서
|
||||
32비트 BGRA 포맷을 사용하여 효율적으로 픽셀 데이터를 저장합니다. 하지만 실질적인
|
||||
데이터 저장 방식은 프로세서의 엔디안 방식에 따라서 달라집니다. (따라서 현대의 많은
|
||||
프로세서에선 little-endian 방식을 사용하므로 위의 포맷을 그대로 표현합니다. 하지만
|
||||
몇몇 프로세서는 big-endian 방식을 사용하는데, 이 경우 32비트 ARGB 포맷을 사용합니다)
|
||||
|
||||
### `webContents.endFrameSubscription()`
|
||||
|
||||
|
|
@ -639,7 +653,8 @@ BGRA 포맷으로 효율적으로 저장됩니다. 하지만 실제 재프리젠
|
|||
|
||||
이 `WebContents`에 대한 개발자 도구의 `WebContents`를 가져옵니다.
|
||||
|
||||
**Note:** 사용자가 절대로 이 객체를 저장해서는 안 됩니다. 개발자 도구가 닫혔을 때, `null`이 반환될 수 있습니다.
|
||||
**참고:** 사용자가 절대로 이 객체를 저장해서는 안 됩니다. 개발자 도구가 닫혔을 때,
|
||||
`null`이 반환될 수 있습니다.
|
||||
|
||||
### `webContents.savePage(fullPath, saveType, callback)`
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
# webFrame
|
||||
|
||||
`web-frame` 모듈은 현재 웹 페이지의 랜더링 상태를 설정 할 수 있도록 관련 유틸리티를 제공하는 모듈입니다.
|
||||
`web-frame` 모듈은 현재 웹 페이지의 랜더링 상태를 설정 할 수 있도록 관련 유틸리티를
|
||||
제공하는 모듈입니다.
|
||||
|
||||
다음 예제는 현재 페이지를 200% 줌 합니다:
|
||||
|
||||
|
|
@ -18,7 +19,8 @@ webFrame.setZoomFactor(2);
|
|||
|
||||
* `factor` Number - Zoom 값
|
||||
|
||||
지정한 값으로 페이지를 줌 합니다. 줌 값은 퍼센트를 100으로 나눈 값입니다. (예시: 300% = 3.0)
|
||||
지정한 값으로 페이지를 줌 합니다. 줌 값은 퍼센트를 100으로 나눈 값입니다.
|
||||
(예시: 300% = 3.0)
|
||||
|
||||
### `webFrame.getZoomFactor()`
|
||||
|
||||
|
|
@ -28,8 +30,9 @@ webFrame.setZoomFactor(2);
|
|||
|
||||
* `level` Number - Zoom level
|
||||
|
||||
지정한 레벨로 줌 레벨을 변경합니다. 0은 "기본 크기" 입니다.
|
||||
그리고 각각 레벨 값을 올리거나 내릴 때마다 20%씩 커지거나 작아지고 기본 크기의 50%부터 300%까지 조절 제한이 있습니다.
|
||||
지정한 레벨로 줌 레벨을 변경합니다. 0은 "기본 크기" 입니다. 그리고 각각 레벨 값을
|
||||
올리거나 내릴 때마다 20%씩 커지거나 작아지고 기본 크기의 50%부터 300%까지 조절 제한이
|
||||
있습니다.
|
||||
|
||||
### `webFrame.getZoomLevel()`
|
||||
|
||||
|
|
@ -50,7 +53,8 @@ webFrame.setZoomFactor(2);
|
|||
|
||||
Input field나 text area에 철자 검사(spell checking) 제공자를 설정합니다.
|
||||
|
||||
`provider`는 반드시 전달된 단어의 철자가 맞았는지 검사하는 `spellCheck` 메소드를 가지고 있어야 합니다.
|
||||
`provider`는 반드시 전달된 단어의 철자가 맞았는지 검사하는 `spellCheck` 메소드를
|
||||
가지고 있어야 합니다.
|
||||
|
||||
[node-spellchecker][spellchecker]를 철자 검사 제공자로 사용하는 예제입니다:
|
||||
|
||||
|
|
@ -68,7 +72,8 @@ webFrame.setSpellCheckProvider("en-US", true, {
|
|||
|
||||
지정한 `scheme`을 보안 스킴으로 등록합니다.
|
||||
|
||||
보안 스킴은 혼합된 컨텐츠 경고를 발생시키지 않습니다. 예를 들어 `https` 와 `data`는 네트워크 공격자로부터 손상될 가능성이 없기 때문에 보안 스킴이라고 할 수 있습니다.
|
||||
보안 스킴은 혼합된 컨텐츠 경고를 발생시키지 않습니다. 예를 들어 `https` 와 `data`는
|
||||
네트워크 공격자로부터 손상될 가능성이 없기 때문에 보안 스킴이라고 할 수 있습니다.
|
||||
|
||||
### `webFrame.registerURLSchemeAsBypassingCSP(scheme)`
|
||||
|
||||
|
|
@ -77,9 +82,9 @@ webFrame.setSpellCheckProvider("en-US", true, {
|
|||
현재 페이지 컨텐츠의 보안 정책에 상관없이 `scheme`로부터 리소스가 로드됩니다.
|
||||
|
||||
### `webFrame.registerURLSchemeAsPrivileged(scheme)`
|
||||
|
||||
|
||||
* `scheme` String
|
||||
|
||||
|
||||
보안 `scheme`를 지정합니다. 리소스와 ServiceWorker 설정에 대해 보안 정책을 우회합니다.
|
||||
|
||||
[spellchecker]: https://github.com/atom/node-spellchecker
|
||||
|
|
|
|||
|
|
@ -1,24 +1,29 @@
|
|||
# `<webview>` 태그
|
||||
|
||||
`guest` 컨텐츠(웹 페이지)를 Electron 앱 페이지에 삽입하기 위해 `webview` 태그를 사용할 수 있습니다.
|
||||
게스트 컨텐츠는 `webview` 컨테이너에 담겨 대상 페이지에 삽입되고 해당 페이지에선 게스트 컨텐츠의 배치 및 렌더링 과정을 조작할 수 있습니다.
|
||||
`guest` 컨텐츠(웹 페이지)를 Electron 앱 페이지에 삽입하기 위해 `webview` 태그를
|
||||
사용할 수 있습니다. 게스트 컨텐츠는 `webview` 컨테이너에 담겨 대상 페이지에 삽입되고
|
||||
해당 페이지에선 게스트 컨텐츠의 배치 및 렌더링 과정을 조작할 수 있습니다.
|
||||
|
||||
`iframe`과는 달리 `webview`는 어플리케이션과 분리된 프로세스에서 작동합니다.
|
||||
이는 웹 페이지와 같은 권한을 가지지 않고 앱과 임베디드(게스트) 컨텐츠간의 모든 상호작용이 비동기로 작동한다는 것을 의미합니다.
|
||||
따라서 임베디드 컨텐츠로부터 어플리케이션을 안전하게 유지할 수 있습니다.
|
||||
이는 웹 페이지와 같은 권한을 가지지 않고 앱과 임베디드(게스트) 컨텐츠간의 모든
|
||||
상호작용이 비동기로 작동한다는 것을 의미합니다. 따라서 임베디드 컨텐츠로부터
|
||||
어플리케이션을 안전하게 유지할 수 있습니다.
|
||||
|
||||
## 예제
|
||||
|
||||
웹 페이지를 어플리케이션에 삽입하려면 `webview` 태그를 사용해 원하는 타겟 페이지에 추가하면 됩니다. (게스트 컨텐츠가 앱 페이지에 추가 됩니다)
|
||||
간단한 예로 `webview` 태그의 `src` 속성에 페이지를 지정하고 css 스타일을 이용해서 컨테이너의 외관을 설정할 수 있습니다:
|
||||
웹 페이지를 어플리케이션에 삽입하려면 `webview` 태그를 사용해 원하는 타겟 페이지에
|
||||
추가하면 됩니다. (게스트 컨텐츠가 앱 페이지에 추가 됩니다) 간단한 예로 `webview`
|
||||
태그의 `src` 속성에 페이지를 지정하고 css 스타일을 이용해서 컨테이너의 외관을 설정할
|
||||
수 있습니다:
|
||||
|
||||
```html
|
||||
<webview id="foo" src="https://www.github.com/" style="display:inline-block; width:640px; height:480px"></webview>
|
||||
```
|
||||
|
||||
게스트 컨텐츠를 조작하기 위해 자바스크립트로 `webview` 태그의 이벤트를 리스닝 하여 응답을 받을 수 있습니다.
|
||||
다음 예제를 참고하세요: 첫번째 리스너는 페이지 로딩 시작시의 이벤트를 확인하고 두번째 리스너는 페이지의 로딩이 끝난시점을 확인합니다.
|
||||
그리고 페이지를 로드하는 동안 "loading..." 메시지를 표시합니다.
|
||||
게스트 컨텐츠를 조작하기 위해 자바스크립트로 `webview` 태그의 이벤트를 리스닝 하여
|
||||
응답을 받을 수 있습니다. 다음 예제를 참고하세요: 첫번째 리스너는 페이지 로딩 시작시의
|
||||
이벤트를 확인하고 두번째 리스너는 페이지의 로딩이 끝난시점을 확인합니다. 그리고
|
||||
페이지를 로드하는 동안 "loading..." 메시지를 표시합니다.
|
||||
|
||||
```html
|
||||
<script>
|
||||
|
|
@ -48,7 +53,8 @@
|
|||
<webview src="https://www.github.com/"></webview>
|
||||
```
|
||||
|
||||
지정한 URL을 페이지 소스로 사용합니다. 이 속성을 지정할 경우 `webview`의 최상위 페이지가 됩니다.
|
||||
지정한 URL을 페이지 소스로 사용합니다. 이 속성을 지정할 경우 `webview`의 최상위
|
||||
페이지가 됩니다.
|
||||
|
||||
`src`에 같은 페이지를 지정하면 페이지를 새로고침합니다.
|
||||
|
||||
|
|
@ -60,9 +66,10 @@
|
|||
<webview src="https://www.github.com/" autosize="on" minwidth="576" minheight="432"></webview>
|
||||
```
|
||||
|
||||
"on" 으로 지정하면 `webview` 컨테이너는 `minwidth`, `minheight`, `maxwidth`, `maxheight`에 맞춰서 자동으로 크기를 조절합니다.
|
||||
이 속성들은 `autosize`가 활성화되어있지 않는 한 프레임에 영향을 주지 않습니다.
|
||||
`autosize`가 활성화 되어있으면 `webview` 컨테이너의 크기는 각각의 지정한 최대, 최소값에 따라 조절됩니다.
|
||||
"on" 으로 지정하면 `webview` 컨테이너는 `minwidth`, `minheight`, `maxwidth`,
|
||||
`maxheight`에 맞춰서 자동으로 크기를 조절합니다. 이 속성들은 `autosize`가
|
||||
활성화되어있지 않는 한 프레임에 영향을 주지 않습니다. `autosize`가 활성화 되어있으면
|
||||
`webview` 컨테이너의 크기는 각각의 지정한 최대, 최소값에 따라 조절됩니다.
|
||||
|
||||
### `nodeintegration`
|
||||
|
||||
|
|
@ -70,8 +77,8 @@
|
|||
<webview src="http://www.google.com/" nodeintegration></webview>
|
||||
```
|
||||
|
||||
"on"으로 지정하면 `webview` 페이지 내에서 `require`와 `process 객체`같은 node.js API를 사용할 수 있습니다.
|
||||
이를 지정하면 내부에서 로우레벨 리소스에 접근할 수 있습니다.
|
||||
"on"으로 지정하면 `webview` 페이지 내에서 `require`와 `process 객체`같은 node.js
|
||||
API를 사용할 수 있습니다. 이를 지정하면 내부에서 로우레벨 리소스에 접근할 수 있습니다.
|
||||
|
||||
### `plugins`
|
||||
|
||||
|
|
@ -87,9 +94,9 @@
|
|||
<webview src="https://www.github.com/" preload="./test.js"></webview>
|
||||
```
|
||||
|
||||
페이지가 로드되기 전에 실행할 스크립트를 지정합니다.
|
||||
스크립트 URL은 `file:` 또는 `asar:` 프로토콜 중 하나를 반드시 사용해야 합니다.
|
||||
왜냐하면 페이지 내에서 `require`를 사용하여 스크립트를 로드하기 때문입니다.
|
||||
페이지가 로드되기 전에 실행할 스크립트를 지정합니다. 스크립트 URL은 `file:` 또는
|
||||
`asar:` 프로토콜 중 하나를 반드시 사용해야 합니다. 왜냐하면 페이지 내에서 `require`를
|
||||
사용하여 스크립트를 로드하기 때문입니다.
|
||||
|
||||
페이지가 nodeintegration을 활성화 하지 않아도 지정한 스크립트는 정상적으로 작동합니다.
|
||||
하지만 스크립트 내에서 사용할 수 있는 global 객체는 스크립트 작동이 끝나면 삭제됩니다.
|
||||
|
|
@ -108,7 +115,8 @@
|
|||
<webview src="https://www.github.com/" useragent="Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; AS; rv:11.0) like Gecko"></webview>
|
||||
```
|
||||
|
||||
페이지의 `User-Agent`를 설정합니다. 페이지가 로드된 후엔 `setUserAgent` 메소드를 사용해서 변경할 수 있습니다.
|
||||
페이지의 `User-Agent`를 설정합니다. 페이지가 로드된 후엔 `setUserAgent` 메소드를
|
||||
사용해서 변경할 수 있습니다.
|
||||
|
||||
### `disablewebsecurity`
|
||||
|
||||
|
|
@ -126,14 +134,14 @@
|
|||
```
|
||||
|
||||
페이지에서 사용하는 세션을 설정합니다.
|
||||
만약 `partition` 속성이 `persist:` 접두사를 시작하면 같은 `partition` 속성을 가진 앱 내 모든 페이지가 공유하는 영구 세션을 사용합니다.
|
||||
`persist:` 접두사가 없을 경우 페이지는 인 메모리 세션을 사용합니다.
|
||||
동일한 `partition`을 지정하여 다중 페이지에서 동일한 세션을 공유할 수 있도록 할 수 있습니다.
|
||||
만약 `partition`이 지정되지 않으면 앱의 기본 세션을 사용합니다.
|
||||
만약 `partition` 속성이 `persist:` 접두사를 시작하면 같은 `partition` 속성을 가진
|
||||
앱 내 모든 페이지가 공유하는 영구 세션을 사용합니다. `persist:` 접두사가 없을 경우
|
||||
페이지는 인 메모리 세션을 사용합니다. 동일한 `partition`을 지정하여 다중 페이지에서
|
||||
동일한 세션을 공유할 수 있도록 할 수 있습니다. 만약 `partition`이 지정되지 않으면 앱의
|
||||
기본 세션을 사용합니다.
|
||||
|
||||
이 값은 첫 탐색 이전에만 지정할 수 있습니다.
|
||||
즉. 작동중인 랜더러 프로세스의 세션은 변경할 수 없습니다.
|
||||
이후 이 값을 바꾸려고 시도하면 DOM 예외를 발생시킵니다.
|
||||
이 값은 첫 탐색 이전에만 지정할 수 있습니다. 즉. 작동중인 랜더러 프로세스의 세션은
|
||||
변경할 수 없습니다. 이후 이 값을 바꾸려고 시도하면 DOM 예외를 발생시킵니다.
|
||||
|
||||
### `allowpopups`
|
||||
|
||||
|
|
@ -250,9 +258,11 @@ webview.addEventListener("dom-ready", function() {
|
|||
페이지에서 자바스크립트 `code`를 실행합니다.
|
||||
|
||||
만약 `userGesture`가 `true`로 설정되어 있으면 페이지에 유저 제스쳐 컨텍스트를 만듭니다.
|
||||
이 옵션을 활성화 시키면 `requestFullScreen`와 같은 HTML API에서 유저의 승인을 무시하고 개발자가 API를 바로 사용할 수 있도록 허용합니다.
|
||||
이 옵션을 활성화 시키면 `requestFullScreen`와 같은 HTML API에서 유저의 승인을
|
||||
무시하고 개발자가 API를 바로 사용할 수 있도록 허용합니다.
|
||||
|
||||
역주: 기본적으로 브라우저에선 전체화면, 웹캠, 파일 열기등의 API를 사용하려면 유저의 승인(이벤트)이 필요합니다.
|
||||
역주: 기본적으로 브라우저에선 전체화면, 웹캠, 파일 열기등의 API를 사용하려면 유저의
|
||||
승인(이벤트)이 필요합니다.
|
||||
|
||||
### `<webview>.openDevTools()`
|
||||
|
||||
|
|
@ -331,15 +341,17 @@ Webview 페이지를 인쇄합니다. `webContents.print([options])` 메서드
|
|||
|
||||
### `<webview>.printToPDF(options, callback)`
|
||||
|
||||
Webview 페이지를 PDF 형식으로 인쇄합니다. `webContents.printToPDF(options, callback)` 메서드와 같습니다.
|
||||
Webview 페이지를 PDF 형식으로 인쇄합니다.
|
||||
`webContents.printToPDF(options, callback)` 메서드와 같습니다.
|
||||
|
||||
### `<webview>.send(channel[, arg1][, arg2][, ...])`
|
||||
|
||||
* `channel` String
|
||||
* `args` (optional)
|
||||
|
||||
`channel`을 통해 랜더러 프로세스로 비동기 메시지를 보냅니다. 또한 `args`를 지정하여 임의의 인자를 보낼 수도 있습니다.
|
||||
랜더러 프로세스는 `ipcRenderer` 모듈의 `channel` 이벤트로 이 메시지를 받아 처리할 수 있습니다.
|
||||
`channel`을 통해 랜더러 프로세스로 비동기 메시지를 보냅니다. 또한 `args`를 지정하여
|
||||
임의의 인자를 보낼 수도 있습니다. 랜더러 프로세스는 `ipcRenderer` 모듈의 `channel`
|
||||
이벤트로 이 메시지를 받아 처리할 수 있습니다.
|
||||
|
||||
예제는 [webContents.send](web-contents.md#webcontentssendchannel-args)를 참고하세요.
|
||||
|
||||
|
|
@ -349,7 +361,8 @@ Webview 페이지를 PDF 형식으로 인쇄합니다. `webContents.printToPDF(o
|
|||
|
||||
페이지에 input `event`를 보냅니다.
|
||||
|
||||
`event` 객체에 대해 자세히 알아보려면 [webContents.sendInputEvent](web-contents.md##webcontentssendinputeventevent)를 참고하세요.
|
||||
`event` 객체에 대해 자세히 알아보려면 [webContents.sendInputEvent](web-contents.md##webcontentssendinputeventevent)를
|
||||
참고하세요.
|
||||
|
||||
## DOM 이벤트
|
||||
|
||||
|
|
@ -368,7 +381,8 @@ Returns:
|
|||
|
||||
### Event: 'did-finish-load'
|
||||
|
||||
탐색이 끝나면 발생하는 이벤트입니다. 브라우저 탭의 스피너가 멈추고 `onload` 이벤트가 발생할 때를 생각하면 됩니다.
|
||||
탐색이 끝나면 발생하는 이벤트입니다. 브라우저 탭의 스피너가 멈추고 `onload` 이벤트가
|
||||
발생할 때를 생각하면 됩니다.
|
||||
|
||||
### Event: 'did-fail-load'
|
||||
|
||||
|
|
@ -378,7 +392,8 @@ Returns:
|
|||
* `errorDescription` String
|
||||
* `validatedURL` String
|
||||
|
||||
`did-finish-load`와 비슷합니다. 하지만 이 이벤트는 `window.stop()`과 같은 무언가로 인해 로드에 실패했을 때 발생하는 이벤트입니다.
|
||||
`did-finish-load`와 비슷합니다. 하지만 이 이벤트는 `window.stop()`과 같은 무언가로
|
||||
인해 로드에 실패했을 때 발생하는 이벤트입니다.
|
||||
|
||||
### Event: 'did-frame-finish-load'
|
||||
|
||||
|
|
@ -390,7 +405,8 @@ Returns:
|
|||
|
||||
### Event: 'did-start-loading'
|
||||
|
||||
브라우저 탭의 스피너가 돌기 시작할 때 처럼 페이지의 로드가 시작될 때 발생하는 이벤트입니다.
|
||||
브라우저 탭의 스피너가 돌기 시작할 때 처럼 페이지의 로드가 시작될 때 발생하는
|
||||
이벤트입니다.
|
||||
|
||||
### Event: 'did-stop-loading'
|
||||
|
||||
|
|
@ -432,7 +448,8 @@ Returns:
|
|||
* `title` String
|
||||
* `explicitSet` Boolean
|
||||
|
||||
탐색하는 동안에 페이지의 제목이 설정되면 발생하는 이벤트입니다. `explicitSet`는 파일 URL에서 종합(synthesised)된 제목인 경우 false로 표시됩니다.
|
||||
탐색하는 동안에 페이지의 제목이 설정되면 발생하는 이벤트입니다. `explicitSet`는 파일
|
||||
URL에서 종합(synthesised)된 제목인 경우 false로 표시됩니다.
|
||||
|
||||
### Event: 'page-favicon-updated'
|
||||
|
||||
|
|
@ -461,7 +478,8 @@ Returns:
|
|||
|
||||
`console.log` API에 의해 로깅될 때 발생하는 이벤트입니다.
|
||||
|
||||
다음 예제는 모든 로그 메시지를 로그 레벨이나 다른 속성에 관련 없이 호스트 페이지의 콘솔에 다시 로깅하는 예제입니다.
|
||||
다음 예제는 모든 로그 메시지를 로그 레벨이나 다른 속성에 관련 없이 호스트 페이지의
|
||||
콘솔에 다시 로깅하는 예제입니다.
|
||||
|
||||
```javascript
|
||||
webview.addEventListener('console-message', function(e) {
|
||||
|
|
@ -475,7 +493,8 @@ Returns:
|
|||
|
||||
* `url` String
|
||||
* `frameName` String
|
||||
* `disposition` String - `default`, `foreground-tab`, `background-tab`, `new-window`, `other`를 사용할 수 있습니다.
|
||||
* `disposition` String - `default`, `foreground-tab`, `background-tab`,
|
||||
`new-window`, `other`를 사용할 수 있습니다.
|
||||
* `options` Object - 새로운 `BrowserWindow`를 만들 때 사용되어야 하는 옵션.
|
||||
|
||||
페이지가 새로운 브라우저 창을 생성할 때 발생하는 이벤트입니다.
|
||||
|
|
@ -492,7 +511,8 @@ webview.addEventListener('new-window', function(e) {
|
|||
|
||||
페이지가 자체적으로 닫힐 때 발생하는 이벤트입니다.
|
||||
|
||||
다음 예제 코드는 페이지가 자체적으로 닫힐 때 `webview`를 `about:blank` 페이지로 이동시키는 예제입니다.
|
||||
다음 예제 코드는 페이지가 자체적으로 닫힐 때 `webview`를 `about:blank` 페이지로
|
||||
이동시키는 예제입니다.
|
||||
|
||||
```javascript
|
||||
webview.addEventListener('close', function() {
|
||||
|
|
@ -509,7 +529,8 @@ Returns:
|
|||
|
||||
호스트 페이지에서 비동기 IPC 메시지를 보낼 때 발생하는 이벤트입니다.
|
||||
|
||||
`sendToHost` 메소드와 `ipc-message` 이벤트로 호스트 페이지와 쉽게 통신을 할 수 있습니다:
|
||||
`sendToHost` 메소드와 `ipc-message` 이벤트로 호스트 페이지와 쉽게 통신을 할 수
|
||||
있습니다:
|
||||
|
||||
```javascript
|
||||
// In embedder page.
|
||||
|
|
|
|||
|
|
@ -1,12 +1,15 @@
|
|||
# `window.open` 함수
|
||||
|
||||
`window.open` 함수가 호출되면 새 창을 생성하고 `url` 페이지를 불러옵니다.
|
||||
이 창은 지정한 `url`을 로드하여 만들어진 `BrowserWindow`의 새 인스턴스이며 본래 창 객체 대신 페이지의 컨트롤이 제한된 프록시 객체를 반환합니다.
|
||||
`window.open` 함수가 호출되면 새 창을 생성하고 `url` 페이지를 불러옵니다. 이 창은
|
||||
지정한 `url`을 로드하여 만들어진 `BrowserWindow`의 새 인스턴스이며 본래 창 객체 대신
|
||||
페이지의 컨트롤이 제한된 프록시 객체를 반환합니다.
|
||||
|
||||
프록시 객체는 브라우저의 웹 페이지 창과 호환될 수 있도록 일부 제한된 표준 기능만 가지고 있습니다.
|
||||
창의 모든 컨트롤 권한을 가지려면 `BrowserWindow`를 직접 생성해서 사용해야 합니다.
|
||||
프록시 객체는 브라우저의 웹 페이지 창과 호환될 수 있도록 일부 제한된 표준 기능만 가지고
|
||||
있습니다. 창의 모든 컨트롤 권한을 가지려면 `BrowserWindow`를 직접 생성해서 사용해야
|
||||
합니다.
|
||||
|
||||
새롭게 생성된 `BrowserWindow`는 기본적으로 부모 창의 옵션을 상속합니다. 이 옵션을 변경하려면 새 창을 열 때 `features` 인자를 지정해야 합니다.
|
||||
새롭게 생성된 `BrowserWindow`는 기본적으로 부모 창의 옵션을 상속합니다. 이 옵션을
|
||||
변경하려면 새 창을 열 때 `features` 인자를 지정해야 합니다.
|
||||
|
||||
### `window.open(url[, frameName][, features])`
|
||||
|
||||
|
|
@ -16,14 +19,16 @@
|
|||
|
||||
`BrowserWindowProxy` 클래스의 객체를 반환하는 새로운 윈도우를 생성합니다.
|
||||
|
||||
`features` 문자열은 표준 브라우저의 포맷을 따르고 있지만, 각 기능은 `BrowserWindow`의 옵션이어야 합니다.
|
||||
`features` 문자열은 표준 브라우저의 포맷을 따르고 있지만, 각 기능은 `BrowserWindow`의
|
||||
옵션이어야 합니다.
|
||||
|
||||
### `window.opener.postMessage(message, targetOrigin)`
|
||||
|
||||
* `message` String
|
||||
* `targetOrigin` String
|
||||
|
||||
부모 윈도우에 메시지를 보냅니다. origin을 특정할 수 있으며 `*`를 지정하면 따로 origin 설정을 사용하지 않습니다.
|
||||
부모 윈도우에 메시지를 보냅니다. origin을 특정할 수 있으며 `*`를 지정하면 따로 origin
|
||||
설정을 사용하지 않습니다.
|
||||
|
||||
## Class: BrowserWindowProxy
|
||||
|
||||
|
|
@ -35,8 +40,6 @@
|
|||
|
||||
자식 윈도우를 강제로 닫습니다. unload 이벤트가 발생하지 않습니다.
|
||||
|
||||
Forcefully closes the child window without calling its unload event.
|
||||
|
||||
### `BrowserWindowProxy.closed`
|
||||
|
||||
자식 윈도우가 닫히면 true로 설정됩니다.
|
||||
|
|
@ -56,6 +59,8 @@ Forcefully closes the child window without calling its unload event.
|
|||
* `message` String
|
||||
* `targetOrigin` String
|
||||
|
||||
자식 윈도우에 메시지를 보냅니다. origin을 특정할 수 있으며 `*`를 지정하면 따로 origin 설정을 사용하지 않습니다.
|
||||
자식 윈도우에 메시지를 보냅니다. origin을 특정할 수 있으며 `*`를 지정하면 따로 origin
|
||||
설정을 사용하지 않습니다.
|
||||
|
||||
참고로 자식 윈도우의 `window.opener` 객체에는 다른 속성 없이 이 메서드 한 개만 구현되어 있습니다.
|
||||
참고로 자식 윈도우의 `window.opener` 객체에는 다른 속성 없이 이 메서드 한 개만
|
||||
구현되어 있습니다.
|
||||
|
|
|
|||
|
|
@ -2,17 +2,17 @@
|
|||
|
||||
__참고: Electron은 Atom Shell의 새로운 이름입니다.__
|
||||
|
||||
NW.js 처럼 Electron은 JavaScript와 HTML 그리고 Node 통합 환경을 제공함으로써
|
||||
웹 페이지에서 저 수준 시스템에 접근할 수 있도록 하여 웹 기반 데스크탑 어플리케이션을
|
||||
NW.js 처럼 Electron은 JavaScript와 HTML 그리고 Node 통합 환경을 제공함으로써 웹
|
||||
페이지에서 저 수준 시스템에 접근할 수 있도록 하여 웹 기반 데스크탑 어플리케이션을
|
||||
작성할 수 있도록 하는 프레임워크 입니다.
|
||||
|
||||
하지만 Electron과 NW.js는 근본적인 개발흐름의 차이도 있습니다:
|
||||
|
||||
__1. 어플리케이션의 엔트리 포인트__
|
||||
|
||||
NW.js에선 어플리케이션의 엔트리 포인트로 웹 페이지를 사용합니다.
|
||||
`package.json`내의 main 필드에 메인 웹 페이지(index.html) URL을 지정하면
|
||||
어플리케이션의 메인 윈도우로 열리게 됩니다.
|
||||
NW.js에선 어플리케이션의 엔트리 포인트로 웹 페이지를 사용합니다. `package.json`내의
|
||||
main 필드에 메인 웹 페이지(index.html) URL을 지정하면 어플리케이션의 메인 윈도우로
|
||||
열리게 됩니다.
|
||||
|
||||
Electron에선 JavaScript를 엔트리 포인트로 사용합니다. URL을 직접 제공하는 대신 API를
|
||||
사용하여 직접 브라우저 창과 HTML 파일을 로드할 수 있습니다. 또한 윈도우의 종료시기를
|
||||
|
|
@ -31,11 +31,10 @@ Chromium Content 모듈과 종속성 라이브러리들을 포함합니다. 유
|
|||
|
||||
__3. Node 통합__
|
||||
|
||||
NW.js는 웹 페이지에서 require를 사용할 수 있도록 Chromium을 패치했습니다.
|
||||
한편 Electron은 Chromium의 해킹을 방지하기 위해 libuv loop와 각 플랫폼의
|
||||
메시지 루프에 통합하는 다른 방법을 채택하였습니다.
|
||||
[`node_bindings`][node-bindings]의 코드를 보면 이 부분이 어떻게 구현됬는지를
|
||||
알 수 있습니다.
|
||||
NW.js는 웹 페이지에서 require를 사용할 수 있도록 Chromium을 패치했습니다. 한편
|
||||
Electron은 Chromium의 해킹을 방지하기 위해 libuv loop와 각 플랫폼의 메시지 루프에
|
||||
통합하는 다른 방법을 채택하였습니다. [`node_bindings`][node-bindings]의 코드를 보면
|
||||
이 부분이 어떻게 구현됬는지 알 수 있습니다.
|
||||
|
||||
__4. 다중 컨텍스트__
|
||||
|
||||
|
|
|
|||
|
|
@ -38,8 +38,8 @@ $ sudo yum install clang dbus-devel gtk2-devel libnotify-devel libgnome-keyring-
|
|||
|
||||
## 가상머신을 사용하여 빌드 하는 경우
|
||||
|
||||
만약 Electron을 가상머신으로 빌드 할 계획이라면 해당 가상머신의 스토리지를
|
||||
최소 25GB 이상을 확보해 놓아야 합니다.
|
||||
만약 Electron을 가상머신으로 빌드 할 계획이라면 해당 가상머신의 스토리지를 최소 25GB
|
||||
이상 확보해 놓아야 합니다.
|
||||
|
||||
## 코드 가져오기
|
||||
|
||||
|
|
@ -49,11 +49,10 @@ $ git clone https://github.com/atom/electron.git
|
|||
|
||||
## 부트 스트랩
|
||||
|
||||
부트스트랩 스크립트는 필수적인 빌드 종속성 라이브러리들을 모두 다운로드하고
|
||||
프로젝트 파일을 생성합니다. 스크립트가 정상적으로 작동하기 위해선
|
||||
Python 2.7.x 버전이 필요합니다. 아마 다운로드 작업이 상당히 많은 시간을
|
||||
소요할 것입니다. 참고로 Electron은 빌드 툴체인으로 `ninja`를 사용하므로
|
||||
`Makefile`은 생성되지 않습니다.
|
||||
부트스트랩 스크립트는 필수적인 빌드 종속성 라이브러리들을 모두 다운로드하고 프로젝트
|
||||
파일을 생성합니다. 스크립트가 정상적으로 작동하기 위해선 Python 2.7.x 버전이
|
||||
필요합니다. 아마 다운로드 작업이 상당히 많은 시간을 소요할 것입니다. 참고로 Electron은
|
||||
`ninja`를 빌드 툴체인으로 사용하므로 `Makefile`은 생성되지 않습니다.
|
||||
|
||||
```bash
|
||||
$ cd electron
|
||||
|
|
@ -84,18 +83,18 @@ $ ./script/bootstrap.py -v --target_arch=arm
|
|||
$ ./script/build.py
|
||||
```
|
||||
|
||||
이 스크립트는 `out/R` 디렉터리에 크기가 매우 큰 Electron 실행 파일을 배치합니다.
|
||||
파일 크기는 1.3GB를 초과합니다. 이러한 문제가 발생하는 이유는 Release 타겟 바이너리가
|
||||
디버그 심볼을 포함하기 때문입니다. 파일 크기를 줄이려면
|
||||
`create-dist.py` 스크립트를 실행하세요:
|
||||
이 스크립트는 `out/R` 디렉터리에 크기가 매우 큰 Electron 실행 파일을 배치합니다. 파일
|
||||
크기는 1.3GB를 초과합니다. 이러한 문제가 발생하는 이유는 Release 타겟 바이너리가
|
||||
디버그 심볼을 포함하기 때문입니다. 파일 크기를 줄이려면 `create-dist.py` 스크립트를
|
||||
실행하세요:
|
||||
|
||||
```bash
|
||||
$ ./script/create-dist.py
|
||||
```
|
||||
|
||||
이 스크립트는 매우 작은 배포판을 `dist` 디렉터리에 생성합니다.
|
||||
create-dist.py 스크립트를 실행한 이후부턴 1.3GB를 초과하는 공간을 차지하는
|
||||
`out/R` 폴더의 바이너리는 삭제해도 됩니다.
|
||||
이 스크립트는 매우 작은 배포판을 `dist` 디렉터리에 생성합니다. create-dist.py
|
||||
스크립트를 실행한 이후부턴 1.3GB에 육박하는 공간을 차지하는 `out/R` 폴더의 바이너리는
|
||||
삭제해도 됩니다.
|
||||
|
||||
또는 `Debug` 타겟만 빌드 할 수 있습니다:
|
||||
|
||||
|
|
@ -119,8 +118,8 @@ $ ./script/clean.py
|
|||
|
||||
## libtinfo.so.5 동적 링크 라이브러리를 로드하는 도중 에러가 발생할 경우
|
||||
|
||||
미리 빌드된 `clang`은 `libtinfo.so.5`로 링크를 시도합니다.
|
||||
따라서 플랫폼에 따라 적당한 `libncurses` symlink를 추가하세요:
|
||||
미리 빌드된 `clang`은 `libtinfo.so.5`로 링크를 시도합니다. 따라서 플랫폼에 따라
|
||||
적당한 `libncurses` symlink를 추가하세요:
|
||||
|
||||
```bash
|
||||
$ sudo ln -s /usr/lib/libncurses.so.5 /usr/lib/libtinfo.so.5
|
||||
|
|
|
|||
|
|
@ -20,9 +20,9 @@ $ git clone https://github.com/atom/electron.git
|
|||
|
||||
## 부트 스트랩
|
||||
|
||||
부트스트랩 스크립트는 필수적인 빌드 종속성 라이브러리들을 모두 다운로드하고
|
||||
프로젝트 파일을 생성합니다. 참고로 Electron은 빌드 툴체인으로 `ninja`를 사용하므로
|
||||
Xcode 프로젝트는 생성되지 않습니다.
|
||||
부트스트랩 스크립트는 필수적인 빌드 종속성 라이브러리들을 모두 다운로드하고 프로젝트
|
||||
파일을 생성합니다. 참고로 Electron은 `ninja`를 빌드 툴체인으로 사용하므로 Xcode
|
||||
프로젝트는 생성되지 않습니다.
|
||||
|
||||
```bash
|
||||
$ cd electron
|
||||
|
|
@ -47,8 +47,8 @@ $ ./script/build.py -c D
|
|||
|
||||
## 32비트 지원
|
||||
|
||||
Electron은 현재 OS X 64비트만 지원하고 있습니다. 그리고 앞으로도 OS X 32비트는
|
||||
지원할 계획이 없습니다.
|
||||
Electron은 현재 OS X 64비트만 지원하고 있습니다. 그리고 앞으로도 OS X 32비트는 지원할
|
||||
계획이 없습니다.
|
||||
|
||||
## 테스트
|
||||
|
||||
|
|
|
|||
|
|
@ -11,18 +11,18 @@
|
|||
* [Git](http://git-scm.com)
|
||||
|
||||
현재 사용하고 있는 PC에 Windows를 설치하지 않았다면 [modern.ie](https://www.modern.ie/en-us/virtualization-tools#downloads)에서
|
||||
사용 기한이 정해져있는 무료 가상머신 버전의 Windows를 받아 Electron을
|
||||
빌드하는 방법도 있습니다.
|
||||
사용 기한이 정해져있는 무료 가상머신 버전의 Windows를 받아 Electron을 빌드하는 방법도
|
||||
있습니다.
|
||||
|
||||
Electron은 모든 빌드를 command-line 스크립트를 통해 빌드합니다. 따라서 빌드에
|
||||
Visual Studio를 사용할 수 없습니다. 하지만 여전히 Electron을 개발할 땐 아무 에디터나
|
||||
사용할 수 있습니다. 빠른 시일내에 Visual Studio를 이용한 빌드도 지원할 계획입니다.
|
||||
Electron은 모든 빌드를 command-line 스크립트를 통해 빌드합니다. 따라서 빌드에 Visual
|
||||
Studio를 사용할 수 없습니다. 하지만 여전히 Electron을 개발할 땐 어떤 에디터든 사용이
|
||||
가능합니다. 그리고 빠른 시일내에 Visual Studio를 이용한 빌드도 지원할 계획입니다.
|
||||
|
||||
**참고:** Visual Studio가 직접 빌드에 사용되지 않더라도 IDE와 같이 제공된
|
||||
빌드 툴체인이 빌드에 **반드시** 사용되므로 여전히 필요합니다.
|
||||
**참고:** Visual Studio가 직접 빌드에 사용되지 않더라도 IDE와 같이 제공된 빌드
|
||||
툴체인이 빌드에 **반드시** 사용되므로 여전히 필요합니다.
|
||||
|
||||
**참고:** Visual Studio 2015는 사용할 수 없습니다.
|
||||
MSVS **2013** 을 사용하고 있는지 확인해주세요.
|
||||
**참고:** Visual Studio 2015는 사용할 수 없습니다 MSVS **2013** 을 사용하고 있는지
|
||||
확인해주세요.
|
||||
|
||||
## 코드 가져오기
|
||||
|
||||
|
|
@ -32,9 +32,9 @@ $ git clone https://github.com/atom/electron.git
|
|||
|
||||
## 부트 스트랩
|
||||
|
||||
부트스트랩 스크립트는 필수적인 빌드 종속성 라이브러리들을 모두 다운로드하고
|
||||
프로젝트 파일을 생성합니다. 참고로 Electron은 빌드 툴체인으로 `ninja`를 사용하므로
|
||||
Visual Studio 프로젝트는 생성되지 않습니다.
|
||||
부트스트랩 스크립트는 필수적인 빌드 종속성 라이브러리들을 모두 다운로드하고 프로젝트
|
||||
파일을 생성합니다. 참고로 Electron은 `ninja`를 빌드 툴체인으로 사용하므로 Visual
|
||||
Studio 프로젝트는 생성되지 않습니다.
|
||||
|
||||
```powershell
|
||||
$ cd electron
|
||||
|
|
@ -60,8 +60,8 @@ $ python script\build.py -c D
|
|||
|
||||
## 64비트 빌드
|
||||
|
||||
64비트를 타겟으로 빌드 하려면 부트스트랩 스크립트를 실행할 때
|
||||
`--target_arch=x64` 인자를 같이 넘겨주면 됩니다:
|
||||
64비트를 타겟으로 빌드 하려면 부트스트랩 스크립트를 실행할 때 `--target_arch=x64`
|
||||
인자를 같이 넘겨주면 됩니다:
|
||||
|
||||
```powershell
|
||||
$ python script\bootstrap.py -v --target_arch=x64
|
||||
|
|
@ -83,8 +83,8 @@ $ python script\cpplint.py
|
|||
$ python script\test.py
|
||||
```
|
||||
|
||||
테스트 실행시 `runas`와 같은 네이티브 모듈을 포함하는데 이 모듈은 디버그 빌드에서
|
||||
같이 사용할 수 없습니다. 하지만 여전히 릴리즈 빌드에선 사용할 수 있습니다.
|
||||
테스트 실행시 `runas`와 같은 네이티브 모듈을 포함하는데 이 모듈은 디버그 빌드에서 같이
|
||||
사용할 수 없습니다. 하지만 여전히 릴리즈 빌드에선 사용할 수 있습니다.
|
||||
|
||||
릴리즈 빌드로 테스트를 실행하려면 다음 커맨드를 사용하면 됩니다:
|
||||
|
||||
|
|
@ -105,8 +105,8 @@ Visual Studio가 업데이트까지 완벽하게 설치된 최신버전인지
|
|||
|
||||
### Assertion failed: ((handle))->activecnt >= 0
|
||||
|
||||
Cygwin에서 빌드 할 경우 `bootstrap.py` 스크립트가 다음의 에러와 함께 빌드에
|
||||
실패할 수 있습니다:
|
||||
Cygwin에서 빌드 할 경우 `bootstrap.py` 스크립트가 다음의 에러와 함께 빌드에 실패할 수
|
||||
있습니다:
|
||||
|
||||
```
|
||||
Assertion failed: ((handle))->activecnt >= 0, file src\win\pipe.c, line 1430
|
||||
|
|
@ -123,9 +123,9 @@ Traceback (most recent call last):
|
|||
subprocess.CalledProcessError: Command '['npm.cmd', 'install']' returned non-zero exit status 3
|
||||
```
|
||||
|
||||
이 버그는 Cygwin Python과 Win32 Node를 같이 사용할 때 발생합니다.
|
||||
부트스트랩 스크립트에서 Win32 Python을 사용함으로써 이 문제를 해결할 수 있습니다.
|
||||
`C:\Python27` 디렉터리에 Python이 설치되었다는 가정하에 다음 명령을 실행하면 됩니다:
|
||||
이 버그는 Cygwin Python과 Win32 Node를 같이 사용할 때 발생합니다. 부트스트랩
|
||||
스크립트에서 Win32 Python을 사용함으로써 이 문제를 해결할 수 있습니다. `C:\Python27`
|
||||
디렉터리에 Python이 설치되었다는 가정하에 다음 명령을 실행하면 됩니다:
|
||||
|
||||
```bash
|
||||
$ /cygdrive/c/Python27/python.exe script/bootstrap.py
|
||||
|
|
|
|||
|
|
@ -9,17 +9,17 @@ Electron을 빌드 할 때 `gyp` 파일들은 다음과 같은 규칙을 따릅
|
|||
|
||||
* `atom.gyp`는 Electron의 빌드 과정 자체를 정의합니다.
|
||||
* `common.gypi`는 Node가 Chromium과 함께 빌드될 수 있도록 조정한 빌드 설정입니다.
|
||||
* `vendor/brightray/brightray.gyp`는 `brightray`의 빌드 과정을 정의하고
|
||||
Chromium 링킹에 대한 기본적인 설정을 포함합니다.
|
||||
* `vendor/brightray/brightray.gyp`는 `brightray`의 빌드 과정을 정의하고 Chromium
|
||||
링킹에 대한 기본적인 설정을 포함합니다.
|
||||
* `vendor/brightray/brightray.gypi`는 빌드에 대한 일반적인 설정이 포함되어 있습니다.
|
||||
|
||||
## 구성요소 빌드
|
||||
|
||||
Chromium은 꽤나 큰 프로젝트입니다. 이러한 이유로 인해 최종 링킹 작업은 상당한 시간이
|
||||
소요될 수 있습니다. 보통 이런 문제는 개발을 어렵게 만듭니다. 우리는 이 문제를 해결하기
|
||||
위해 Chromium의 "component build" 방식을 도입했습니다. 이는 각각의 컴포넌트를
|
||||
각각 따로 분리하여 공유 라이브러리로 빌드 합니다. 하지만 이 빌드 방식을 사용하면
|
||||
링킹 작업은 매우 빨라지지만 실행 파일 크기가 커지고 성능이 저하됩니다.
|
||||
위해 Chromium의 "component build" 방식을 도입했습니다. 이는 각각의 컴포넌트를 각각
|
||||
따로 분리하여 공유 라이브러리로 빌드 합니다. 하지만 이 빌드 방식을 사용하면 링킹 작업은
|
||||
매우 빨라지지만 실행 파일 크기가 커지고 성능이 저하됩니다.
|
||||
|
||||
Electron도 이러한 방식에 상당히 비슷한 접근을 했습니다:
|
||||
`Debug` 빌드 시 바이너리는 공유 라이브러리 버전의 Chromium 컴포넌트를 사용함으로써
|
||||
|
|
@ -33,15 +33,15 @@ Prebuilt된 모든 Chromium 바이너리들은 부트스트랩 스크립트가
|
|||
기본적으로 공유 라이브러리와 정적 라이브러리 모두 다운로드되며 최종 전체 파일 크기는
|
||||
플랫폼에 따라 800MB에서 2GB까지 차지합니다.
|
||||
|
||||
기본적으로 (`libchromiumcontent`)는 Amazon Web Service를 통해 다운로드 됩니다.
|
||||
만약 `LIBCHROMIUMCONTENT_MIRROR` 환경 변수가 설정되어 있으면 부트스트랩은 해당 링크를
|
||||
기본적으로 (`libchromiumcontent`)는 Amazon Web Service를 통해 다운로드 됩니다. 만약
|
||||
`LIBCHROMIUMCONTENT_MIRROR` 환경 변수가 설정되어 있으면 부트스트랩은 해당 링크를
|
||||
사용하여 바이너리를 다운로드 합니다. [libchromiumcontent-qiniu-mirror](https://github.com/hokein/libchromiumcontent-qiniu-mirror)는
|
||||
libchromiumcontent의 미러입니다. 만약 AWS에 접근할 수 없다면
|
||||
`export LIBCHROMIUMCONTENT_MIRROR=http://7xk3d2.dl1.z0.glb.clouddn.com/` 미러를
|
||||
통해 다운로드 할 수 있습니다.
|
||||
|
||||
만약 빠르게 Electron의 개발 또는 테스트만 하고 싶다면 `--dev` 플래그를 추가하여
|
||||
공유 라이브러리만 다운로드할 수 있습니다:
|
||||
만약 빠르게 Electron의 개발 또는 테스트만 하고 싶다면 `--dev` 플래그를 추가하여 공유
|
||||
라이브러리만 다운로드할 수 있습니다:
|
||||
|
||||
```bash
|
||||
$ ./script/bootstrap.py --dev
|
||||
|
|
@ -55,15 +55,15 @@ Electron은 `Release`와 `Debug` 빌드가 서로 다른 라이브러리 링크
|
|||
지원하지 않습니다.
|
||||
|
||||
이 문제를 해결하기 위해 Electron은 링크 설정을 제어하는 `gyp` 변수
|
||||
`libchromiumcontent_component`를 사용하고 `gyp`를 실행할 때
|
||||
단 하나의 타겟만을 생성합니다.
|
||||
`libchromiumcontent_component`를 사용하고 `gyp`를 실행할 때 단 하나의 타겟만을
|
||||
생성합니다.
|
||||
|
||||
## 타겟 이름
|
||||
|
||||
많은 프로젝트에서 타겟 이름을 `Release` 와 `Debug`를 사용하는데 반해 Electron은
|
||||
`R`과 `D`를 대신 사용합니다. 이유는 가끔 알 수 없는 이유(randomly)로
|
||||
`Release` 와 `Debug` 중 하나만 빌드 설정에 정의되어 있을때 `gyp`가 크래시를 일으키는데
|
||||
이유는 앞서 말한 바와 같이 Electron은 한번에 한개의 타겟만을 생성할 수 있기 때문입니다.
|
||||
`R`과 `D`를 대신 사용합니다. 이유는 가끔 알 수 없는 이유(randomly)로 `Release` 와
|
||||
`Debug` 중 하나만 빌드 설정에 정의되어 있을때 `gyp`가 크래시를 일으키는데 이유는 앞서
|
||||
말한 바와 같이 Electron은 한번에 한개의 타겟만을 생성할 수 있기 때문입니다.
|
||||
|
||||
이 문제는 개발자에게만 영향을 미칩니다. 만약 단순히 Electron을 rebranding 하기 위해
|
||||
빌드 하는 것이라면 이 문제에 신경 쓸 필요가 없습니다.
|
||||
|
|
|
|||
|
|
@ -4,29 +4,35 @@
|
|||
|
||||
## C++과 Python
|
||||
|
||||
C++과 Python 스크립트는 Chromium의 [코딩 스타일](http://www.chromium.org/developers/coding-style)을 따릅니다.
|
||||
파이선 스크립트 `script/cpplint.py`를 사용하여 모든 파일이 해당 코딩스타일에 맞게 코딩 되었는지 확인할 수 있습니다.
|
||||
C++과 Python 스크립트는 Chromium의
|
||||
[코딩 스타일](http://www.chromium.org/developers/coding-style)을 따릅니다. 파이선
|
||||
스크립트 `script/cpplint.py`를 사용하여 모든 파일이 해당 코딩스타일에 맞게 코딩 했는지
|
||||
확인할 수 있습니다.
|
||||
|
||||
Python 버전은 2.7을 사용합니다.
|
||||
|
||||
C++ 코드는 많은 Chromium의 추상화와 타입을 사용합니다. 따라서 Chromium 코드에 대해 잘 알고 있어야 합니다.
|
||||
이와 관련하여 시작하기 좋은 장소로 Chromium의 [Important Abstractions and Data Structures]
|
||||
(https://www.chromium.org/developers/coding-style/important-abstractions-and-data-structures) 문서가 있습니다.
|
||||
이 문서에선 몇가지 특별한 타입과 스코프 타입(스코프 밖으로 나가면 자동으로 메모리에서 할당을 해제합니다. 스마트 포인터로 보시면 됩니다)
|
||||
그리고 로깅 메커니즘 등을 언급하고 있습니다.
|
||||
C++ 코드는 많은 Chromium의 추상화와 타입을 사용합니다. 따라서 Chromium 코드에 대해 잘
|
||||
알고 있어야 합니다. 이와 관련하여 시작하기 좋은 장소로 Chromium의
|
||||
[Important Abstractions and Data Structures](https://www.chromium.org/developers/coding-style/important-abstractions-and-data-structures)
|
||||
문서가 있습니다. 이 문서에선 몇가지 특별한 타입과 스코프 타입(스코프 밖으로 나가면
|
||||
자동으로 메모리에서 할당을 해제합니다. 스마트 포인터와 같습니다) 그리고 로깅 메커니즘
|
||||
등을 언급하고 있습니다.
|
||||
|
||||
## CoffeeScript
|
||||
|
||||
CoffeeScript의 경우 GitHub의 [스타일 가이드](https://github.com/styleguide/javascript)를 기본으로 따릅니다.
|
||||
그리고 다음 규칙을 따릅니다:
|
||||
CoffeeScript의 경우 GitHub의
|
||||
[스타일 가이드](https://github.com/styleguide/javascript)를 기본으로 따릅니다.
|
||||
그리고 추가로 다음 규칙을 따릅니다:
|
||||
|
||||
* Google의 코딩 스타일에도 맞추기 위해 파일의 끝에는 **절대** 개행을 삽입해선 안됩니다.
|
||||
* 파일 이름의 공백은 `_`대신에 `-`을 사용하여야 합니다. 예를 들어 `file_name.coffee`를
|
||||
`file-name.coffee`로 고쳐야합니다. 왜냐하면 [github/atom](https://github.com/github/atom) 에서 사용되는 모듈의 이름은
|
||||
보통 `module-name`형식이기 때문입니다. 이 규칙은 '.coffee' 파일에만 적용됩니다.
|
||||
* 파일 이름의 공백은 `_`대신에 `-`을 사용하여야 합니다. 예를 들어
|
||||
`file_name.coffee`를 `file-name.coffee`로 고쳐야합니다. 왜냐하면
|
||||
[github/atom](https://github.com/github/atom)에서 사용되는 모듈의 이름은 보통
|
||||
`module-name` 형식이기 때문입니다. 이 규칙은 '.coffee' 파일에만 적용됩니다.
|
||||
|
||||
## API 이름
|
||||
|
||||
새로운 API를 만들 땐 getter, setter스타일 대신 jQuery의 one-function스타일을 사용해야 합니다. 예를 들어
|
||||
`.getText()`와 `.setText(text)`대신에 `.text([text])`형식으로 설계하면 됩니다.
|
||||
포럼에 이 문제에 대한 [논의](https://github.com/atom/electron/issues/46)가 있습니다.
|
||||
새로운 API를 만들 땐 getter, setter스타일 대신 jQuery의 one-function 스타일을
|
||||
사용해야 합니다. 예를 들어 `.getText()`와 `.setText(text)`대신에 `.text([text])`
|
||||
형식으로 설계하면 됩니다. 포럼에 이 문제에 대한 [논의](https://github.com/atom/electron/issues/46)가
|
||||
진행되고 있습니다.
|
||||
|
|
|
|||
|
|
@ -1,29 +1,36 @@
|
|||
# 디버거에서 디버그 심볼 서버 설정
|
||||
|
||||
디버그 심볼은 디버깅 세션을 더 좋게 개선해 줍니다. 디버그 심볼은 실행 파일과 동적 링크 라이브러리에서 메서드에 대한 정보를 담고 있으며 명료한 함수 호출 스텍 정보를 제공합니다.
|
||||
심볼 서버는 유저가 크기가 큰 디버깅용 파일을 필수적으로 다운로드 받지 않고도 디버거가 알맞은 심볼, 바이너리 그리고 소스를 자동적으로 로드할 수 있도록 해줍니다.
|
||||
서버 사용법은 [Microsoft의 심볼 서버](http://support.microsoft.com/kb/311503)와 비슷합니다. 이 문서를 참조하세요.
|
||||
디버그 심볼은 디버깅 세션을 더 좋게 개선해 줍니다. 디버그 심볼은 실행 파일과 동적 링크
|
||||
라이브러리에서 메서드에 대한 정보를 담고 있으며 명료한 함수 호출 스텍 정보를 제공합니다.
|
||||
심볼 서버는 유저가 크기가 큰 디버깅용 파일을 필수적으로 다운로드 받지 않고도 디버거가
|
||||
알맞은 심볼, 바이너리 그리고 소스를 자동적으로 로드할 수 있도록 해줍니다. 서버 사용법은
|
||||
[Microsoft의 심볼 서버](http://support.microsoft.com/kb/311503)와 비슷합니다.
|
||||
사용법을 알아보려면 이 문서를 참조하세요.
|
||||
|
||||
참고로 릴리즈된 Electron 빌드는 자체적으로 많은 최적화가 되어 있는 관계로 경우에 따라 디버깅이 쉽지 않을 수 있습니다.
|
||||
Inlining, tail call 등의 컴파일러 최적화에 의해 디버거가 모든 변수의 컨텐츠를 보여줄 수 없는 경우도 있고 실행 경로가 이상하게 보여질 수 있습니다.
|
||||
유일한 해결 방법은 최적화되지 않은 로컬 빌드를 하는 것입니다.
|
||||
참고로 릴리즈된 Electron 빌드는 자체적으로 많은 최적화가 되어 있는 관계로 경우에 따라
|
||||
디버깅이 쉽지 않을 수 있습니다. Inlining, tail call 등 컴파일러 최적화에 의해 디버거가
|
||||
모든 변수의 컨텐츠를 보여줄 수 없는 경우도 있고 실행 경로가 이상하게 보여지는 경우도
|
||||
있습니다. 유일한 해결 방법은 최적화되지 않은 로컬 빌드를 하는 것입니다.
|
||||
|
||||
공식적인 Electron의 심볼 서버의 URL은 http://54.249.141.255:8086/atom-shell/symbols 입니다.
|
||||
일단 이 URL에 직접적으로 접근할 수는 없습니다: 디버깅 툴에 심볼의 경로를 추가해야합니다.
|
||||
아래의 예제를 참고하면 로컬 캐시 디렉터리는 서버로부터 중복되지 않게 PDB를 가져오는데 사용됩니다.
|
||||
공식적인 Electron의 심볼 서버의 URL은
|
||||
http://54.249.141.255:8086/atom-shell/symbols 입니다. 일단 이 URL에 직접적으로
|
||||
접근할 수는 없습니다: 디버깅 툴에 심볼의 경로를 추가해야합니다. 아래의 예제를 참고하면
|
||||
로컬 캐시 디렉터리는 서버로부터 중복되지 않게 PDB를 가져오는데 사용됩니다.
|
||||
`c:\code\symbols` 캐시 디렉터리를 사용중인 OS에 맞춰 적당한 경로로 변경하세요.
|
||||
|
||||
## Windbg에서 심볼 서버 사용하기
|
||||
|
||||
Windbg 심볼 경로는 구분자와 *(별) 문자로 설정되어 있습니다.
|
||||
Electron 심볼 서버만을 사용하려면 심볼 경로의 엔트리를 추가해야 합니다 (__참고:__ `c:\code\symbols` 디렉터리 경로를 PC가 원하는 경로로 수정할 수 있습니다):
|
||||
Windbg 심볼 경로는 구분자와 `*` 문자로 설정되어 있습니다. Electron 심볼 서버만
|
||||
사용하려면 심볼 경로의 엔트리를 추가해야 합니다. (__참고:__ `c:\code\symbols`
|
||||
디렉터리 경로를 PC가 원하는 경로로 수정할 수 있습니다):
|
||||
|
||||
```
|
||||
SRV*c:\code\symbols\*http://54.249.141.255:8086/atom-shell/symbols
|
||||
```
|
||||
|
||||
Windbg 메뉴 또는 `.sympath` 커맨드를 이용하여 환경에 `_NT_SYMBOL_PATH` 문자열을 설정합니다.
|
||||
만약 Microsoft의 심볼서버로 부터 심볼을 받아오려면 다음과 같이 리스팅을 먼저 해야합니다:
|
||||
Windbg 메뉴 또는 `.sympath` 커맨드를 이용하여 환경에 `_NT_SYMBOL_PATH` 문자열을
|
||||
설정합니다. 만약 Microsoft의 심볼서버로부터 심볼을 받아오려면 다음과 같이 리스팅을
|
||||
먼저 해야합니다:
|
||||
|
||||
```
|
||||
SRV*c:\code\symbols\*http://msdl.microsoft.com/download/symbols;SRV*c:\code\symbols\*http://54.249.141.255:8086/atom-shell/symbols
|
||||
|
|
@ -36,7 +43,8 @@ SRV*c:\code\symbols\*http://msdl.microsoft.com/download/symbols;SRV*c:\code\symb
|
|||
|
||||
## 문제 해결: Symbols will not load
|
||||
|
||||
Windbg에서 다음의 커맨드를 입력하여 왜 심볼이 로드되지 않았는지에 대한 오류 내역을 출력합니다:
|
||||
Windbg에서 다음의 커맨드를 입력하여 왜 심볼이 로드되지 않았는지에 대한 오류 내역을
|
||||
출력합니다:
|
||||
|
||||
```
|
||||
> !sym noisy
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
# 소스 코드 디렉터리 구조
|
||||
|
||||
Electron의 소스 코드는 몇 개의 파트로 분리되어 있습니다. 그리고 Chromium의 분리 규칙(separation conventions)을 주로 따르고 있습니다.
|
||||
Electron의 소스 코드는 몇 개의 파트로 분리되어 있습니다. 그리고 Chromium의 분리
|
||||
규칙(separation conventions)을 주로 따르고 있습니다.
|
||||
|
||||
이미 [Chromium의 멀티 프로세스 아키텍쳐](http://dev.chromium.org/developers/design-documents/multi-process-architecture)에 익숙해져 있다면 소스 코드를 이해하기 쉬울 것입니다.
|
||||
이미 [Chromium의 멀티 프로세스 아키텍쳐](http://dev.chromium.org/developers/design-documents/multi-process-architecture)에
|
||||
익숙해져 있다면 소스 코드를 이해하기 쉬울 것입니다.
|
||||
|
||||
## 소스 코드 구조
|
||||
|
||||
|
|
@ -10,8 +12,8 @@ Electron의 소스 코드는 몇 개의 파트로 분리되어 있습니다. 그
|
|||
Electron
|
||||
├──atom - Electron의 소스코드.
|
||||
| ├── app - 시스템 엔트리 코드.
|
||||
| ├── browser - 주 윈도우를 포함한 프론트엔드, UI, 그리고 메인 프로세스에 관련된 것들.
|
||||
| | | 랜더러와 웹 페이지 관리 관련 코드.
|
||||
| ├── browser - 주 윈도우를 포함한 프론트엔드, UI, 그리고 메인 프로세스에 관련된 것과
|
||||
| | 랜더러와 웹 페이지 관리 관련 코드.
|
||||
| | ├── lib - 메인 프로세스 초기화 코드의 자바스크립트 파트.
|
||||
| | ├── ui - 크로스 플랫폼에 대응하는 UI 구현.
|
||||
| | | ├── cocoa - 코코아 특정 소스 코드.
|
||||
|
|
@ -27,8 +29,8 @@ Electron
|
|||
| | ├── lib - 랜더러 프로세스 초기화 코드의 자바스크립트 파트.
|
||||
| | └── api - 랜더러 프로세스 API들의 구현.
|
||||
| | └── lib - API 구현의 자바스크립트 파트.
|
||||
| └── common - 메인 프로세스와 랜더러 프로세스에서 공유하는 코드.
|
||||
| | 유틸리티 함수와 node 메시지 루프를 Chromium의 메시지 루프에 통합시킨 코드도 포함.
|
||||
| └── common - 메인 프로세스와 랜더러 프로세스에서 공유하는 코드. 유틸리티 함수와
|
||||
| node 메시지 루프를 Chromium의 메시지 루프에 통합시킨 코드도 포함.
|
||||
| ├── lib - 공통 자바스크립트 초기화 코드.
|
||||
| └── api - 공통 API들의 구현, Electron의 빌트인 모듈 기초 코드들.
|
||||
| └── lib - API 구현의 자바스크립트 파트.
|
||||
|
|
@ -36,16 +38,21 @@ Electron
|
|||
├── docs - 참조 문서.
|
||||
├── spec - 자동화된 테스트.
|
||||
├── atom.gyp - Electron의 빌드 규칙.
|
||||
└── common.gypi - 컴파일러 설정 및 `node` 와 `breakpad` 등의 구성요소를 위한 빌드 규칙.
|
||||
└── common.gypi - 컴파일러 설정 및 `node` 와 `breakpad` 등의 구성요소를 위한 빌드
|
||||
규칙.
|
||||
```
|
||||
|
||||
## 그외 디렉터리 구조
|
||||
|
||||
* **script** - 개발목적으로 사용되는 빌드, 패키징, 테스트, 기타등을 실행하는 스크립트.
|
||||
* **tools** - gyp 파일에서 사용되는 헬퍼 스크립트 `script`와는 다르게 유저로부터 직접 실행되지 않는 스크립트들을 이곳에 넣습니다.
|
||||
* **vendor** - 소스코드의 서드파티 종속성 코드 소스 코드 디렉터리가 겹쳐 혼란을 일으킬 수 있기 때문에
|
||||
우리는 `third_party`와 같은 Chromium 소스 코드 디렉터리에서 사용된 폴더 이름을 사용하지 않았습니다.
|
||||
* **tools** - gyp 파일에서 사용되는 헬퍼 스크립트 `script`와는 다르게 유저로부터 직접
|
||||
실행되지 않는 스크립트들을 이곳에 넣습니다.
|
||||
* **vendor** - 소스코드의 서드파티 종속성 코드 소스 코드 디렉터리가 겹쳐 혼란을 일으킬
|
||||
수 있기 때문에 `third_party`와 같은 Chromium 소스 코드 디렉터리에서 사용된 폴더
|
||||
이름은 사용하지 않았습니다.
|
||||
* **node_modules** - 빌드에 사용되는 node 서드파티 모듈.
|
||||
* **out** - `ninja`의 임시 출력 디렉터리.
|
||||
* **dist** - 배포용 바이너리를 빌드할 때 사용하는 `script/create-dist.py` 스크립트로부터 만들어지는 임시 디렉터리.
|
||||
* **external_binaries** - `gyp` 빌드를 지원하지 않아 따로 다운로드된 서드파티 프레임워크 바이너리들.
|
||||
* **dist** - 배포용 바이너리를 빌드할 때 사용하는 `script/create-dist.py`
|
||||
스크립트로부터 만들어지는 임시 디렉터리.
|
||||
* **external_binaries** - `gyp` 빌드를 지원하지 않아 따로 다운로드된 서드파티
|
||||
프레임워크 바이너리들.
|
||||
|
|
|
|||
|
|
@ -11,15 +11,15 @@ Electron 문서를 작성하는 규칙은 다음과 같습니다.
|
|||
- `h1` 제목은 페이지당 한 개만 사용할 수 있습니다.
|
||||
- 코드 블럭에서 터미널 언어 선택시 `cmd` 대신 `bash`를 사용합니다.
|
||||
(syntax highlighter를 사용하기 위해서)
|
||||
- 문서의 `h1` 제목은 반드시 현재 객체 이름과 같게 해야 합니다.
|
||||
(예시: `browser-window` → `BrowserWindow`)
|
||||
- 문서의 `h1` 제목은 반드시 현재 객체 이름과 같게 해야 합니다. (`browser-window` →
|
||||
`BrowserWindow`)
|
||||
- 하이픈(-)으로 구분되었건 다르게 구분되었건 예시와 같이 작성합니다.
|
||||
- 헤더 밑에 헤더를 바로 사용하지 않습니다. 한 줄이라도 좋으니 헤더와 헤더 사이에
|
||||
설명을 추가합니다.
|
||||
- 헤더 밑에 헤더를 바로 사용하지 않습니다. 한 줄이라도 좋으니 헤더와 헤더 사이에 설명을
|
||||
추가합니다.
|
||||
- 메서드 헤더는 `code backtick` 으로 표시합니다.
|
||||
- 이벤트 헤더는 한 '따옴표'로 표시합니다.
|
||||
- 리스트를 2 단계 이상 중첩하지 않습니다. (안타깝게도 markdown 랜더러가 이를
|
||||
지원하지 않습니다)
|
||||
- 리스트를 2 단계 이상 중첩하지 않습니다. (안타깝게도 markdown 랜더러가 이를 지원하지
|
||||
않습니다)
|
||||
- 섹션에 대한 제목을 추가합니다. Events, Class 메서드 그리고 인스턴스 메서드 등
|
||||
- 어떤 '것'의 사용 결과를 설명할 때 '될 것입니다' 형식을 사용하여 설명합니다.
|
||||
- 이벤트와 메서드를 표기할 땐 `h3` 헤더를 사용합니다.
|
||||
|
|
@ -37,8 +37,8 @@ Electron 문서를 작성하는 규칙은 다음과 같습니다.
|
|||
아직 번역되지 않은 언어를 추가하려면 (일부분 포함):
|
||||
|
||||
- 언어의 약어(예: en-US, ja-JP, ko-KR)로 서브 디렉터리를 만듭니다.
|
||||
- 서브 디렉터리에 `docs` 디렉터리를 복사합니다. 파일 이름과 디렉터리 구조는
|
||||
모두 유지합니다.
|
||||
- 서브 디렉터리에 `docs` 디렉터리를 복사합니다. 파일 이름과 디렉터리 구조는 모두
|
||||
유지합니다.
|
||||
- 문서를 번역합니다.
|
||||
- 언어 디렉터리 내의 `README.md`에 번역한 문서의 링크를 추가합니다.
|
||||
- 메인(upstream) Electron의 [README](https://github.com/atom/electron#documentation-translations)에
|
||||
|
|
@ -65,14 +65,13 @@ Electron 문서 구조를 이해하는 데 참고할 수 있는 유용한 도움
|
|||
메서드 이름은 인수가 무엇을 받는지에 따라 결정됩니다. 선택적 인수는 브라켓([, ])으로
|
||||
묶어 이 인수가 다른 인수뒤에서 선택적으로 사용될 수 있다는 것을 표시합니다.
|
||||
|
||||
메서드 이름 하단에선 각 인수에 대해 자세한 설명을 합니다.
|
||||
인수의 타입은 일반적인 타입 중 하나를 받거나:
|
||||
메서드 이름 하단에선 각 인수에 대해 자세한 설명을 합니다. 인수의 타입은:
|
||||
[`String`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String),
|
||||
[`Number`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number),
|
||||
[`Object`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object),
|
||||
[`Array`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)
|
||||
와 같은 일반적으로 쓰이는 타입 중 하나를 받거나 Electron의
|
||||
[`webContent`](api/web-content.md)같은 커스텀 타입을 받습니다.
|
||||
와 같은 일반적으로 쓰이는 타입 중 하나를 받거나 Electron의 [`webContent`](api/web-content.md)
|
||||
같은 커스텀 타입을 받습니다.
|
||||
|
||||
### Events
|
||||
|
||||
|
|
|
|||
|
|
@ -2,10 +2,9 @@
|
|||
|
||||
Electron 어플리케이션을 배포하는 방법은 간단합니다.
|
||||
|
||||
먼저 폴더 이름을 `app`로 지정한 후 Electron 리소스 디렉터리에 폴더를 통째로 집어넣기만 하면 됩니다.
|
||||
리소스 디렉터리는 OS X: `Electron.app/Contents/Resources/` Windows와 Linux: `resources/` 입니다.
|
||||
|
||||
예제:
|
||||
먼저 폴더 이름을 `app`로 지정한 후 Electron 리소스 디렉터리에 폴더를 통째로 집어넣기만
|
||||
하면 됩니다. 리소스 디렉터리는 OS X의 경우: `Electron.app/Contents/Resources/`
|
||||
Windows와 Linux의 경우: `resources/` 입니다.
|
||||
|
||||
OS X의 경우:
|
||||
|
||||
|
|
@ -16,7 +15,7 @@ electron/Electron.app/Contents/Resources/app/
|
|||
└── index.html
|
||||
```
|
||||
|
||||
Windows 와 Linux의 경우:
|
||||
Windows와 Linux의 경우:
|
||||
|
||||
```text
|
||||
electron/resources/app
|
||||
|
|
@ -25,16 +24,18 @@ electron/resources/app
|
|||
└── index.html
|
||||
```
|
||||
|
||||
그리고 `Electron.app`을 실행하면(Linux에선 `electron` Windows에선 `electron.exe`입니다) Electron 앱이 실행시킵니다.
|
||||
최종 사용자에겐 이 `electron` 폴더(Electron.app)를 배포하면 됩니다.
|
||||
그리고 `Electron.app`을 실행하면(Linux에선 `electron` Windows에선 `electron.exe`
|
||||
입니다) Electron 앱이 실행됩니다. 최종 사용자에겐 이 `electron` 폴더(Electron.app)를
|
||||
배포하면 됩니다.
|
||||
|
||||
## asar로 앱 패키징 하기
|
||||
|
||||
소스파일 전체를 복사해서 배포하는 것과는 별개로 [asar](https://github.com/atom/asar) 아카이브를 통해
|
||||
어플리케이션의 소스코드가 사용자에게 노출되는 것을 방지할 수 있습니다.
|
||||
소스파일 전체를 복사해서 배포하는 것과는 별개로 [asar](https://github.com/atom/asar)
|
||||
아카이브를 통해 어플리케이션의 소스코드가 사용자에게 노출되는 것을 방지할 수 있습니다.
|
||||
|
||||
`asar` 아카이브를 사용할 땐 단순히 `app` 폴더 대신에 어플리케이션을 패키징한 `app.asar` 파일로 대체하면됩니다.
|
||||
Electron은 자동으로 `app`폴더 대신 asar 아카이브를 기반으로 어플리케이션을 실행합니다.
|
||||
`asar` 아카이브를 사용할 땐 단순히 `app` 폴더 대신에 어플리케이션을 패키징한
|
||||
`app.asar` 파일로 대체하면됩니다. Electron은 자동으로 `app`폴더 대신 asar 아카이브를
|
||||
기반으로 어플리케이션을 실행합니다.
|
||||
|
||||
OS X의 경우:
|
||||
|
||||
|
|
@ -59,22 +60,25 @@ electron/resources/
|
|||
### Windows
|
||||
|
||||
`electron.exe`을 원하는 이름으로 변경할 수 있습니다.
|
||||
그리고 [rcedit](https://github.com/atom/rcedit) 또는 [ResEdit](http://www.resedit.net)를 사용하여 아이콘을 변경할 수 있습니다.
|
||||
그리고 [rcedit](https://github.com/atom/rcedit) 또는
|
||||
[ResEdit](http://www.resedit.net)를 사용하여 아이콘을 변경할 수 있습니다.
|
||||
|
||||
### OS X
|
||||
|
||||
`Electron.app`을 원하는 이름으로 변경할 수 있습니다. 그리고 다음 표시된 어플리케이션 내부 파일에서
|
||||
`CFBundleDisplayName`, `CFBundleIdentifier` and `CFBundleName` 필드를 원하는 이름으로 변경해야합니다:
|
||||
`Electron.app`을 원하는 이름으로 변경할 수 있습니다. 그리고 다음 표시된 어플리케이션
|
||||
내부 파일에서 `CFBundleDisplayName`, `CFBundleIdentifier` 그리고 `CFBundleName`
|
||||
필드를 원하는 이름으로 변경해야 합니다:
|
||||
|
||||
* `Electron.app/Contents/Info.plist`
|
||||
* `Electron.app/Contents/Frameworks/Electron Helper.app/Contents/Info.plist`
|
||||
|
||||
또한 helper 앱이 프로세스 모니터에 `Electron Helper`로 나오지 않도록 이름을 변경할 수 있습니다.
|
||||
하지만 반드시 내부 및 모든 helper 앱의 이름을 변경해야 합니다.
|
||||
또한 helper 앱이 프로세스 모니터에 `Electron Helper`로 나오지 않도록 이름을
|
||||
변경할 수 있습니다. 하지만 반드시 내부 및 모든 helper 앱의 이름을 변경해야 합니다.
|
||||
|
||||
어플리케이션 아이콘은 `Electron.app/Contents/Resources/atom.icns`을 원하는 아이콘으로 변경하면 됩니다.
|
||||
어플리케이션 아이콘은 `Electron.app/Contents/Resources/atom.icns`을 원하는
|
||||
아이콘으로 변경하면 됩니다.
|
||||
|
||||
원하는 이름으로 바꾼 어플리케이션 예제:
|
||||
어플리케이션 이름을 원하는 이름으로 변경한 예시:
|
||||
|
||||
```
|
||||
MyApp.app/Contents
|
||||
|
|
@ -98,13 +102,14 @@ MyApp.app/Contents
|
|||
|
||||
### Linux
|
||||
|
||||
실행파일 `electron`의 이름을 원하는 대로 바꿀 수 있습니다.
|
||||
리눅스 어플리케이션의 아이콘은 [.desktop](https://developer.gnome.org/integration-guide/stable/desktop-files.html.en) 파일을 사용하여 지정할 수 있습니다.
|
||||
실행파일 `electron`의 이름을 원하는 대로 바꿀 수 있습니다. 리눅스 어플리케이션의
|
||||
아이콘은 [.desktop](https://developer.gnome.org/integration-guide/stable/desktop-files.html.en)
|
||||
파일을 사용하여 지정할 수 있습니다.
|
||||
|
||||
### 역주-자동화
|
||||
### 역주-자동화
|
||||
|
||||
어플리케이션 배포시 Electron의 리소스를 일일이 수정하는 것은 매우 귀찮고 복잡합니다.
|
||||
하지만 이 작업을 자동화 시킬 수 있는 몇가지 방법이 있습니다:
|
||||
어플리케이션 배포시 Electron의 리소스를 일일이 수정하는 것은 매우 반복적이고 복잡합니다.
|
||||
하지만 이 작업을 자동화 시킬 수 있는 몇가지 방법이 있습니다:
|
||||
|
||||
* [electron-builder](https://github.com/loopline-systems/electron-builder)
|
||||
* [electron-packager](https://github.com/maxogden/electron-packager)
|
||||
|
|
@ -135,7 +140,9 @@ $ script/build.py -c Release -t myapp
|
|||
|
||||
### grunt-build-atom-shell
|
||||
|
||||
Electron의 소스코드를 수정하고 다시 빌드하는 작업은 상당히 복잡합니다.
|
||||
일일이 소스코드를 수정하는 대신 [grunt-build-atom-shell](https://github.com/paulcbetts/grunt-build-atom-shell)을 사용하여 빌드를 자동화 시킬 수 있습니다.
|
||||
Electron의 소스코드를 수정하고 다시 빌드하는 작업은 상당히 복잡합니다. 일일이
|
||||
소스코드를 수정하는 대신 [grunt-build-atom-shell](https://github.com/paulcbetts/grunt-build-atom-shell)을
|
||||
사용하여 빌드를 자동화 시킬 수 있습니다.
|
||||
|
||||
이 툴을 사용하면 자동으로 `.gyp`파일을 수정하고 다시 빌드합니다. 그리고 어플리케이션의 네이티브 Node 모듈 또한 새로운 실행파일 이름으로 매치 시킵니다.
|
||||
이 툴을 사용하면 자동으로 `.gyp`파일을 수정하고 다시 빌드합니다. 그리고 어플리케이션의
|
||||
네이티브 Node 모듈 또한 새로운 실행파일 이름으로 일치시킵니다.
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
# 어플리케이션 패키징
|
||||
|
||||
Windows에서 일어나는 긴 경로 이름에 대한 [issues](https://github.com/joyent/node/issues/6960)를 완화하고 `require` 속도를 약간 빠르게 하며
|
||||
어플리케이션의 리소스와 소스코드를 좋지 않은 사용자로부터 보호하기 위해 어플리케이션을 [asar][asar] 아카이브로 패키징 할 수 있습니다.
|
||||
Windows에서 일어나는 긴 경로 이름에 대한 [issues](https://github.com/joyent/node/issues/6960)를
|
||||
완화하고 `require` 속도를 약간 빠르게 하며 어플리케이션의 리소스와 소스코드를 좋지 않은
|
||||
사용자로부터 보호하기 위해 어플리케이션을 [asar][asar] 아카이브로 패키징 할 수 있습니다.
|
||||
|
||||
## `asar` 아카이브 생성
|
||||
|
||||
|
|
@ -24,13 +25,15 @@ $ asar pack your-app app.asar
|
|||
|
||||
## `asar` 아카이브 사용하기
|
||||
|
||||
Electron은 Node.js로 부터 제공된 Node API와 Chromium으로부터 제공된 Web API 두 가지 API를 가지고 있습니다.
|
||||
따라서 `asar` 아카이브는 두 API 모두 사용할 수 있도록 지원합니다.
|
||||
Electron은 Node.js로부터 제공된 Node API와 Chromium으로부터 제공된 Web API 두 가지
|
||||
API를 가지고 있습니다. 따라서 `asar` 아카이브는 두 API 모두 사용할 수 있도록
|
||||
지원합니다.
|
||||
|
||||
### Node API
|
||||
|
||||
Electron에선 `fs.readFile`과 `require` 같은 Node API들을 지원하기 위해 `asar` 아카이브가 가상의 디렉터리 구조를 가지도록
|
||||
패치했습니다. 그래서 아카이브 내부 리소스들을 정상적인 파일 시스템처럼 접근할 수 있습니다.
|
||||
Electron에선 `fs.readFile`과 `require` 같은 Node API들을 지원하기 위해 `asar`
|
||||
아카이브가 가상의 디렉터리 구조를 가지도록 패치했습니다. 그래서 아카이브 내부
|
||||
리소스들을 정상적인 파일 시스템처럼 접근할 수 있습니다.
|
||||
|
||||
예를 들어 `/path/to`라는 경로에 `example.asar`라는 아카이브가 있다고 가정하면:
|
||||
|
||||
|
|
@ -90,9 +93,10 @@ $.get('file:///path/to/example.asar/file.txt', function(data) {
|
|||
|
||||
### `asar` 아카이브를 일반 파일로 취급하기
|
||||
|
||||
`asar` 아카이브의 체크섬(checksum)을 검사하는 작업등을 하기 위해선 `asar` 아카이브를 파일 그대로 읽어야 합니다.
|
||||
이러한 작업을 하기 위해 `original-fs` 빌트인 모듈을 `fs` 모듈 대신에 사용할 수 있습니다.
|
||||
이 모듈은 `asar` 지원이 빠져있습니다. 즉 파일 그대로를 읽어들입니다:
|
||||
`asar` 아카이브의 체크섬(checksum)을 검사하는 작업등을 하기 위해선 `asar` 아카이브를
|
||||
파일 그대로 읽어야 합니다. 이러한 작업을 하기 위해 `original-fs` 빌트인 모듈을 `fs`
|
||||
모듈 대신에 사용할 수 있습니다. 이 모듈은 `asar` 지원이 빠져있습니다. 즉 파일 그대로를
|
||||
읽어들입니다:
|
||||
|
||||
```javascript
|
||||
var originalFs = require('original-fs');
|
||||
|
|
@ -101,22 +105,26 @@ originalFs.readFileSync('/path/to/example.asar');
|
|||
|
||||
## Node API의 한계
|
||||
|
||||
`asar` 아카이브를 Node API가 최대한 디렉터리 구조로 작동하도록 노력해왔지만 여전히 저수준(low-level nature) Node API 때문에 한계가 있습니다.
|
||||
`asar` 아카이브를 Node API가 최대한 디렉터리 구조로 작동하도록 노력해왔지만 여전히
|
||||
저수준(low-level nature) Node API 때문에 한계가 있습니다.
|
||||
|
||||
### 아카이브는 읽기 전용입니다
|
||||
|
||||
아카이브는 수정할 수 없으며 기본적으로는 Node API로 파일을 수정할 수 있지만 `asar` 아카이브에선 작동하지 않습니다.
|
||||
아카이브는 수정할 수 없으며 기본적으로는 Node API로 파일을 수정할 수 있지만 `asar`
|
||||
아카이브에선 작동하지 않습니다.
|
||||
|
||||
### 아카이브 안의 디렉터리를 작업 경로로 설정하면 안됩니다
|
||||
|
||||
`asar` 아카이브는 디렉터리처럼 사용할 수 있도록 구현되었지만 그것은 실제 파일시스템의 디렉터리가 아닌 가상의 디렉터리입니다.
|
||||
그런 이유로 몇몇 API에서 지원하는 `cwd` 옵션을 `asar` 아카이브 안의 디렉터리 경로로 지정하면 나중에 문제가 발생할 수 있습니다.
|
||||
`asar` 아카이브는 디렉터리처럼 사용할 수 있도록 구현되었지만 그것은 실제 파일시스템의
|
||||
디렉터리가 아닌 가상의 디렉터리입니다. 그런 이유로 몇몇 API에서 지원하는 `cwd` 옵션을
|
||||
`asar` 아카이브 안의 디렉터리 경로로 지정하면 나중에 문제가 발생할 수 있습니다.
|
||||
|
||||
### 특정 API로 인한 예외적인 아카이브 압축 해제
|
||||
|
||||
많은 `fs` API가 `asar` 아카이브의 압축을 해제하지 않고 바로 아카이브를 읽거나 정보를 가져올 수 있으나
|
||||
몇몇 API는 시스템의 실제 파일의 경로를 기반으로 작동하므로 Electron은 API가 원할하게 작동할 수 있도록
|
||||
임시 경로에 해당되는 파일의 압축을 해제합니다. 이 작업은 약간의 오버헤드를 불러 일으킬 수 있습니다.
|
||||
많은 `fs` API가 `asar` 아카이브의 압축을 해제하지 않고 바로 아카이브를 읽거나 정보를
|
||||
가져올 수 있으나 몇몇 API는 시스템의 실제 파일의 경로를 기반으로 작동하므로 Electron은
|
||||
API가 원할하게 작동할 수 있도록 임시 경로에 해당되는 파일의 압축을 해제합니다. 이 작업은
|
||||
약간의 오버헤드를 불러 일으킬 수 있습니다.
|
||||
|
||||
위 예외에 해당하는 API 메서드는 다음과 같습니다:
|
||||
|
||||
|
|
@ -127,24 +135,27 @@ originalFs.readFileSync('/path/to/example.asar');
|
|||
|
||||
### `fs.stat`의 잘못된 스테이터스 정보
|
||||
|
||||
`fs.stat` 로 부터 반환되는 `Stats` 객체와 비슷한 API들은 `asar` 아카이브를 타겟으로 할 경우 예측된 디렉터리 파일 정보를 가집니다.
|
||||
왜냐하면 아카이브의 디렉터리 경로는 실제 파일시스템에 존재하지 않기 때문입니다.
|
||||
그러한 이유로 파일 크기와 파일 타입 등을 확인할 때 `Stats` 객체를 신뢰해선 안됩니다.
|
||||
`fs.stat` 로부터 반환되는 `Stats` 객체와 비슷한 API들은 `asar` 아카이브를 타겟으로
|
||||
할 경우 예측된 디렉터리 파일 정보를 가집니다. 왜냐하면 아카이브의 디렉터리 경로는 실제
|
||||
파일 시스템에 존재하지 않기 때문입니다. 그러한 이유로 파일 크기와
|
||||
파일 타입 등을 확인할 때 `Stats` 객체를 신뢰해선 안됩니다.
|
||||
|
||||
## `asar` 아카이브에 미리 압축 해제된 파일 추가하기
|
||||
|
||||
전술한 바와 같이 몇몇 Node API는 호출 시 해당 파일을 임시폴더에 압축을 해제합니다.
|
||||
이 방법은 성능문제가 발생할 수 있습니다. 그리고 설계상 백신 소프트웨어에서 잘못 진단하여 바이러스로 판단 할 수도 있습니다.
|
||||
이 방법은 성능문제가 발생할 수 있습니다. 그리고 설계상 백신 소프트웨어에서 잘못 진단하여
|
||||
바이러스로 진단 할 수도 있습니다.
|
||||
|
||||
이 문제를 해결하려면 `--unpack` 옵션을 활용하여 파일을 압축이 풀려진 상태로 유지해야 합니다.
|
||||
다음의 예제는 node 네이티브 모듈의 공유 라이브러리를 unpack 상태로 유지합니다:
|
||||
이 문제를 해결하려면 `--unpack` 옵션을 통해 파일을 압축이 풀려진 상태로 유지해야 합니다.
|
||||
다음의 예제는 node 네이티브 모듈의 공유 라이브러리를 압축이 풀려진 상태로 유지합니다:
|
||||
|
||||
```bash
|
||||
$ asar pack app app.asar --unpack *.node
|
||||
```
|
||||
|
||||
커맨드를 실행한 후 같은 디렉터리에 `app.asar` 파일 외에 `app.asar.unpacked` 폴더가 같이 생성됩니다.
|
||||
이 폴더안에 unpack 옵션에서 설정한 파일들이 압축이 풀린 상태로 포함되어 있습니다.
|
||||
사용자에게 어플리케이션을 배포할 때 반드시 해당 폴더도 같이 배포해야 합니다.
|
||||
커맨드를 실행한 후 같은 디렉터리에 `app.asar` 파일 외에 `app.asar.unpacked` 폴더가
|
||||
같이 생성됩니다. 이 폴더안에 unpack 옵션에서 설정한 파일들이 압축이 풀려진 상태로
|
||||
포함되어 있습니다. 사용자에게 어플리케이션을 배포할 때 반드시 해당 폴더도 같이 배포해야
|
||||
합니다.
|
||||
|
||||
[asar]: https://github.com/atom/asar
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
# 메인 프로세스 디버깅하기
|
||||
|
||||
브라우저 창의 개발자 도구는 웹 페이지 같은 랜더러 프로세스의 스크립트만 디버깅이 가능합니다.
|
||||
대신 Electron은 메인 프로세스의 디버깅을 위해 `--debug` 과 `--debug-brk` 스위치들을 제공합니다.
|
||||
브라우저 창의 개발자 도구는 웹 페이지 같은 랜더러 프로세스의 스크립트만 디버깅이
|
||||
가능합니다. 대신 Electron은 메인 프로세스의 디버깅을 위해 `--debug` 과 `--debug-brk`
|
||||
스위치들을 제공합니다.
|
||||
|
||||
## 커맨드 라인 스위치(command line switches)
|
||||
|
||||
|
|
@ -9,7 +10,8 @@
|
|||
|
||||
### `--debug=[port]`
|
||||
|
||||
이 스위치를 사용하면 Electron은 지정한 `port`에 V8 디버거 프로토콜을 리스닝합니다. 기본 `port`는 `5858` 입니다.
|
||||
이 스위치를 사용하면 Electron은 지정한 `port`에 V8 디버거 프로토콜을 리스닝합니다.
|
||||
기본 `port`는 `5858` 입니다.
|
||||
|
||||
### `--debug-brk=[port]`
|
||||
|
||||
|
|
@ -17,9 +19,9 @@
|
|||
|
||||
## node-inspector로 디버깅 하기
|
||||
|
||||
__참고:__ Electron은 node v0.11.13 버전을 사용합니다.
|
||||
그리고 현재 node-inspector 유틸리티와 호환성 문제가 있습니다.
|
||||
추가로 node-inspector 콘솔 내에서 메인 프로세스의 `process` 객체를 탐색할 경우 크래시가 발생할 수 있습니다.
|
||||
__참고:__ Electron은 node v0.11.13 버전을 사용합니다. 그리고 현재 node-inspector
|
||||
유틸리티와 호환성 문제가 있습니다. 추가로 node-inspector 콘솔 내에서 메인 프로세스의
|
||||
`process` 객체를 탐색할 경우 크래시가 발생할 수 있습니다.
|
||||
|
||||
### 1. [node-inspector][node-inspector] 서버 시작
|
||||
|
||||
|
|
@ -43,6 +45,7 @@ $ electron --debug-brk=5858 your/app
|
|||
|
||||
### 3. 디버그 UI 로드
|
||||
|
||||
Chrome 브라우저에서 http://127.0.0.1:8080/debug?ws=127.0.0.1:8080&port=5858 주소에 접속합니다. (기본포트 또는 지정한 포트로 접속)
|
||||
Chrome 브라우저에서 http://127.0.0.1:8080/debug?ws=127.0.0.1:8080&port=5858 주소에
|
||||
접속합니다. (기본포트 또는 지정한 포트로 접속)
|
||||
|
||||
[node-inspector]: https://github.com/node-inspector/node-inspector
|
||||
|
|
|
|||
|
|
@ -1,15 +1,18 @@
|
|||
# 데스크톱 환경 통합
|
||||
|
||||
어플리케이션 배포의 대상이 되는 서로 다른 운영체제 시스템의 환경에 맞춰 어플리케이션의 기능을 통합할 수 있습니다.
|
||||
예를 들어 Windows에선 태스크바의 JumpList에 바로가기를 추가할 수 있고 Mac(OS X)에선 dock 메뉴에 커스텀 메뉴를 추가할 수 있습니다.
|
||||
어플리케이션 배포의 대상이 되는 서로 다른 운영체제 시스템의 환경에 맞춰 어플리케이션의
|
||||
기능을 통합할 수 있습니다. 예를 들어 Windows에선 태스크바의 JumpList에 바로가기를
|
||||
추가할 수 있고 Mac(OS X)에선 dock 메뉴에 커스텀 메뉴를 추가할 수 있습니다.
|
||||
|
||||
이 문서는 Electron API를 이용하여 각 운영체제 시스템의 기능을 활용하는 방법을 설명합니다.
|
||||
이 문서는 Electron API를 이용하여 각 운영체제 시스템의 기능을 활용하는 방법을
|
||||
설명합니다.
|
||||
|
||||
## 데스크톱 알림 (Windows, Linux, OS X)
|
||||
|
||||
Windows, Linux, OS X 운영체제 모두 기본적으로 어플리케이션에서 유저에게 알림 보낼 수 있는 방법을 제공합니다.
|
||||
Electron은 HTML5 Notification API](https://notifications.spec.whatwg.org/)를 통해 개발자가
|
||||
편리하게 데스크톱 알림을 사용할 수 있는 기능을 제공합니다. 데스크톱 알림은 운영체제의 네이티브 알림 API를 사용하여 표시합니다.
|
||||
Windows, Linux, OS X 운영체제 모두 기본적으로 어플리케이션에서 유저에게 알림을 보내는
|
||||
방법을 제공합니다. Electron은 [HTML5 Notification API](https://notifications.spec.whatwg.org/)를
|
||||
통해 개발자가 편리하게 데스크톱 알림을 사용할 수 있는 기능을 제공합니다. 데스크톱 알림은
|
||||
운영체제의 네이티브 알림 API를 사용하여 표시합니다.
|
||||
|
||||
```javascript
|
||||
var myNotification = new Notification('Title', {
|
||||
|
|
@ -21,17 +24,21 @@ myNotification.onclick = function () {
|
|||
}
|
||||
```
|
||||
|
||||
위 코드를 통해 생성한 데스크톱 알림은 각 운영체제 모두 비슷한 사용자 경험을 제공합니다. 하지만 몇 가지 다른 점들이 있습니다.
|
||||
위 코드를 통해 생성한 데스크톱 알림은 각 운영체제 모두 비슷한 사용자 경험을 제공합니다.
|
||||
하지만 몇 가지 다른 점들이 있습니다.
|
||||
|
||||
### Windows
|
||||
|
||||
* Windows 10에선 "아무 문제 없이 잘" 작동합니다.
|
||||
* Windows 8.1과 8에선 [Application User Model ID][app-user-model-id]로 바로가기를 만들어 놔야 합니다.
|
||||
이 바로가기는 반드시 시작 화면에 설치되어 있어야 합니다. 참고로 반드시 시작 화면에 고정 할 필요는 없습니다.
|
||||
* Windows 7과 그 이하 버전은 데스크톱 알림을 지원하지 않습니다. 혹시 "풍선 팝업 알림" 기능을 찾는다면 [Tray API](tray-balloon)를 사용하세요.
|
||||
* Windows 8.1과 8에선 [Application User Model ID][app-user-model-id]로 바로가기를
|
||||
만들어 놔야 합니다. 이 바로가기는 반드시 시작 화면에 설치되어 있어야 합니다. 참고로
|
||||
반드시 시작 화면에 고정 할 필요는 없습니다.
|
||||
* Windows 7과 그 이하 버전은 데스크톱 알림을 지원하지 않습니다.
|
||||
혹시 "풍선 팝업 알림" 기능을 찾는다면 [Tray API](tray-balloon)를 사용하세요.
|
||||
|
||||
이미지를 데스크톱 알림에 사용하려면 알림 옵션의 `icon` 속성에 로컬 이미지 파일(`png` 권장)을 지정하면 됩니다.
|
||||
데스크톱 알림은 잘못된 경로를 지정하거나 `http/https` 기반의 URL을 지정해도 이미지가 보이지 않을 뿐 정상 작동합니다.
|
||||
이미지를 데스크톱 알림에 사용하려면 알림 옵션의 `icon` 속성에 로컬 이미지 파일
|
||||
(`png` 권장)을 지정하면 됩니다. 데스크톱 알림은 잘못된 경로를 지정하거나 `http/https`
|
||||
기반의 URL을 지정해도 이미지가 보이지 않을 뿐 정상 작동합니다.
|
||||
|
||||
```javascript
|
||||
new Notification('Title', {
|
||||
|
|
@ -40,12 +47,14 @@ new Notification('Title', {
|
|||
});
|
||||
```
|
||||
|
||||
또한 `body`의 최대 길이는 250자 입니다. Windows 개발팀에선 알림 문자열을 200자 이하로 유지하는 것을 권장합니다.
|
||||
또한 `body`의 최대 길이는 250자 입니다. Windows 개발팀에선 알림 문자열을 200자 이하로
|
||||
유지하는 것을 권장합니다.
|
||||
|
||||
### Linux
|
||||
|
||||
데스크톱 알림의 구현으로 `libnotify`를 사용합니다. 따라서 [Desktop Notifications Specification][notification-spec]을
|
||||
따르는 모든 데스크탑 환경에서 데스크톱 알림 기능을 사용할 수 있습니다. Cinnamon, Enlightenment, Unity, GNOME, KDE등을 지원합니다.
|
||||
따르는 모든 데스크탑 환경에서 데스크톱 알림 기능을 사용할 수 있습니다. Cinnamon,
|
||||
Enlightenment, Unity, GNOME, KDE등을 지원합니다.
|
||||
|
||||
### OS X
|
||||
|
||||
|
|
@ -53,11 +62,13 @@ OS X에서의 데스크톱 알림은 아주 직관적입니다. 하지만 데스
|
|||
[Apple's Human Interface guidelines regarding notifications](https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/OSXHIGuidelines/NotificationCenter.html)
|
||||
가이드를 고려해야 합니다.
|
||||
|
||||
참고로 데스크롭 알림의 최대 길이는 256 바이트 입니다. 길이가 초과할 경우 초과한 글자가 잘립니다.
|
||||
참고로 데스크롭 알림의 최대 길이는 256 바이트 입니다. 길이가 초과할 경우 초과한 글자가
|
||||
잘립니다.
|
||||
|
||||
## 최근 사용한 문서 (Windows & OS X)
|
||||
|
||||
알다 싶이 Windows와 OS X는 JumpList 또는 dock 메뉴를 통해 최근 문서 리스트에 쉽게 접근할 수 있습니다.
|
||||
알다 싶이 Windows와 OS X는 JumpList 또는 dock 메뉴를 통해 최근 문서 리스트에 쉽게
|
||||
접근할 수 있습니다.
|
||||
|
||||
__JumpList:__
|
||||
|
||||
|
|
@ -67,13 +78,15 @@ __어플리케이션 dock menu:__
|
|||
|
||||
<img src="https://cloud.githubusercontent.com/assets/639601/5069610/2aa80758-6e97-11e4-8cfb-c1a414a10774.png" height="353" width="428" >
|
||||
|
||||
파일을 최근 문서에 추가하려면 [app.addRecentDocument][addrecentdocument] API를 사용할 수 있습니다:
|
||||
파일을 최근 문서에 추가하려면 [app.addRecentDocument][addrecentdocument] API를
|
||||
사용할 수 있습니다:
|
||||
|
||||
```javascript
|
||||
app.addRecentDocument('/Users/USERNAME/Desktop/work.type');
|
||||
```
|
||||
|
||||
그리고 [app.clearRecentDocuments][clearrecentdocuments] API로 최근 문서 리스트를 비울 수 있습니다:
|
||||
그리고 [app.clearRecentDocuments][clearrecentdocuments] API로 최근 문서 리스트를
|
||||
비울 수 있습니다:
|
||||
|
||||
```javascript
|
||||
app.clearRecentDocuments();
|
||||
|
|
@ -81,11 +94,13 @@ app.clearRecentDocuments();
|
|||
|
||||
### Windows에서 주의할 점
|
||||
|
||||
이 기능을 Windows에서 사용할 땐 운영체제 시스템에 어플리케이션에서 사용하는 파일 확장자가 등록되어 있어야 합니다.
|
||||
그렇지 않은 경우 파일을 JumpList에 추가해도 추가되지 않습니다.
|
||||
어플리케이션 등록에 관련된 API의 모든 내용은 [Application Registration][app-registration]에서 찾아볼 수 있습니다.
|
||||
이 기능을 Windows에서 사용할 땐 운영체제 시스템에 어플리케이션에서 사용하는 파일
|
||||
확장자가 등록되어 있어야 합니다. 그렇지 않은 경우 파일을 JumpList에 추가해도 추가되지
|
||||
않습니다. 어플리케이션 등록에 관련된 API의 모든 내용은 [Application Registration][app-registration]에서
|
||||
찾아볼 수 있습니다.
|
||||
|
||||
유저가 JumpList에서 파일을 클릭할 경우 클릭된 파일의 경로가 커맨드 라인 인자로 추가되어 새로운 인스턴스의 어플리케이션이 실행됩니다.
|
||||
유저가 JumpList에서 파일을 클릭할 경우 클릭된 파일의 경로가 커맨드 라인 인자로 추가되어
|
||||
새로운 인스턴스의 어플리케이션이 실행됩니다.
|
||||
|
||||
### OS X에서 주의할 점
|
||||
|
||||
|
|
@ -100,7 +115,8 @@ __Terminal.app의 dock menu:__
|
|||
|
||||
<img src="https://cloud.githubusercontent.com/assets/639601/5069962/6032658a-6e9c-11e4-9953-aa84006bdfff.png" height="354" width="341" >
|
||||
|
||||
커스텀 dock menu를 설정하려면 `app.dock.setMenu` API를 사용하면 됩니다. OS X에서만 사용 가능합니다:
|
||||
커스텀 dock menu를 설정하려면 `app.dock.setMenu` API를 사용하면 됩니다.
|
||||
OS X에서만 사용 가능합니다:
|
||||
|
||||
```javascript
|
||||
const electron = require('electron');
|
||||
|
|
@ -123,26 +139,30 @@ app.dock.setMenu(dockMenu);
|
|||
Windows에선 JumpList의 `Tasks` 카테고리에 원하는 작업을 설정할 수 있습니다.
|
||||
MSDN에선 해당 기능을 다음과 같이 설명하고 있습니다:
|
||||
|
||||
> 어플리케이션 작업은 프로그램의 기능 그리고 주요사양 두가지를 기반으로 유저의 행동을 예측하여 정의합니다.
|
||||
> 실행할 필요가 없는 어플리케이션 작업은 작동하지 않을 때 반드시 context-free를 유지해야 합니다.
|
||||
> 작업은 일반 사용자가 프로그램을 실행하거나 이메일 프로그램으로 이메일을 작성하거나 달력을 불러오고
|
||||
> 워드 프로세서로 새 문서를 작성, 특정 모드, 부속 명령으로 프로그램을 실행하는 등의
|
||||
> 통계적, 일반적으로 가장 많이 사용되는 작업인지를 고려해야 합니다.
|
||||
> 어플리케이션 작업은 일반 유저가 필요로 하지 않는 고급 기능을 조잡하게 채우거나 등록과 같은 일회성의 작업을 포함해선 안됩니다.
|
||||
> 작업에 특별 이벤트 또는 업그레이드 등의 홍보성 작업을 추가하면 안됩니다.
|
||||
> 어플리케이션 작업은 프로그램의 기능 그리고 주요사양 두가지를 기반으로 유저의 행동을
|
||||
> 예측하여 정의합니다. 실행할 필요가 없는 어플리케이션 작업은 작동하지 않을 때 반드시
|
||||
> context-free를 유지해야 합니다. 작업은 일반 사용자가 프로그램을 실행하거나 이메일
|
||||
> 프로그램으로 이메일을 작성하거나 달력을 불러오고, 워드 프로세서로 새 문서를 작성,
|
||||
> 특정 모드, 부속 명령으로 프로그램을 실행하는 등의 통계적, 일반적으로 가장 많이
|
||||
> 사용되는 작업인지를 고려해야 합니다. 어플리케이션 작업은 일반 유저가 필요로 하지
|
||||
> 않는 고급 기능을 조잡하게 채우거나 등록과 같은 일회성의 작업을 포함해선 안됩니다.
|
||||
> 또한 작업에 특별 이벤트 또는 업그레이드 등의 홍보성 작업을 추가하면 안됩니다.
|
||||
>
|
||||
> 작업 리스트는 가능한 한 정적으로 유지되는 것을 적극 권장합니다.
|
||||
> 이것은 동일한 상태 또는 응용 프로그램의 상태에 관계없이 유지되어야 합니다.
|
||||
> 작업 목록은 동적으로 변경할 수 있지만 몇몇 유저는 예상하지 못한 작업 목록 변경에 혼동할 수 있다는 점을 고려해야 합니다.
|
||||
> 작업 목록은 동적으로 변경할 수 있지만 몇몇 유저는 예상하지 못한 작업 목록 변경에
|
||||
> 혼란을 일으킬 수 있다는 점을 고려해야 합니다.
|
||||
|
||||
__Internet Explorer의 작업:__
|
||||
|
||||
|
||||
|
||||
OS X의 dock menu(진짜 메뉴)와는 달리 Windows의 사용자 작업은 어플리케이션 바로 가기처럼 작동합니다.
|
||||
유저가 작업을 클릭할 때 설정한 인자와 함께 새로운 어플리케이션이 실행됩니다.
|
||||
OS X의 dock menu(진짜 메뉴)와는 달리 Windows의 사용자 작업은 어플리케이션 바로
|
||||
가기처럼 작동합니다. 유저가 작업을 클릭할 때 설정한 인자와 함께 새로운 어플리케이션이
|
||||
실행됩니다.
|
||||
|
||||
사용자 작업을 설정하려면 [app.setUserTasks][setusertaskstasks] 메서드를 통해 구현할 수 있습니다:
|
||||
사용자 작업을 설정하려면 [app.setUserTasks][setusertaskstasks] 메서드를 통해 구현할
|
||||
수 있습니다:
|
||||
|
||||
```javascript
|
||||
app.setUserTasks([
|
||||
|
|
@ -157,34 +177,39 @@ app.setUserTasks([
|
|||
]);
|
||||
```
|
||||
|
||||
작업 리스트를 비우려면 간단히 `app.setUserTasks` 메서드의 첫번째 인자에 빈 배열을 넣어 호출하면 됩니다:
|
||||
작업 리스트를 비우려면 간단히 `app.setUserTasks` 메서드의 첫번째 인자에 빈 배열을 넣어
|
||||
호출하면 됩니다:
|
||||
|
||||
```javascript
|
||||
app.setUserTasks([]);
|
||||
```
|
||||
|
||||
|
||||
사용자 작업 리스트는 어플리케이션이 삭제되지 않는 한 종료되어도 태스크바에 보존됩니다. 이러한 이유로 반드시 프로그램 경로와 아이콘 경로를 지정해야 합니다.
|
||||
사용자 작업 리스트는 어플리케이션이 삭제되지 않는 한 종료되어도 태스크바에 보존됩니다.
|
||||
이러한 이유로 반드시 프로그램 경로와 아이콘 경로를 지정해야 합니다.
|
||||
|
||||
## 섬네일 툴바
|
||||
## 미리보기 툴바
|
||||
|
||||
Windows에선 작업 표시줄의 어플리케이션 선택시 나오는 미리보기에 특정한 섬네일 툴바를 추가할 수 있습니다.
|
||||
이 기능은 유저가 윈도우를 활성화 하지 않고 특정한 커맨드를 실행시킬 수 있도록 할 수 있습니다.
|
||||
Windows에선 작업 표시줄의 어플리케이션 선택시 나오는 미리보기에 특정한 미리보기 툴바를
|
||||
추가할 수 있습니다. 이 기능은 유저가 윈도우를 활성화 하지 않고 특정한 커맨드를 실행시킬
|
||||
수 있도록 할 수 있습니다.
|
||||
|
||||
MSDN의 설명에 의하면:
|
||||
|
||||
> 이 툴바는 표준 툴바의 공통 컨트롤과 비슷한 역할을 합니다. 버튼은 최대 7개 까지 만들 수 있습니다.
|
||||
> 각 버튼의 구조엔 ID, 이미지, 툴팁, 상태등이 정의되어있습니다. 태스크바에 구조가 전달되면 어플리케이션이
|
||||
> 상태에 따라 버튼을 숨기거나, 활성화하거나, 비활성화 할 수 있습니다.
|
||||
> 이 툴바는 표준 툴바의 공통 컨트롤과 비슷한 역할을 합니다. 버튼은 최대 7개 까지
|
||||
> 만들 수 있습니다. 각 버튼의 구조엔 ID, 이미지, 툴팁, 상태 등이 정의되어있습니다.
|
||||
> 작업표시줄에 구조가 전달되면 어플리케이션이 상태에 따라 버튼을 숨기거나, 활성화하거나,
|
||||
> 비활성화 할 수 있습니다.
|
||||
>
|
||||
> 예를 들어, 윈도우 미디어 플레이어는(WMP) 기본적으로
|
||||
> 미디어 플레이어가 공통적으로 사용하는 재생, 일시정지, 음소거, 정지등의 컨트롤을 포함하고 있습니다.
|
||||
> 예를 들어, 윈도우 미디어 플레이어는(WMP) 미디어 플레이어가 공통적으로 사용하는
|
||||
> 재생, 일시정지, 음소거, 정지등의 컨트롤을 포함하고 있습니다.
|
||||
|
||||
__Windows Media Player의 섬네일 툴바:__
|
||||
__Windows Media Player의 미리보기 툴바:__
|
||||
|
||||
|
||||
|
||||
[BrowserWindow.setThumbarButtons][setthumbarbuttons] API를 통해 어플리케이션에 섬네일 툴바를 설정할 수 있습니다:
|
||||
[BrowserWindow.setThumbarButtons][setthumbarbuttons] API를 통해 어플리케이션에
|
||||
미리보기 툴바를 설정할 수 있습니다:
|
||||
|
||||
```javascript
|
||||
const BrowserWindow = require('electron').BrowserWindow;
|
||||
|
|
@ -209,7 +234,8 @@ win.setThumbarButtons([
|
|||
]);
|
||||
```
|
||||
|
||||
섬네일 툴바를 비우려면 간단히 `BrowserWindow.setThumbarButtons` API에 빈 배열을 전달하면 됩니다:
|
||||
미리보기 툴바를 비우려면 간단히 `BrowserWindow.setThumbarButtons` API에 빈 배열을
|
||||
전달하면 됩니다:
|
||||
|
||||
```javascript
|
||||
win.setThumbarButtons([]);
|
||||
|
|
@ -217,7 +243,8 @@ win.setThumbarButtons([]);
|
|||
|
||||
## Unity 런처 숏컷 기능 (Linux)
|
||||
|
||||
Unity 환경에선 `.desktop` 파일을 수정함으로써 런처에 새로운 커스텀 엔트리를 추가할 수 있습니다. [Adding Shortcuts to a Launcher][unity-launcher] 가이드를 참고하세요.
|
||||
Unity 환경에선 `.desktop` 파일을 수정함으로써 런처에 새로운 커스텀 엔트리를 추가할 수
|
||||
있습니다. [Adding Shortcuts to a Launcher][unity-launcher] 가이드를 참고하세요.
|
||||
|
||||
__Audacious의 런처 숏컷:__
|
||||
|
||||
|
|
@ -226,7 +253,8 @@ __Audacious의 런처 숏컷:__
|
|||
## Taskbar progress 기능 (Windows & Unity)
|
||||
|
||||
Windows에선 태스크바의 어플리케이션 버튼에 progress bar를 추가할 수 있습니다.
|
||||
이 기능은 사용자가 어플리케이션의 창을 열지 않고도 어플리케이션의 작업의 상태 정보를 시각적으로 보여줄 수 있도록 해줍니다.
|
||||
이 기능은 사용자가 어플리케이션의 창을 열지 않고도 어플리케이션의 작업의 상태 정보를
|
||||
시각적으로 보여줄 수 있도록 해줍니다.
|
||||
|
||||
또한 Unity DE도 런처에 progress bar를 부착할 수 있습니다.
|
||||
|
||||
|
|
@ -238,7 +266,8 @@ __Unity 런처의 progress bar:__
|
|||
|
||||
|
||||
|
||||
이 기능은 [BrowserWindow.setProgressBar][setprogressbar] API를 사용하여 구현할 수 있습니다:
|
||||
이 기능은 [BrowserWindow.setProgressBar][setprogressbar] API를 사용하여 구현할 수
|
||||
있습니다:
|
||||
|
||||
```javascript
|
||||
var window = new BrowserWindow({...});
|
||||
|
|
@ -247,14 +276,17 @@ window.setProgressBar(0.5);
|
|||
|
||||
## 대표 파일 제시 (OS X)
|
||||
|
||||
OS X는 창에서 대표 파일을 설정할 수 있습니다. 타이틀바에서 파일 아이콘이 있고, 사용자가 Command-Click 또는 Control-Click 키를 누를 경우 파일 경로 팝업이 보여집니다.
|
||||
또한 창의 상태도 지정할 수 있습니다. 쉽게 말해 로드된 문서의 수정여부를 타이틀바 파일 아이콘에 표시할 수 있습니다.
|
||||
OS X는 창에서 대표 파일을 설정할 수 있습니다. 타이틀바에서 파일 아이콘이 있고, 사용자가
|
||||
Command-Click 또는 Control-Click 키를 누를 경우 파일 경로 팝업이 보여집니다. 또한
|
||||
창의 상태도 지정할 수 있습니다. 다시 말해 로드된 문서의 수정 여부를 제목의 파일
|
||||
아이콘에 표시할 수 있습니다.
|
||||
|
||||
__대표 파일 팝업 메뉴:__
|
||||
|
||||
<img src="https://cloud.githubusercontent.com/assets/639601/5082061/670a949a-6f14-11e4-987a-9aaa04b23c1d.png" height="232" width="663" >
|
||||
|
||||
대표 파일 관련 API는 [BrowserWindow.setRepresentedFilename][setrepresentedfilename] 과 [BrowserWindow.setDocumentEdited][setdocumentedited]를 사용할 수 있습니다:
|
||||
대표 파일 관련 API는 [BrowserWindow.setRepresentedFilename][setrepresentedfilename] 과
|
||||
[BrowserWindow.setDocumentEdited][setdocumentedited]를 사용할 수 있습니다:
|
||||
|
||||
```javascript
|
||||
var window = new BrowserWindow({...});
|
||||
|
|
|
|||
|
|
@ -1,13 +1,17 @@
|
|||
# 개발자 도구 확장 기능
|
||||
|
||||
어플리케이션의 디버깅을 쉽게 하기 위해 Electron은 기본적으로 [Chrome DevTools Extension][devtools-extension]을 지원합니다.
|
||||
어플리케이션의 디버깅을 쉽게 하기 위해 Electron은 기본적으로
|
||||
[Chrome DevTools Extension][devtools-extension]을 지원합니다.
|
||||
|
||||
개발자 도구 확장 기능은 간단하게 사용할 확장 기능 플러그인의 소스 코드를 다운로드한 후 `BrowserWindow.addDevToolsExtension` API를 이용하여
|
||||
어플리케이션 내에 로드할 수 있습니다. 한가지 주의할 점은 확장 기능 사용시 창이 생성될 때 마다 일일이 해당 API를 호출할 필요는 없습니다.
|
||||
개발자 도구 확장 기능은 간단하게 사용할 확장 기능 플러그인의 소스 코드를 다운로드한 후
|
||||
`BrowserWindow.addDevToolsExtension` API를 통해 어플리케이션 내에 로드할 수 있습니다.
|
||||
한가지 주의할 점은 확장 기능 사용시 창이 생성될 때 마다 일일이 해당 API를 호출할 필요는
|
||||
없습니다.
|
||||
|
||||
** 주의: 현재 React DevTools은 작동하지 않습니다. https://github.com/atom/electron/issues/915 이슈를 참고하세요! **
|
||||
**주의: 현재 React DevTools은 작동하지 않습니다. https://github.com/atom/electron/issues/915 이슈를 참고하세요!**
|
||||
|
||||
다음 예제는 [React DevTools Extension](https://github.com/facebook/react-devtools)을 사용합니다.
|
||||
다음 예제는 [React DevTools Extension](https://github.com/facebook/react-devtools)을
|
||||
사용합니다.
|
||||
|
||||
먼저 소스코드를 다운로드 받습니다:
|
||||
|
||||
|
|
@ -16,8 +20,8 @@ $ cd /some-directory
|
|||
$ git clone --recursive https://github.com/facebook/react-devtools.git
|
||||
```
|
||||
|
||||
[`react-devtools/shells/chrome/Readme.md`](https://github.com/facebook/react-devtools/blob/master/shells/chrome/Readme.md)
|
||||
를 통해 확장 기능을 개발하는 방법을 알아볼 수 있습니다.
|
||||
[`react-devtools/shells/chrome/Readme.md`](https://github.com/facebook/react-devtools/blob/master/shells/chrome/Readme.md)를
|
||||
통해 확장 기능을 개발하는 방법을 알아볼 수 있습니다.
|
||||
|
||||
그리고 개발자 도구에서 다음 코드를 입력하면 확장 기능을 로드할 수 있습니다:
|
||||
|
||||
|
|
@ -26,7 +30,8 @@ const BrowserWindow = require('electron').remote.BrowserWindow;
|
|||
BrowserWindow.addDevToolsExtension('/some-directory/react-devtools/shells/chrome');
|
||||
```
|
||||
|
||||
확장 기능을 언로드 하고 콘솔을 다시 열 때 해당 확장 기능이 로드되지 않도록 하려면 `BrowserWindow.removeDevToolsExtension` API를 사용하면 됩니다:
|
||||
확장 기능을 언로드 하고 콘솔을 다시 열 때 해당 확장 기능이 로드되지 않도록 하려면
|
||||
`BrowserWindow.removeDevToolsExtension` API를 사용하면 됩니다:
|
||||
|
||||
```javascript
|
||||
BrowserWindow.removeDevToolsExtension('React Developer Tools');
|
||||
|
|
@ -34,20 +39,25 @@ BrowserWindow.removeDevToolsExtension('React Developer Tools');
|
|||
|
||||
## 개발자 도구 확장 기능의 구성 형식
|
||||
|
||||
모든 개발자 도구 확장은 완벽히 Chrome 브라우저를 위해 작성되었기 때문에 Electron에서도 로드할 수 있습니다.
|
||||
하지만 반드시 확장 기능은 소스 코드 디렉터리(폴더) 형태여야 합니다. 그래서 `crx` 등의 포맷으로 패키징된 확장 기능의 경우
|
||||
사용자가 직접 해당 패키지의 압축을 풀어서 로드하지 않는 이상 Electron에서 해당 확장 기능의 압축을 풀 방법이 없습니다.
|
||||
모든 개발자 도구 확장은 완벽히 Chrome 브라우저를 위해 작성되었기 때문에 Electron에서도
|
||||
로드할 수 있습니다. 하지만 반드시 확장 기능은 소스 코드 디렉터리(폴더) 형태여야 합니다.
|
||||
그래서 `crx` 등의 포맷으로 패키징된 확장 기능의 경우 사용자가 직접 해당 패키지의 압축을
|
||||
풀어서 로드하지 않는 이상 Electron에서 해당 확장 기능의 압축을 풀 방법이 없습니다.
|
||||
|
||||
## 백그라운드 페이지
|
||||
|
||||
현재 Electron은 Chrome에서 지원하는 백그라운드 페이지(background pages)를 지원하지 않습니다.
|
||||
몇몇 확장 기능은 이 기능에 의존하는 경우가 있는데, 이 때 해당 확장 기능은 Electron에서 작동하지 않을 수 있습니다.
|
||||
현재 Electron은 Chrome에서 지원하는 백그라운드 페이지(background pages)를 지원하지
|
||||
않습니다. 몇몇 확장 기능은 이 기능에 의존하는 경우가 있는데, 이 때 해당 확장 기능은
|
||||
Electron에서 작동하지 않을 수 있습니다.
|
||||
|
||||
## `chrome.*` API
|
||||
|
||||
몇몇 Chrome 확장 기능은 특정 기능을 사용하기 위해 `chrome.*` API를 사용하는데, 이 API들을 구현하기 위해 노력했지만 안타깝게도 아직 모든 API가 구현되지는 않았습니다.
|
||||
몇몇 Chrome 확장 기능은 특정 기능을 사용하기 위해 `chrome.*` API를 사용하는데, 이
|
||||
API들을 구현하기 위해 노력했지만 안타깝게도 아직 모든 API가 구현되지는 않았습니다.
|
||||
|
||||
아직 모든 API가 구현되지 않았기 때문에 확장 기능에서 `chrome.devtools.*` 대신 `chrome.*` API를 사용할 경우 확장 기능이 제대로 작동하지 않을 수 있음을 감안해야 합니다.
|
||||
만약 문제가 발생할 경우 Electron의 GitHub 저장소에 관련 이슈를 올리면 해당 API를 추가하는데 많은 도움이 됩니다.
|
||||
아직 모든 API가 구현되지 않았기 때문에 확장 기능에서 `chrome.devtools.*` 대신
|
||||
`chrome.*` API를 사용할 경우 확장 기능이 제대로 작동하지 않을 수 있음을 감안해야 합니다.
|
||||
만약 문제가 발생할 경우 Electron의 GitHub 저장소에 관련 이슈를 올리면 해당 API를
|
||||
추가하는데 많은 도움이 됩니다.
|
||||
|
||||
[devtools-extension]: https://developer.chrome.com/extensions/devtools
|
||||
|
|
|
|||
|
|
@ -1,24 +1,26 @@
|
|||
# Mac 앱 스토어 어플리케이션 제출 가이드
|
||||
|
||||
Electron은 v0.34.0 버전부터 앱 패키지를 Mac App Store(MAS)에 제출할 수 있게 되었습니다.
|
||||
이 가이드는 어플리케이션을 앱 스토어에 등록하는 방법과 빌드의 한계에 대한 설명을 제공합니다.
|
||||
Electron은 v0.34.0 버전부터 앱 패키지를 Mac App Store(MAS)에 제출할 수 있게
|
||||
되었습니다. 이 가이드는 어플리케이션을 앱 스토어에 등록하는 방법과 빌드의 한계에 대한
|
||||
설명을 제공합니다.
|
||||
|
||||
## 앱 스토어에 어플리케이션을 등록하는 방법
|
||||
|
||||
다음 몇 가지 간단한 절차에 따라 앱 스토어에 어플리케이션을 등록하는 방법을 알아봅니다.
|
||||
한가지, 이 절차는 제출한 앱이 Apple로부터 승인된다는 것을 확신하지 않습니다.
|
||||
따라서 여전히 Apple의 [Submitting Your App][submitting-your-app] 가이드를 숙지하고 있어야 하며
|
||||
앱 스토어 제출 요구 사항을 확실히 인지하고 있어야합니다.
|
||||
한가지, 이 절차는 제출한 앱이 Apple로부터 승인되는 것을 보장하지 않습니다. 따라서
|
||||
여전히 Apple의 [Submitting Your App][submitting-your-app] 가이드를 숙지하고 있어야
|
||||
하며 앱 스토어 제출 요구 사항을 확실히 인지하고 있어야합니다.
|
||||
|
||||
### 인증서 취득
|
||||
|
||||
앱 스토어에 어플리케이션을 제출하려면, 먼저 Apple로부터 인증서를 취득해야 합니다.
|
||||
취득 방법은 웹에서 찾아볼 수 있는 [가이드][nwjs-guide]를 참고하면 됩니다.
|
||||
앱 스토어에 어플리케이션을 제출하려면, 먼저 Apple로부터 인증서를 취득해야 합니다. 취득
|
||||
방법은 웹에서 찾아볼 수 있는 [가이드][nwjs-guide]를 참고하면 됩니다.
|
||||
|
||||
### 앱에 서명하기
|
||||
|
||||
Apple로부터 인증서를 취득했다면, [어플리케이션 배포](application-distribution.md) 문서에 따라 어플리케이션을 패키징한 후 어플리케이션에 서명 합니다.
|
||||
이 절차는 기본적으로 다른 프로그램과 같습니다. 하지만 키는 Electron 종속성 파일에 각각 따로 서명 해야 합니다.
|
||||
Apple로부터 인증서를 취득했다면, [어플리케이션 배포](application-distribution.md)
|
||||
문서에 따라 어플리케이션을 패키징한 후 어플리케이션에 서명 합니다. 이 절차는 기본적으로
|
||||
다른 프로그램과 같습니다. 하지만 키는 Electron 종속성 파일에 각각 따로 서명 해야 합니다.
|
||||
|
||||
첫번째, 다음 두 자격(plist) 파일을 준비합니다.
|
||||
|
||||
|
|
@ -77,18 +79,20 @@ codesign -fs "$APP_KEY" --entitlements parent.plist "$APP_PATH"
|
|||
productbuild --component "$APP_PATH" /Applications --sign "$INSTALLER_KEY" "$RESULT_PATH"
|
||||
```
|
||||
|
||||
만약 OS X의 샌드박스 개념에 대해 처음 접한다면 Apple의 [Enabling App Sandbox][enable-app-sandbox] 문서를
|
||||
참고하여 기본적인 개념을 이해해야 합니다. 그리고 자격(plist) 파일에 어플리케이션에서 요구하는 권한의 키를 추가합니다.
|
||||
만약 OS X의 샌드박스 개념에 대해 처음 접한다면 Apple의 [Enabling App Sandbox][enable-app-sandbox]
|
||||
문서를 참고하여 기본적인 개념을 이해해야 합니다. 그리고 자격(plist) 파일에
|
||||
어플리케이션에서 요구하는 권한의 키를 추가합니다.
|
||||
|
||||
### 어플리케이션을 업로드하고 심사용 앱으로 제출
|
||||
|
||||
어플리케이션 서명을 완료한 후 iTunes Connect에 업로드하기 위해 Application Loader를 사용할 수 있습니다.
|
||||
참고로 업로드하기 전에 [레코드][create-record]를 만들었는지 확인해야 합니다.
|
||||
그리고 [심사를 위해 앱을 제출][submit-for-review]할 수 있습니다.
|
||||
어플리케이션 서명을 완료한 후 iTunes Connect에 업로드하기 위해 Application Loader를
|
||||
사용할 수 있습니다. 참고로 업로드하기 전에 [레코드][create-record]를 만들었는지
|
||||
확인해야 합니다. 그리고 [심사를 위해 앱을 제출][submit-for-review]할 수 있습니다.
|
||||
|
||||
## MAS 빌드의 한계
|
||||
|
||||
모든 어플리케이션 샌드박스에 대한 요구 사항을 충족시키기 위해, 다음 모듈들은 MAS 빌드에서 비활성화됩니다:
|
||||
모든 어플리케이션 샌드박스에 대한 요구 사항을 충족시키기 위해, 다음 모듈들은 MAS
|
||||
빌드에서 비활성화됩니다:
|
||||
|
||||
* `crash-reporter`
|
||||
* `auto-updater`
|
||||
|
|
@ -99,8 +103,9 @@ productbuild --component "$APP_PATH" /Applications --sign "$INSTALLER_KEY" "$RES
|
|||
* 특정 접근성 기능이 작동하지 않을 수 있습니다.
|
||||
* 어플리케이션이 DNS의 변경을 감지하지 못할 수 있습니다.
|
||||
|
||||
또한 어플리케이션 샌드박스 개념으로 인해 어플리케이션에서 접근할 수 있는 리소스는 엄격하게 제한되어 있습니다.
|
||||
자세한 내용은 [App Sandboxing][app-sandboxing] 문서를 참고하세요.
|
||||
또한 어플리케이션 샌드박스 개념으로 인해 어플리케이션에서 접근할 수 있는 리소스는
|
||||
엄격하게 제한되어 있습니다. 자세한 내용은 [App Sandboxing][app-sandboxing] 문서를
|
||||
참고하세요.
|
||||
|
||||
**역주:** [Mac 앱 배포 가이드 공식 문서](https://developer.apple.com/osx/distribution/kr/)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
# 온라인/오프라인 이벤트 감지
|
||||
|
||||
온라인/오프라인 이벤트는 다음 예제와 같이 랜더러 프로세스에서 표준 HTML5 API를 이용하여 구현할 수 있습니다.
|
||||
온라인/오프라인 이벤트는 다음 예제와 같이 랜더러 프로세스에서 표준 HTML5 API를 이용하여
|
||||
구현할 수 있습니다.
|
||||
|
||||
_main.js_
|
||||
|
||||
|
|
@ -36,10 +37,12 @@ _online-status.html_
|
|||
</html>
|
||||
```
|
||||
|
||||
메인 프로세스에서 이 이벤트를 처리할 필요가 있는 경우 이벤트를 메인 프로세스로 보낼 수 있습니다.
|
||||
메인 프로세스는 `navigator` 객체를 가지고 있지 않기 때문에 이 이벤트를 직접 사용할 수 없습니다.
|
||||
메인 프로세스에서 이 이벤트를 처리할 필요가 있는 경우 이벤트를 메인 프로세스로 보낼 수
|
||||
있습니다. 메인 프로세스는 `navigator` 객체를 가지고 있지 않기 때문에 이 이벤트를 직접
|
||||
사용할 수는 없습니다.
|
||||
|
||||
대신 다음 예제와 같이 Electron의 inter-process communication(ipc) 유틸리티를 사용하면 이벤트를 메인 프로세스로 전달할 수 있습니다.
|
||||
대신 다음 예제와 같이 Electron의 inter-process communication(ipc) 유틸리티를
|
||||
사용하면 이벤트를 메인 프로세스로 전달할 수 있습니다.
|
||||
|
||||
_main.js_
|
||||
|
||||
|
|
|
|||
|
|
@ -2,38 +2,46 @@
|
|||
|
||||
## 소개
|
||||
|
||||
Electron은 자바스크립트와 함께 제공된 풍부한 네이티브 API를 사용하여 멋진 데스크탑 어플리케이션을 만들 수 있도록 해주는 프레임워크입니다.
|
||||
이 프레임워크의 Node.js는 웹 서버 개발이 아닌 데스크탑 어플리케이션 개발에 초점을 맞췄습니다.
|
||||
Electron은 자바스크립트와 함께 제공된 풍부한 네이티브 API를 사용하여 멋진 데스크탑
|
||||
어플리케이션을 만들 수 있도록 해주는 프레임워크입니다. 이 프레임워크의 Node.js는 웹
|
||||
서버 개발이 아닌 데스크탑 어플리케이션 개발에 초점을 맞췄습니다.
|
||||
|
||||
이 말은 Electron이 GUI 라이브러리의 자바스크립트 바인딩이라는 뜻이 아닙니다.
|
||||
대신, Electron은 웹 페이지의 GUI를 사용합니다. 쉽게 말해 Electron은 자바스크립트를 사용하여 조작하는 작은 Chromium 브라우저로 볼 수 있습니다.
|
||||
이 말은 Electron이 GUI 라이브러리의 자바스크립트 바인딩이라는 뜻이 아닙니다. 대신,
|
||||
Electron은 웹 페이지의 GUI를 사용합니다. 쉽게 말해 Electron은 자바스크립트를 사용하여
|
||||
조작하는 작은 Chromium 브라우저로 볼 수 있습니다.
|
||||
|
||||
### 메인 프로세스
|
||||
|
||||
Electron은 실행될 때 __메인 프로세스__로 불리는 `package.json`의 `main` 스크립트를 호출합니다.
|
||||
이 스크립트는 메인 프로세스에서 작동합니다. GUI 컴포넌트를 조작하거나 웹 페이지 창을 생성할 수 있습니다.
|
||||
Electron은 실행될 때 __메인 프로세스__로 불리는 `package.json`의 `main` 스크립트를
|
||||
호출합니다. 이 스크립트는 메인 프로세스에서 작동합니다. GUI 컴포넌트를 조작하거나 웹
|
||||
페이지 창을 생성할 수 있습니다.
|
||||
|
||||
### 랜더러 프로세스
|
||||
|
||||
Electron이 웹페이지를 보여줄 때 Chromium의 multi-processes 구조도 같이 사용됩니다.
|
||||
Electron 프로세스 내에서 작동하는 웹 페이지를 __랜더러 프로세스__ 라고 불립니다.
|
||||
|
||||
보통 일반 브라우저의 웹 페이지들은 샌드박스가 적용된 환경에서 작동하며 네이티브 리소스에는 접근할 수 없도록 되어 있습니다.
|
||||
하지만 Electron은 웹 페이지 내에서 Node.js API를 사용하여 low-level 수준으로 운영체제와 상호작용할 수 있습니다.
|
||||
보통 일반 브라우저의 웹 페이지들은 샌드박스가 적용된 환경에서 작동하며 네이티브
|
||||
리소스에는 접근할 수 없도록 되어 있습니다. 하지만 Electron은 웹 페이지 내에서 Node.js
|
||||
API를 사용하여 low-level 수준으로 운영체제와 상호작용할 수 있습니다.
|
||||
|
||||
### 메인 프로세스와 랜더러 프로세스의 차이점
|
||||
|
||||
메인 프로세스는 `BrowserWindow` Class를 사용하여 새로운 창을 만들 수 있습니다.
|
||||
`BrowserWindow` 인스턴스는 따로 분리된 프로세스에서 랜더링 되며 이 프로세스를 랜더러 프로세스라고 합니다.
|
||||
`BrowserWindow` 인스턴스가 소멸할 때 그 창의 랜더러 프로세스도 같이 소멸합니다.
|
||||
`BrowserWindow` 인스턴스는 따로 분리된 프로세스에서 랜더링 되며 이 프로세스를 랜더러
|
||||
프로세스라고 합니다. `BrowserWindow` 인스턴스가 소멸할 때 그 창의 랜더러 프로세스도
|
||||
같이 소멸합니다.
|
||||
|
||||
메인 프로세스는 모든 웹 페이지와 랜더러 프로세스를 관리하며 랜더러 프로세스는 각각의 프로세스에 고립되며 웹 페이지의 작동에만 영향을 끼칩니다.
|
||||
메인 프로세스는 모든 웹 페이지와 랜더러 프로세스를 관리하며 랜더러 프로세스는 각각의
|
||||
프로세스에 고립되며 웹 페이지의 작동에만 영향을 끼칩니다.
|
||||
|
||||
웹 페이지 내에선 기본적으로 네이티브 GUI와 관련된 API를 호출할 수 없도록 설계 되어 있습니다.
|
||||
왜냐하면 웹 페이지 내에서 네이티브 GUI 리소스를 관리하는 것은 보안에 취약하고 리소스를 누수시킬 수 있기 때문입니다.
|
||||
꼭 웹 페이지 내에서 API를 사용해야 한다면 메인 프로세스에서 그 작업을 처리할 수 있도록 메인 프로세스와 통신을 해야 합니다.
|
||||
웹 페이지 내에선 기본적으로 네이티브 GUI와 관련된 API를 호출할 수 없도록 설계 되어
|
||||
있습니다. 왜냐하면 웹 페이지 내에서 네이티브 GUI 리소스를 관리하는 것은 보안에 취약하고
|
||||
리소스를 누수시킬 수 있기 때문입니다. 꼭 웹 페이지 내에서 API를 사용해야 한다면 메인
|
||||
프로세스에서 그 작업을 처리할 수 있도록 메인 프로세스와 통신을 해야 합니다.
|
||||
|
||||
Electron에는 메인 프로세스와 랜더러 프로세스 사이에 통신을 할 수 있도록 [ipc](../api/ipc-renderer.md) 모듈을 제공하고 있습니다.
|
||||
Electron에는 메인 프로세스와 랜더러 프로세스 사이에 통신을 할 수 있도록
|
||||
[ipc](../api/ipc-renderer.md) 모듈을 제공하고 있습니다.
|
||||
또는 [remote](../api/remote.md) 모듈을 사용하여 RPC 스타일로 통신할 수도 있습니다.
|
||||
|
||||
## 첫번째 Electron 앱 만들기
|
||||
|
|
@ -47,9 +55,9 @@ your-app/
|
|||
└── index.html
|
||||
```
|
||||
|
||||
`package.json`은 node 모듈의 package.json과 같습니다.
|
||||
그리고 `main` 필드에 스크립트 파일을 지정하면 메인 프로세스의 엔트리 포인트로 사용합니다.
|
||||
예를 들어 사용할 수 있는 `package.json`은 다음과 같습니다:
|
||||
`package.json`은 node 모듈의 package.json과 같습니다. 그리고 `main` 필드에 스크립트
|
||||
파일을 지정하면 메인 프로세스의 엔트리 포인트로 사용합니다. 예를 들어 사용할 수 있는
|
||||
`package.json`은 다음과 같습니다:
|
||||
|
||||
```json
|
||||
{
|
||||
|
|
@ -59,9 +67,11 @@ your-app/
|
|||
}
|
||||
```
|
||||
|
||||
__알림__: 만약 `main` 필드가 `package.json`에 설정되어 있지 않으면 Electron은 자동으로 같은 디렉터리의 `index.js`를 로드합니다.
|
||||
__알림__: 만약 `main` 필드가 `package.json`에 설정되어 있지 않으면 Electron은
|
||||
자동으로 같은 디렉터리의 `index.js`를 로드합니다.
|
||||
|
||||
반드시 `main.js`에서 창을 만들고 시스템 이밴트를 처리해야합니다. 대표적인 예제로 다음과 같이 작성할 수 있습니다:
|
||||
반드시 `main.js`에서 창을 만들고 시스템 이밴트를 처리해야합니다. 대표적인 예제로
|
||||
다음과 같이 작성할 수 있습니다:
|
||||
|
||||
```javascript
|
||||
const electron = require('electron');
|
||||
|
|
@ -126,12 +136,14 @@ app.on('ready', function() {
|
|||
|
||||
## 앱 실행하기
|
||||
|
||||
앱을 작성한 후 [어플리케이션 배포](application-distribution.md) 가이드를 따라 앱을 패키징 하고 패키징한 앱을 실행할 수 있습니다.
|
||||
또한 Electron 실행파일을 다운로드 받아 바로 실행해 볼 수도 있습니다.
|
||||
앱을 작성한 후 [어플리케이션 배포](application-distribution.md) 가이드를 따라 앱을
|
||||
패키징 하고 패키징한 앱을 실행할 수 있습니다. 또한 Electron 실행파일을 다운로드 받아
|
||||
바로 실행해 볼 수도 있습니다.
|
||||
|
||||
### electron-prebuilt 사용
|
||||
|
||||
`npm`을 통해 `electron-prebuilt` 패키지를 전역에 설치하면 간단한 명령으로 앱을 실행할 수 있습니다.
|
||||
`npm`을 통해 `electron-prebuilt` 패키지를 전역에 설치하면 간단한 명령으로 앱을
|
||||
실행할 수 있습니다.
|
||||
|
||||
앱 디렉터리 내에서 다음 명령으로 실행할 수 있습니다:
|
||||
|
||||
|
|
@ -178,13 +190,17 @@ $ ./Electron.app/Contents/MacOS/Electron your-app/
|
|||
|
||||
### 배포용 실행 파일 만들기
|
||||
|
||||
어플리케이션 작성을 모두 끝냈다면 [어플리케이션 배포](application-distribution.md) 가이드를 통해 제작한 앱을 패키징하고 배포할 수 있습니다.
|
||||
어플리케이션 작성을 모두 끝냈다면 [어플리케이션 배포](application-distribution.md)
|
||||
가이드를 통해 제작한 앱을 패키징하고 배포할 수 있습니다.
|
||||
|
||||
### 미리 작성된 앱 실행하기
|
||||
|
||||
[`atom/electron-quick-start`](https://github.com/atom/electron-quick-start) 저장소를 클론하면 이 문서에서 작성한 예제 앱을 바로 실행해 볼 수 있습니다.
|
||||
[`atom/electron-quick-start`](https://github.com/atom/electron-quick-start)
|
||||
저장소를 클론하면 이 문서에서 작성한 예제 앱을 바로 실행해 볼 수 있습니다.
|
||||
|
||||
**참고**: 이 예제를 실행시키려면 [Git](https://git-scm.com)과 [Node.js](https://nodejs.org/en/download/)가 필요합니다. (CLI에서 실행 가능한 [npm](https://npmjs.org)이 있어야 합니다)
|
||||
**참고**: 이 예제를 실행시키려면 [Git](https://git-scm.com)과
|
||||
[Node.js](https://nodejs.org/en/download/)가 필요합니다. (CLI에서 실행 가능한
|
||||
[npm](https://npmjs.org)이 있어야 합니다)
|
||||
|
||||
**역주**: `npm`은 보통 Node.js를 설치하면 자동으로 같이 설치됩니다.
|
||||
|
||||
|
|
@ -195,4 +211,4 @@ $ git clone https://github.com/atom/electron-quick-start
|
|||
$ cd electron-quick-start
|
||||
# 어플리케이션의 종속성 모듈을 설치한 후 실행합니다
|
||||
$ npm install && npm start
|
||||
```
|
||||
```
|
||||
|
|
|
|||
|
|
@ -8,18 +8,22 @@ OS X는 64비트 바이너리만 제공됩니다. 그리고 최소 OS X 지원
|
|||
|
||||
### Windows
|
||||
|
||||
Windows 7 이후 버전만 지원됩니다. Windows Vista에서도 작동할 수 있지만 아직 모든 작동 테스트가 완료되지 않았습니다.
|
||||
Windows 7 이후 버전만 지원됩니다. Windows Vista에서도 작동할 수 있지만 아직 모든 작동
|
||||
테스트가 완료되지 않았습니다.
|
||||
|
||||
윈도우용 바이너리는 `x86`과 `x64` 모두 제공됩니다. 그리고 `ARM` 버전 윈도우는 아직 지원하지 않습니다. (역주: 추후 지원할 가능성이 있습니다)
|
||||
윈도우용 바이너리는 `x86`과 `x64` 모두 제공됩니다. 그리고 `ARM` 버전 윈도우는 아직
|
||||
지원하지 않습니다. (역주: 추후 지원할 가능성이 있습니다)
|
||||
|
||||
### Linux
|
||||
|
||||
Ubuntu 12.04 버전에서 빌드된 `ia32`(`i686`), `x64`(`amd64`) 바이너리가 제공됩니다.
|
||||
그리고 `arm` 버전 바이너리는 ARM v7 hard-float ABI와 Debian Wheezy용 NEON에 맞춰 제공됩니다.
|
||||
그리고 `arm` 버전 바이너리는 ARM v7 hard-float ABI와 Debian Wheezy용 NEON에 맞춰
|
||||
제공됩니다.
|
||||
|
||||
미리 빌드된 바이너리가 배포판에서 작동할 수 있는지 여부는 Electron이 빌드된 플랫폼에서 링크된 라이브러리에 따라 달라집니다.
|
||||
그래서 현재 Linux 바이너리는 Ubuntu 12.04 버전만 정상적인 작동이 보장됩니다.
|
||||
하지만 다음 플랫폼들은 미리 빌드된 Electron 바이너리가 정상적으로 작동하는 것을 확인했습니다:
|
||||
미리 빌드된 바이너리가 배포판에서 작동할 수 있는지 여부는 Electron이 빌드된 플랫폼에서
|
||||
링크된 라이브러리에 따라 달라집니다. 그래서 현재 Linux 바이너리는 Ubuntu 12.04 버전만
|
||||
정상적인 작동이 보장됩니다. 하지만 다음 플랫폼들은 미리 빌드된 Electron 바이너리가
|
||||
정상적으로 작동하는 것을 확인했습니다:
|
||||
|
||||
* Ubuntu 12.04 이후 버전
|
||||
* Fedora 21
|
||||
|
|
|
|||
|
|
@ -1,17 +1,22 @@
|
|||
# 네이티브 node 모듈 사용하기
|
||||
|
||||
Electron에선 node.js 네이티브 모듈이 지원됩니다. 하지만 Electron은 공식 node.js의 V8 엔진과는 다른 V8 버전을 사용합니다.
|
||||
이러한 이유로 네이티브 모듈을 사용하기 위해선 Electron의 V8 버전에 맞춰 네이티브 모듈을 다시 빌드하고 헤더를 변경해야 합니다.
|
||||
Electron에선 node.js 네이티브 모듈이 지원됩니다. 하지만 Electron은 공식 node.js의
|
||||
V8 엔진과는 다른 V8 버전을 사용합니다. 이러한 이유로 네이티브 모듈을 사용하기 위해선
|
||||
Electron의 V8 버전에 맞춰 네이티브 모듈을 다시 빌드하고 헤더를 변경해야 합니다.
|
||||
|
||||
## 네이티브 node 모듈 호환성
|
||||
|
||||
네이티브 모듈은 node.js가 새로운 V8 버전을 사용함으로 인해 작동하지 않을 수 있습니다.
|
||||
사용하는 네이티브 모듈이 Electron에 맞춰 작동할 수 있도록 하려면 Electron에서 사용하는 node.js의 버전을 확인할 필요가 있습니다.
|
||||
Electron에서 사용하는 node 버전은 [releases](https://github.com/atom/electron/releases)에서 확인할 수 있으며
|
||||
`process.version`을 출력하여 버전을 확인할 수도 있습니다. ([시작하기](https://github.com/atom/electron/blob/master/docs/tutorial/quick-start.md)의 예제를 참고하세요)
|
||||
사용하는 네이티브 모듈이 Electron에 맞춰 작동할 수 있도록 하려면 Electron에서 사용하는
|
||||
node.js의 버전을 확인할 필요가 있습니다. Electron에서 사용하는 node 버전은
|
||||
[releases](https://github.com/atom/electron/releases)에서 확인할 수 있으며
|
||||
`process.version`을 출력하여 버전을 확인할 수도 있습니다.
|
||||
([시작하기](https://github.com/atom/electron/blob/master/docs/tutorial/quick-start.md)의
|
||||
예제를 참고하세요)
|
||||
|
||||
혹시 직접 만든 네이티브 모듈이 있다면 [NAN](https://github.com/nodejs/nan/) 모듈을 사용하는 것을 고려해보는 것이 좋습니다.
|
||||
이 모듈은 다중 버전의 node.js를 지원하기 쉽게 해줍니다. 이를 통해 오래된 모듈을 새 버전의 node.js에 맞게 포팅할 수 있습니다.
|
||||
혹시 직접 만든 네이티브 모듈이 있다면 [NAN](https://github.com/nodejs/nan/) 모듈을
|
||||
사용하는 것을 고려해보는 것이 좋습니다. 이 모듈은 다중 버전의 node.js를 지원하기 쉽게
|
||||
만들어 줍니다. 이를 통해 오래된 모듈을 새 버전의 node.js에 맞게 포팅 할 수 있습니다.
|
||||
Electron도 이 모듈을 통해 포팅된 네이티브 모듈을 사용할 수 있습니다.
|
||||
|
||||
## 네이티브 모듈을 설치하는 방법
|
||||
|
|
@ -20,9 +25,11 @@ Electron도 이 모듈을 통해 포팅된 네이티브 모듈을 사용할 수
|
|||
|
||||
### 쉬운 방법
|
||||
|
||||
[`electron-rebuild`](https://github.com/paulcbetts/electron-rebuild) 패키지를 사용하면 빠르고 간단하게 네이티브 모듈을 다시 빌드할 수 있습니다.
|
||||
[`electron-rebuild`](https://github.com/paulcbetts/electron-rebuild) 패키지를
|
||||
사용하면 빠르고 간단하게 네이티브 모듈을 다시 빌드할 수 있습니다.
|
||||
|
||||
다음 예제는 `electron-rebuild`를 통해 자동으로 모듈의 헤더를 다운로드하고 네이티브 모듈을 빌드합니다:
|
||||
다음 예제는 `electron-rebuild`를 통해 자동으로 모듈의 헤더를 다운로드하고 네이티브
|
||||
모듈을 빌드합니다:
|
||||
|
||||
```sh
|
||||
npm install --save-dev electron-rebuild
|
||||
|
|
@ -49,12 +56,14 @@ HOME=~/.electron-gyp npm install module-name
|
|||
|
||||
### `node-gyp`를 이용한 방법
|
||||
|
||||
Node 모듈을 `node-gyp`를 사용하여 Electron을 타겟으로 빌드할 때는 `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
|
||||
```
|
||||
|
||||
`HOME=~/.electron-gyp`은 변경할 헤더의 위치를 찾습니다. `--target=0.29.1`은 Electron의 버전입니다.
|
||||
`--dist-url=...`은 헤더를 다운로드 하는 주소입니다. `--arch=x64`는 64비트 시스템을 타겟으로 빌드 한다는 것을 `node-gyp`에게 알려줍니다.
|
||||
`HOME=~/.electron-gyp`은 변경할 헤더의 위치를 찾습니다. `--target=0.29.1`은
|
||||
Electron의 버전입니다. `--dist-url=...`은 헤더를 다운로드 하는 주소입니다.
|
||||
`--arch=x64`는 64비트 시스템을 타겟으로 빌드 한다는 것을 `node-gyp`에게 알려줍니다.
|
||||
|
|
|
|||
|
|
@ -5,12 +5,14 @@ Pepper 플래시 플러그인을 사용하려면 Pepper 플래시 플러그인
|
|||
|
||||
## 플래시 플러그인 준비하기
|
||||
|
||||
크롬 브라우저의 `chrome://plugins` 페이지에 접속한 후 `세부정보`에서 플래시 플러그인의 위치와 버전을 찾을 수 있습니다.
|
||||
Electron에서 플래시 플러그인을 지원하기 위해선 이 두 가지를 복사해 와야 합니다.
|
||||
크롬 브라우저의 `chrome://plugins` 페이지에 접속한 후 `세부정보`에서 플래시
|
||||
플러그인의 위치와 버전을 찾을 수 있습니다. Electron에서 플래시 플러그인을 지원하기
|
||||
위해선 이 두 가지를 복사해 와야 합니다.
|
||||
|
||||
## Electron 스위치 추가
|
||||
|
||||
플러그인을 사용하려면 Electron 커맨드 라인에 `--ppapi-flash-path` 와 `ppapi-flash-version` 플래그를 app의 ready 이벤트가 호출되기 전에 추가해야 합니다.
|
||||
플러그인을 사용하려면 Electron 커맨드 라인에 `--ppapi-flash-path` 와
|
||||
`ppapi-flash-version` 플래그를 app의 ready 이벤트가 호출되기 전에 추가해야 합니다.
|
||||
그리고 `browser-window`에 `plugins` 스위치도 추가해야합니다.
|
||||
|
||||
```javascript
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
# Selenium 과 WebDriver 사용하기
|
||||
|
||||
[ChromeDriver - WebDriver for Chrome][chrome-driver]로 부터 인용:
|
||||
[ChromeDriver - WebDriver for Chrome][chrome-driver]로부터 인용:
|
||||
|
||||
> WebDriver는 많은 브라우저에서 웹 앱을 자동적으로 테스트하는 툴입니다.
|
||||
> 이 툴킷은 웹 페이지를 자동으로 탐색하고 유저 폼을 사용하거나 자바스크립트를 실행하는 등의 작업을 수행할 수 있습니다.
|
||||
> ChromeDriver는 Chromium의 WebDriver wire 프로토콜 스텐드얼론 서버 구현입니다.
|
||||
> Chromium 과 WebDriver 팀 멤버에 의해 개발되었습니다.
|
||||
> 이 툴킷은 웹 페이지를 자동으로 탐색하고 유저 폼을 사용하거나 자바스크립트를 실행하는
|
||||
> 등의 작업을 수행할 수 있습니다. ChromeDriver는 Chromium의 WebDriver wire 프로토콜
|
||||
> 스텐드얼론 서버 구현입니다. Chromium 과 WebDriver 팀 멤버에 의해 개발되었습니다.
|
||||
|
||||
Electron에서 `chromedriver`를 사옹하려면 드라이버에서 Electron을 찾을 수 있도록 해야 하며
|
||||
Electron은 Chrome 브라우저와 비슷하다는 점을 기억해야 합니다.
|
||||
Electron에서 `chromedriver`를 사옹하려면 드라이버에서 Electron을 찾을 수 있도록 해야
|
||||
하며 Electron은 Chrome 브라우저와 비슷하다는 점을 기억해야 합니다.
|
||||
|
||||
## WebDriverJs 설정하기
|
||||
|
||||
[WebDriverJs](https://code.google.com/p/selenium/wiki/WebDriverJs)는 WebDriver를 사용하여 테스트 할 수 있도록 도와주는 node 패키지입니다.
|
||||
다음 예제를 참고하세요.
|
||||
[WebDriverJs](https://code.google.com/p/selenium/wiki/WebDriverJs)는 WebDriver를
|
||||
사용하여 테스트 할 수 있도록 도와주는 node 패키지입니다. 다음 예제를 참고하세요.
|
||||
|
||||
### 1. 크롬 드라이버 시작
|
||||
|
||||
|
|
@ -35,8 +35,9 @@ $ npm install selenium-webdriver
|
|||
|
||||
### 3. 크롬 드라이버에 연결
|
||||
|
||||
`selenium-webdriver`를 Electron과 같이 사용하는 방법은 기본적으로 upstream과 같습니다.
|
||||
한가지 다른점이 있다면 수동으로 크롬 드라이버 연결에 대해 설정하고 Electron 실행파일의 위치를 전달합니다:
|
||||
`selenium-webdriver`를 Electron과 같이 사용하는 방법은 기본적으로 upstream과
|
||||
같습니다. 한가지 다른점이 있다면 수동으로 크롬 드라이버 연결에 대해 설정하고 Electron
|
||||
실행파일의 위치를 전달합니다:
|
||||
|
||||
```javascript
|
||||
const webdriver = require('selenium-webdriver');
|
||||
|
|
@ -67,7 +68,8 @@ driver.quit();
|
|||
|
||||
## WebdriverIO 설정하기
|
||||
|
||||
[WebdriverIO](http://webdriver.io/)는 웹 드라이버와 함께 테스트를 위해 제공되는 node 패키지입니다.
|
||||
[WebdriverIO](http://webdriver.io/)는 웹 드라이버와 함께 테스트를 위해 제공되는
|
||||
node 패키지입니다.
|
||||
|
||||
### 1. 크롬 드라이버 시작
|
||||
|
||||
|
|
@ -103,7 +105,7 @@ var options = {
|
|||
};
|
||||
|
||||
var client = webdriverio.remote(options);
|
||||
|
||||
|
||||
client
|
||||
.init()
|
||||
.url('http://google.com')
|
||||
|
|
@ -117,10 +119,11 @@ client
|
|||
|
||||
## 작업 환경
|
||||
|
||||
따로 Electron을 다시 빌드하지 않는 경우 간단히 어플리케이션을 Electron의 리소스 디렉터리에
|
||||
[배치](application-distribution.md)하여 바로 테스트 할 수 있습니다.
|
||||
따로 Electron을 다시 빌드하지 않는 경우 간단히 어플리케이션을 Electron의 리소스
|
||||
디렉터리에 [배치](application-distribution.md)하여 바로 테스트 할 수 있습니다.
|
||||
|
||||
또한, Electron 바이너리의 명령줄 인수에 어플리케이션 폴더를 지정하는 방법으로 실행할 수도 있습니다.
|
||||
이 방법을 사용하면 어플리케이션 폴더를 Electron의 `resource` 디렉터리로 복사하는 불필요한 과정을 생략할 수 있습니다.
|
||||
또한, Electron 바이너리의 명령줄 인수에 어플리케이션 폴더를 지정하는 방법으로 실행할
|
||||
수도 있습니다. 이 방법을 사용하면 어플리케이션 폴더를 Electron의 `resource`
|
||||
디렉터리로 복사하는 불필요한 과정을 생략할 수 있습니다.
|
||||
|
||||
[chrome-driver]: https://sites.google.com/a/chromium.org/chromedriver/
|
||||
|
|
|
|||
Loading…
Reference in a new issue