Merge pull request #5253 from preco21/master
docs: Update Korean docs as Upstream
This commit is contained in:
commit
c7754e712d
34 changed files with 333 additions and 129 deletions
|
@ -1,10 +1,10 @@
|
|||
# Electron에 기여하기
|
||||
|
||||
:+1::tada: 먼저, 이 프로젝트에 기여해주셔서 감사합니다! :tada::+1:
|
||||
:+1::tada: 먼저, 기여에 관심을 가져주셔서 감사합니다! :tada::+1:
|
||||
|
||||
이 프로젝트는 기여자 규약 [행동강령](CODE_OF_CONDUCT.md)을 준수합니다. 따라서 이
|
||||
이 프로젝트는 기여자 규약인 [행동강령](CODE_OF_CONDUCT.md)을 준수합니다. 따라서 이
|
||||
프로젝트의 개발에 참여하려면 이 규약을 지켜야 합니다. 받아들일 수 없는 행위를 발견했을
|
||||
경우 atom@github.com로 보고 하십시오.
|
||||
경우 atom@github.com로 보고하세요.
|
||||
|
||||
다음 항목들은 Electron에 기여하는 가이드라인을 제시합니다.
|
||||
참고로 이 항목들은 그저 가이드라인에 불과하며 규칙이 아닙니다. 따라서 스스로의 적절한
|
||||
|
@ -29,8 +29,8 @@
|
|||
## Pull Request 하기
|
||||
|
||||
* 가능한한 스크린샷과 GIF 애니메이션 이미지를 pull request에 추가
|
||||
* CoffeeScript, JavaScript, C++과 Python등
|
||||
[참조문서에 정의된 코딩스타일](/docs-translations/ko-KR/development/coding-style.md)을
|
||||
* JavaScript, C++과 Python등
|
||||
[참조 문서에 정의된 코딩스타일](/docs-translations/ko-KR/development/coding-style.md)을
|
||||
준수
|
||||
* [문서 스타일 가이드](/docs-translations/ko-KR/styleguide.md)에 따라 문서를
|
||||
[Markdown](https://daringfireball.net/projects/markdown) 형식으로 작성.
|
||||
|
|
20
README-ko.md
20
README-ko.md
|
@ -1,8 +1,8 @@
|
|||
[![Electron Logo](http://electron.atom.io/images/electron-logo.svg)](http://electron.atom.io/)
|
||||
|
||||
[![Build Status](https://travis-ci.org/atom/electron.svg?branch=master)](https://travis-ci.org/atom/electron)
|
||||
[![Travis Build Status](https://travis-ci.org/electron/electron.svg?branch=master)](https://travis-ci.org/electron/electron)
|
||||
[![AppVeyor Build Status](https://ci.appveyor.com/api/projects/status/qtmod45u0cc1ouov/branch/master?svg=true)](https://ci.appveyor.com/project/Atom/electron)
|
||||
[![devDependency Status](https://david-dm.org/atom/electron/dev-status.svg)](https://david-dm.org/atom/electron#info=devDependencies)
|
||||
[![devDependency Status](https://david-dm.org/electron/electron/dev-status.svg)](https://david-dm.org/electron/electron#info=devDependencies)
|
||||
[![Join the Electron Community on Slack](http://atom-slack.herokuapp.com/badge.svg)](http://atom-slack.herokuapp.com/)
|
||||
|
||||
### [Electron](https://github.com/electron/electron/) 한국어 참조문서
|
||||
|
@ -17,15 +17,15 @@ Cross-Platform 데스크톱 어플리케이션을 개발할 수 있도록 해주
|
|||
Electron에 대한 중요한 알림을 받고 싶다면 Twitter에서
|
||||
[@ElectronJS](https://twitter.com/electronjs)를 팔로우 하세요.
|
||||
|
||||
이 프로젝트는 기여자 규약 [행동강령](CODE_OF_CONDUCT.md)을 준수합니다. 따라서 이
|
||||
이 프로젝트는 기여자 규약인 [행동강령](CODE_OF_CONDUCT.md)을 준수합니다. 따라서 이
|
||||
프로젝트의 개발에 참여하려면 이 규약을 지켜야 합니다. 받아들일 수 없는 행위를 발견했을
|
||||
경우 atom@github.com로 보고 하십시오.
|
||||
경우 atom@github.com로 보고하세요.
|
||||
|
||||
## 다운로드
|
||||
|
||||
Linux, Windows, OS X 용으로 미리 빌드된 Electron 바이너리와 디버그 심볼이 준비되어
|
||||
있습니다. [releases](https://github.com/electron/electron/releases) 페이지에서 받아 볼
|
||||
수 있습니다.
|
||||
있습니다. [releases](https://github.com/electron/electron/releases) 페이지에서
|
||||
받아 볼 수 있습니다.
|
||||
|
||||
또한 [`npm`](https://docs.npmjs.com/)을 통해 미리 빌드된 Electron 바이너리를 설치할
|
||||
수도 있습니다:
|
||||
|
@ -44,9 +44,9 @@ npm install electron-prebuilt --save-dev
|
|||
|
||||
## 참조 문서
|
||||
|
||||
[Docs](https://github.com/electron/electron/tree/master/docs/README.md)에 개발 지침과
|
||||
API 레퍼런스가 있습니다. Electron을 빌드 하는 방법과 프로젝트에 기여하는법 또한 문서에
|
||||
포함되어 있으니 참고하시기 바랍니다.
|
||||
[Docs](https://github.com/electron/electron/tree/master/docs-translations/ko-KR/README.md)에
|
||||
개발 지침과 API 레퍼런스가 있습니다. Electron을 빌드 하는 방법과 프로젝트에 기여하는법
|
||||
또한 문서에 포함되어 있으니 참고하시기 바랍니다.
|
||||
|
||||
## 참조 문서 (번역)
|
||||
|
||||
|
@ -62,7 +62,7 @@ API 레퍼런스가 있습니다. Electron을 빌드 하는 방법과 프로젝
|
|||
|
||||
## 시작하기
|
||||
|
||||
[`atom/electron-quick-start`](https://github.com/electron/electron-quick-start)
|
||||
[`electron/electron-quick-start`](https://github.com/electron/electron-quick-start)
|
||||
저장소를 클론하여 Electron을 간단히 접해볼 수 있습니다.
|
||||
|
||||
## 커뮤니티
|
||||
|
|
|
@ -69,7 +69,7 @@ Electron에 대해 자주 묻는 질문이 있습니다. 이슈를 생성하기
|
|||
* [webContents](api/web-contents.md)
|
||||
* [Tray](api/tray.md)
|
||||
|
||||
### 랜더러 프로세스에서 사용할 수 있는 모듈 (웹 페이지):
|
||||
### 렌더러 프로세스에서 사용할 수 있는 모듈 (웹 페이지):
|
||||
|
||||
* [desktopCapturer](api/desktop-capturer.md)
|
||||
* [ipcRenderer](api/ipc-renderer.md)
|
||||
|
@ -93,4 +93,5 @@ Electron에 대해 자주 묻는 질문이 있습니다. 이슈를 생성하기
|
|||
* [빌드 설명서 (OS X)](development/build-instructions-osx.md)
|
||||
* [빌드 설명서 (Windows)](development/build-instructions-windows.md)
|
||||
* [빌드 설명서 (Linux)](development/build-instructions-linux.md)
|
||||
* [디버거에서 디버그 심볼 서버 설정](development/setting-up-symbol-server.md)
|
||||
* [디버그 설명서 (Windows)](development/debug-instructions-windows.md)
|
||||
* [디버거 심볼 서버 설정](development/setting-up-symbol-server.md)
|
||||
|
|
|
@ -521,6 +521,19 @@ if (browserOptions.transparent) {
|
|||
이 메서드는 시스템이 다크 모드 상태인 경우 `true`를 반환하고 아닐 경우 `false`를
|
||||
반환합니다.
|
||||
|
||||
### `app.importCertificate(options, callback)` _LINUX_
|
||||
|
||||
* `options` Object
|
||||
* `certificate` String - pkcs12 파일의 위치.
|
||||
* `password` String - 인증서의 암호.
|
||||
* `callback` Function
|
||||
* `result` Integer - 가져오기의 결과.
|
||||
|
||||
pkcs12 형식으로된 인증서를 플랫폼 인증서 저장소로 가져옵니다. `callback`은 가져오기의
|
||||
결과를 포함하는 `result` 객체를 포함하여 호출됩니다. 값이 `0` 일 경우 성공을 의미하며
|
||||
다른 값은 모두 Chrominum의 [net_error_list](https://code.google.com/p/chromium/codesearch#chromium/src/net/base/net_error_list.h)에
|
||||
따라 실패를 의미합니다.
|
||||
|
||||
### `app.commandLine.appendSwitch(switch[, value])`
|
||||
|
||||
Chrominum의 명령줄에 스위치를 추가합니다. `value`는 추가적인 값을 뜻하며 옵션입니다.
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
// 메인 프로세스에서
|
||||
const BrowserWindow = require('electron').BrowserWindow;
|
||||
|
||||
// 또는 랜더러 프로세스에서
|
||||
// 또는 렌더러 프로세스에서
|
||||
const BrowserWindow = require('electron').remote.BrowserWindow;
|
||||
|
||||
var win = new BrowserWindow({ width: 800, height: 600, show: false });
|
||||
|
@ -159,7 +159,7 @@ win.show();
|
|||
기본값은 `false`입니다.
|
||||
* `experimentalCanvasFeatures` Boolean - Chrome의 실험적인 캔버스(canvas) 기능을
|
||||
활성화합니다. 기본값은 `false`입니다.
|
||||
* `directWrite` Boolean - Windows에서 폰트 랜더링을 위해 DirectWrite를
|
||||
* `directWrite` Boolean - Windows에서 폰트 렌더링을 위해 DirectWrite를
|
||||
사용하는지를 지정합니다. 기본값은 `true`입니다.
|
||||
* `blinkFeatures` String - `CSSVariables,KeyboardEventKey`같은 `,`로 구분된
|
||||
기능 문자열들의 리스트입니다. 지원하는 전체 기능 문자열들은
|
||||
|
@ -670,6 +670,17 @@ var win = new BrowserWindow({ width: 800, height: 600 });
|
|||
|
||||
**참고:** 웹 페이지의 제목과 네이티브 윈도우의 제목은 서로 다를 수 있습니다.
|
||||
|
||||
### `win.setSheetOffset(offset)` _OS X_
|
||||
|
||||
Mac OS X에서 시트를 부착할 위치를 지정합니다. 기본적으로 시트는 윈도우의 프레임 바로
|
||||
아래의 위치에 부착됩니다. 아마도 이 기능은 보통 다음과 같이 HTML 렌더링된 툴바 밑에
|
||||
표시하기 위해 사용할 것입니다:
|
||||
|
||||
```javascript
|
||||
var toolbarRect = document.getElementById('toolbar').getBoundingClientRect();
|
||||
win.setSheetOffset(toolbarRect.height);
|
||||
```
|
||||
|
||||
### `win.flashFrame(flag)`
|
||||
|
||||
* `flag` Boolean
|
||||
|
@ -900,4 +911,4 @@ Linux 플랫폼에선 Unity 데스크톱 환경만 지원합니다. 그리고
|
|||
|
||||
윈도우에서 일어나는 모든 마우스 이벤트를 무시합니다.
|
||||
|
||||
[blink-feature-string]: https://code.google.com/p/chromium/codesearch#chromium/src/out/Debug/gen/blink/platform/RuntimeEnabledFeatures.cpp&sq=package:chromium&type=cs&l=527
|
||||
[blink-feature-string]: https://code.google.com/p/chromium/codesearch#chromium/src/out/Debug/gen/blink/platform/RuntimeEnabledFeatures.cpp&sq=package:chromium&type=cs&l=576
|
||||
|
|
|
@ -15,10 +15,6 @@ app.on('ready', function() {
|
|||
});
|
||||
```
|
||||
|
||||
## --client-certificate=`path`
|
||||
|
||||
`path`를 클라이언트 인증서로 설정합니다.
|
||||
|
||||
## --ignore-connections-limit=`domains`
|
||||
|
||||
`domains` 리스트(`,`로 구분)의 연결 제한을 무시합니다.
|
||||
|
@ -121,9 +117,9 @@ SSL 암호화를 비활성화할 대상 목록을 지정합니다. (`,`로 구
|
|||
|
||||
## --disable-renderer-backgrounding
|
||||
|
||||
Chromium이 랜더러 프로세스의 보이지 않는 페이지의 우선순위를 낮추는 것을 방지합니다.
|
||||
Chromium이 렌더러 프로세스의 보이지 않는 페이지의 우선순위를 낮추는 것을 방지합니다.
|
||||
|
||||
이 플래그는 전역적이며 모든 랜더러 프로세스에 적용됩니다. 만약 하나의 윈도우창에만
|
||||
이 플래그는 전역적이며 모든 렌더러 프로세스에 적용됩니다. 만약 하나의 윈도우창에만
|
||||
스로틀링을 비활성화하고 싶다면 [조용한 오디오를 재생하는][play-silent-audio] 핵을 사용할
|
||||
수 있습니다.
|
||||
|
||||
|
|
|
@ -42,7 +42,7 @@ crashReporter.start({
|
|||
|
||||
**참고:** OS X에선 Windows와 Linux의 `breakpad`와 달리 새로운 `crashpad`
|
||||
클라이언트를 사용합니다. 오류 수집 기능을 활성화 시키려면 오류를 수집하고 싶은 메인
|
||||
프로세스나 랜더러 프로세스에서 `crashReporter.start` 메서드를 호출하여 `crashpad`를
|
||||
프로세스나 렌더러 프로세스에서 `crashReporter.start` 메서드를 호출하여 `crashpad`를
|
||||
초기화해야 합니다.
|
||||
|
||||
### `crashReporter.getLastCrashReport()`
|
||||
|
|
|
@ -65,13 +65,14 @@ function getUserMediaError(e) {
|
|||
|
||||
`sources`는 `Source` 객체의 배열입니다. 각 `Source`는 캡쳐된 화면과 독립적인
|
||||
윈도우를 표현합니다. 그리고 다음과 같은 속성을 가지고 있습니다:
|
||||
|
||||
* `id` String - `navigator.webkitGetUserMedia` API에서 사용할 수 있는 캡쳐된 윈도우
|
||||
또는 화면의 id입니다. 포맷은 `window:XX` 또는 `screen:XX`로 표현되며 `XX` 는
|
||||
무작위로 생성된 숫자입니다.
|
||||
* `name` String - 캡쳐된 화면과 윈도우에 대해 묘사된 이름입니다. 만약 소스가
|
||||
화면이라면, `Entire Screen` 또는 `Screen <index>`가 될 것이고 소스가 윈도우라면,
|
||||
해당 윈도우의 제목이 반환됩니다.
|
||||
* `thumbnail` [NativeImage](NativeImage.md) - 섬네일 이미지.
|
||||
* `thumbnail` [NativeImage](native-image.md) - 섬네일 네이티브 이미지.
|
||||
|
||||
**참고:** `source.thumbnail`의 크기는 언제나 `options`의 `thumnbailSize`와 같다고
|
||||
보장할 수 없습니다. 섬네일의 크기는 화면과 윈도우의 크기에 의존하여 조정됩니다.
|
||||
|
|
|
@ -12,16 +12,13 @@ const dialog = require('electron').dialog;
|
|||
console.log(dialog.showOpenDialog({ properties: [ 'openFile', 'openDirectory', 'multiSelections' ]}));
|
||||
```
|
||||
|
||||
대화 상자는 Electron의 메인 스레드에서 열립니다. 만약 랜더러 프로세스에서 대화 상자
|
||||
대화 상자는 Electron의 메인 스레드에서 열립니다. 만약 렌더러 프로세스에서 대화 상자
|
||||
객체를 사용하고 싶다면, `remote`를 통해 접근하는 방법을 고려해야 합니다:
|
||||
|
||||
```javascript
|
||||
const dialog = require('electron').remote.dialog;
|
||||
```
|
||||
|
||||
**OS X 참고**: 대화 상자를 시트처럼 보여지게 하려면 `browserWindow` 인자에
|
||||
`BrowserWindow` 객체의 참조를 제공하면 됩니다.
|
||||
|
||||
## Methods
|
||||
|
||||
`dialog` 모듈은 다음과 같은 메서드를 가지고 있습니다:
|
||||
|
@ -116,7 +113,7 @@ const dialog = require('electron').remote.dialog;
|
|||
대화 상자를 표시합니다. `browserWindow`를 지정하면 대화 상자가 완전히 닫힐 때까지
|
||||
지정한 창을 사용할 수 없습니다. 완료 시 유저가 선택한 버튼의 인덱스를 반환합니다.
|
||||
|
||||
역주: 부정을 표현하는 "아니오", "취소"와 같은 한글 단어는 지원되지 않습니다. 만약
|
||||
**역주:** 부정을 표현하는 "아니오", "취소"와 같은 한글 단어는 지원되지 않습니다. 만약
|
||||
OS X 또는 Windows에서 "확인", "취소"와 같은 순서로 버튼을 지정하게 될 때 Alt + f4로
|
||||
해당 대화 상자를 끄게 되면 "확인"을 누른 것으로 판단되어 버립니다. 이를 해결하려면
|
||||
"Cancel"을 대신 사용하거나 BrowserWindow API를 사용하여 대화 상자를 직접 구현해야
|
||||
|
@ -130,4 +127,15 @@ OS X 또는 Windows에서 "확인", "취소"와 같은 순서로 버튼을 지
|
|||
에러 메시지를 보여주는 대화 상자를 표시합니다.
|
||||
|
||||
이 API는 `app` 모듈의 `ready` 이벤트가 발생하기 전에 사용할 수 있습니다. 이 메서드는
|
||||
보통 어플리케이션이 시작되기 전에 특정한 에러를 표시하기 위해 사용됩니다.
|
||||
보통 어플리케이션이 시작되기 전에 특정한 에러를 표시하기 위해 사용됩니다. 만약
|
||||
Linux에서 `ready` 이벤트가 호출되기 이전에 이 API를 호출할 경우, 메시지는 stderr를
|
||||
통해서 표시되며 GUI 대화 상자는 표시되지 않습니다.
|
||||
|
||||
## Sheets
|
||||
|
||||
Mac OS X에선, `browserWindow` 인자에 `BrowserWindow` 객체 참조를 전달하면 대화
|
||||
상자가 해당 윈도우에 시트처럼 표시되도록 표현할 수 있습니다. 윈도우의 객체 참조가
|
||||
제공되지 않으면 모달 형태로 표시됩니다.
|
||||
|
||||
`BrowserWindow.getCurrentWindow().setSheetOffset(offset)`을 통해 윈도우에 부착될
|
||||
시트의 위치를 조정할 수 있습니다.
|
||||
|
|
|
@ -22,6 +22,7 @@ win.webContents.session.on('will-download', function(event, item, webContents) {
|
|||
console.log("Download is cancelled or interrupted that can't be resumed");
|
||||
}
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
## Events
|
||||
|
|
|
@ -1,20 +1,20 @@
|
|||
# ipcMain
|
||||
|
||||
`ipcMain` 모듈은 [EventEmitter](https://nodejs.org/api/events.html) 클래스의
|
||||
인스턴스입니다. 메인 프로세스에서 사용하면, 랜더러 프로세스(웹 페이지)에서 전달된
|
||||
동기, 비동기 메시지를 주고 받는 방법을 제공합니다. 랜더러 프로세스에서 메시지를 전달하면
|
||||
인스턴스입니다. 메인 프로세스에서 사용하면, 렌더러 프로세스(웹 페이지)에서 전달된
|
||||
동기, 비동기 메시지를 주고 받는 방법을 제공합니다. 렌더러 프로세스에서 메시지를 전달하면
|
||||
이 모듈을 통해 메시지를 받을 수 있습니다.
|
||||
|
||||
## 메시지 전송
|
||||
|
||||
물론 메시지를 받는 것 말고도 메인 프로세스에서 랜더러 프로세스로 보내는 것도 가능합니다.
|
||||
물론 메시지를 받는 것 말고도 메인 프로세스에서 렌더러 프로세스로 보내는 것도 가능합니다.
|
||||
자세한 내용은 [webContents.send][web-contents-send]를 참고하세요.
|
||||
|
||||
* 메시지를 전송할 때 이벤트 이름은 `channel`이 됩니다.
|
||||
* 메시지에 동기로 응답할 땐 반드시 `event.returnValue`를 설정해야 합니다.
|
||||
* 메시지를 비동기로 응답할 땐 `event.sender.send(...)` 메서드를 사용할 수 있습니다.
|
||||
|
||||
다음 예제는 랜더러 프로세스와 메인 프로세스간에 메시지를 전달하고 받는 예제입니다:
|
||||
다음 예제는 렌더러 프로세스와 메인 프로세스간에 메시지를 전달하고 받는 예제입니다:
|
||||
|
||||
```javascript
|
||||
// 메인 프로세스
|
||||
|
@ -31,7 +31,7 @@ ipcMain.on('synchronous-message', function(event, arg) {
|
|||
```
|
||||
|
||||
```javascript
|
||||
// 랜더러 프로세스 (웹 페이지)
|
||||
// 렌더러 프로세스 (웹 페이지)
|
||||
const ipcRenderer = require('electron').ipcRenderer;
|
||||
console.log(ipc.sendSync('synchronous-message', 'ping')); // "pong" 출력
|
||||
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
# ipcRenderer
|
||||
|
||||
`ipcRenderer` 모듈은 [EventEmitter](https://nodejs.org/api/events.html) 클래스의
|
||||
인스턴스입니다. 랜더러 프로세스에서 메인 프로세스로 동기/비동기 메시지를 주고 받는
|
||||
인스턴스입니다. 렌더러 프로세스에서 메인 프로세스로 동기/비동기 메시지를 주고 받는
|
||||
방법을 제공합니다. 또한 메인 프로세스로부터 받은 메시지에 응답할 수도 있습니다.
|
||||
|
||||
[ipcMain](ipc-main.md)에서 코드 예제를 확인할 수 있습니다.
|
||||
|
@ -71,7 +71,7 @@
|
|||
메인 프로세스는 `ipcMain` 모듈을 통해 `channel` 이벤트를 리스닝 할 수 있고,
|
||||
`event.returnValue`로 회신 할 수 있습니다.
|
||||
|
||||
**참고:** 동기 메서드는 모든 랜더러 프로세스의 작업을 일시 중단시킵니다. 사용 목적이
|
||||
**참고:** 동기 메서드는 모든 렌더러 프로세스의 작업을 일시 중단시킵니다. 사용 목적이
|
||||
확실하지 않다면 사용하지 않는 것이 좋습니다.
|
||||
|
||||
### `ipcRenderer.sendToHost(channel[, arg1][, arg2][, ...])`
|
||||
|
|
|
@ -62,6 +62,9 @@ OS X에서의 `role`은 다음 값을 추가로 가질 수 있습니다:
|
|||
* `help` - 부 메뉴를 가지는 "Help" 메뉴
|
||||
* `services` - 부 메뉴를 가지는 "Services" 메뉴
|
||||
|
||||
OS X에서는 `role`을 지정할 때, `label`과 `accelerator`만 MenuItem에 효과가
|
||||
적용되도록 변경되며, 다른 옵션들은 모두 무시됩니다.
|
||||
|
||||
## Instance Properties
|
||||
|
||||
다음 속성들은 존재하는 `MenuItem`에서 계속 변경될 수 있습니다:
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
# Menu
|
||||
|
||||
`menu` 클래스는 어플리케이션 메뉴와 [컨텍스트 메뉴](https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/PopupGuide/ContextMenus)를
|
||||
만들 때 사용됩니다. 이 모듈은 메인 프로세스용 모듈이지만 `remote` 모듈을 통해 랜더러
|
||||
만들 때 사용됩니다. 이 모듈은 메인 프로세스용 모듈이지만 `remote` 모듈을 통해 렌더러
|
||||
프로세스에서도 사용할 수 있습니다.
|
||||
|
||||
각 메뉴는 여러 개의 [메뉴 아이템](menu-item.md)으로 구성되고 서브 메뉴를 가질 수도 있습니다.
|
||||
|
@ -29,7 +29,7 @@ window.addEventListener('contextmenu', function (e) {
|
|||
</script>
|
||||
```
|
||||
|
||||
또 하나의 예를 들자면 다음 예제는 랜더러 프로세스에서 template API를 사용하여
|
||||
또 하나의 예를 들자면 다음 예제는 렌더러 프로세스에서 template API를 사용하여
|
||||
어플리케이션 메뉴를 만듭니다:
|
||||
|
||||
```javascript
|
||||
|
@ -106,7 +106,7 @@ var template = [
|
|||
})(),
|
||||
click: function(item, focusedWindow) {
|
||||
if (focusedWindow)
|
||||
focusedWindow.toggleDevTools();
|
||||
focusedWindow.webContents.toggleDevTools();
|
||||
}
|
||||
},
|
||||
]
|
||||
|
|
|
@ -9,6 +9,8 @@ Electron의 `process` 객체는 기존의 node와는 달리 약간의 차이점
|
|||
* `process.resourcesPath` String - JavaScript 소스 코드의 경로.
|
||||
* `process.mas` Boolean - Mac 앱 스토어용 빌드일 때 `true`로 지정됩니다. 다른
|
||||
빌드일 땐 `undefined`로 지정됩니다.
|
||||
* `process.windowsStore` Boolean - 만약 앱이 Windows Store 앱 (appx)으로 작동하고
|
||||
있다면, 이 값이 `true`로 지정되며 다른 빌드인 경우엔 `undefined`로 지정됩니다.
|
||||
|
||||
## Events
|
||||
|
||||
|
|
|
@ -1,15 +1,15 @@
|
|||
# remote
|
||||
|
||||
`remote` 모듈은 메인 프로세스와 랜더러 프로세스(웹 페이지) 사이의 inter-process
|
||||
`remote` 모듈은 메인 프로세스와 렌더러 프로세스(웹 페이지) 사이의 inter-process
|
||||
(IPC) 통신을 간단하게 추상화 한 모듈입니다.
|
||||
|
||||
Electron의 메인 프로세스에선 GUI와 관련 있는(`dialog`, `menu`등) 모듈만 사용할 수
|
||||
있습니다. 랜더러 프로세스에서 이러한 모듈들을 사용하려면 `ipc` 모듈을 통해 메인
|
||||
있습니다. 렌더러 프로세스에서 이러한 모듈들을 사용하려면 `ipc` 모듈을 통해 메인
|
||||
프로세스와 inter-process 통신을 해야 합니다. 또한, `remote` 모듈을 사용하면
|
||||
inter-process 통신을 하지 않고도 간단한 API를 통해 직접 메인 프로세스의 모듈과
|
||||
메서드를 사용할 수 있습니다. 이 개념은 Java의 [RMI][rmi]와 비슷합니다.
|
||||
|
||||
다음 예제는 랜더러 프로세스에서 브라우저 창을 만드는 예제입니다:
|
||||
다음 예제는 렌더러 프로세스에서 브라우저 창을 만드는 예제입니다:
|
||||
|
||||
```javascript
|
||||
const remote = require('electron').remote;
|
||||
|
@ -19,7 +19,7 @@ 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 객체
|
||||
|
@ -30,8 +30,8 @@ win.loadURL('https://github.com');
|
|||
동기형 inter-process 메시지를 보냅니다.
|
||||
|
||||
위의 예제에서 사용한 두 `BrowserWindow`와 `win`은 remote 객체입니다. 그리고
|
||||
`new BrowserWindow`이 생성하는 `BrowserWindow` 객체는 랜더러 프로세스에서 생성되지
|
||||
않습니다. 대신에 이 `BrowserWindow` 객체는 메인 프로세스에서 생성되며 랜더러
|
||||
`new BrowserWindow`이 생성하는 `BrowserWindow` 객체는 렌더러 프로세스에서 생성되지
|
||||
않습니다. 대신에 이 `BrowserWindow` 객체는 메인 프로세스에서 생성되며 렌더러
|
||||
프로세스에 `win` 객체와 같이 이에 대응하는 remote 객체를 반환합니다.
|
||||
|
||||
참고로 remote를 통해선 [enumerable 속성](https://developer.mozilla.org/ko/docs/Web/JavaScript/Enumerability_and_ownership_of_properties)을
|
||||
|
@ -39,11 +39,11 @@ win.loadURL('https://github.com');
|
|||
|
||||
## Remote 객체의 생명 주기
|
||||
|
||||
Electron은 랜더러 프로세스의 remote 객체가 살아있는 한(다시 말해서 GC(garbage
|
||||
Electron은 렌더러 프로세스의 remote 객체가 살아있는 한(다시 말해서 GC(garbage
|
||||
collection)가 일어나지 않습니다) 대응하는 메인 프로세스의 객체는 릴리즈되지 않습니다.
|
||||
Remote 객체가 GC 되려면 대응하는 메인 프로세스 내부 객체의 참조가 해제되어야만 합니다.
|
||||
|
||||
만약 remote 객체가 랜더러 프로세스에서 누수가 생겼다면 (예시: 맵에 저장하고 할당
|
||||
만약 remote 객체가 렌더러 프로세스에서 누수가 생겼다면 (예시: 맵에 저장하고 할당
|
||||
해제하지 않음) 대응하는 메인 프로세스의 객체도 누수가 생깁니다. 그래서 remote 객체를
|
||||
사용할 땐 메모리 누수가 생기지 않도록 매우 주의해서 사용해야 합니다.
|
||||
|
||||
|
@ -51,14 +51,14 @@ Remote 객체가 GC 되려면 대응하는 메인 프로세스 내부 객체의
|
|||
|
||||
## 메인 프로세스로 콜백 넘기기
|
||||
|
||||
메인 프로세스의 코드는 `remote` 모듈을 통해 랜더러 프로세스가 전달하는 콜백 함수를
|
||||
메인 프로세스의 코드는 `remote` 모듈을 통해 렌더러 프로세스가 전달하는 콜백 함수를
|
||||
받을 수 있습니다. 하지만 이 작업은 반드시 주의를 기울여 사용해야 합니다.
|
||||
|
||||
첫째, 데드락을 피하기 위해 메인 프로세스로 전달된 콜백들은 비동기로 호출됩니다. 이러한
|
||||
이유로 메인 프로세스로 전달된 콜백들의 반환 값을 내부 함수에서 언제나 정상적으로 받을
|
||||
것이라고 예측해선 안됩니다.
|
||||
|
||||
예를 들어 메인 프로세스에서 `Array.map` 같은 메서드를 사용할 때 랜더러 프로세스에서
|
||||
예를 들어 메인 프로세스에서 `Array.map` 같은 메서드를 사용할 때 렌더러 프로세스에서
|
||||
전달된 함수를 사용해선 안됩니다:
|
||||
|
||||
```javascript
|
||||
|
@ -75,7 +75,7 @@ exports.withLocalCallback = function() {
|
|||
```
|
||||
|
||||
```javascript
|
||||
// 랜더러 프로세스
|
||||
// 렌더러 프로세스
|
||||
var mapNumbers = require("remote").require("./mapNumbers");
|
||||
|
||||
var withRendererCb = mapNumbers.withRendererCallback(function(x) {
|
||||
|
@ -87,7 +87,7 @@ var withLocalCb = mapNumbers.withLocalCallback()
|
|||
console.log(withRendererCb, withLocalCb) // [true, true, true], [2, 3, 4]
|
||||
```
|
||||
|
||||
보다시피 랜더러 콜백의 동기 반환 값은 예상되지 않은 처리입니다.
|
||||
보다시피 렌더러 콜백의 동기 반환 값은 예상되지 않은 처리입니다.
|
||||
그리고 메인 프로세스에서 처리한 함수의 반환 값과 일치하지 않습니다.
|
||||
|
||||
둘째, 콜백들은 메인 프로세스로 전달, 호출된 이후에도 자동으로 함수의 참조가 릴리즈 되지
|
||||
|
@ -113,9 +113,9 @@ remote.getCurrentWindow().on('close', function() {
|
|||
설상가상으로 이전에 설치된 콜백의 콘텍스트가 릴리즈 되고 난 후(예: 페이지 새로고침)
|
||||
`close` 이벤트가 발생하면 예외가 발생하고 메인 프로세스가 작동 중지됩니다.
|
||||
|
||||
이러한 문제를 피하려면 랜더러 프로세스에서 메인 프로세스로 넘긴 함수의 참조를 사용 후
|
||||
이러한 문제를 피하려면 렌더러 프로세스에서 메인 프로세스로 넘긴 함수의 참조를 사용 후
|
||||
확실하게 제거해야 합니다. 작업 후 이벤트 콜백을 포함하여 책임 있게 함수의 참조를
|
||||
제거하거나 메인 프로세스에서 랜더러 프로세스가 종료될 때 내부적으로 함수 참조를
|
||||
제거하거나 메인 프로세스에서 렌더러 프로세스가 종료될 때 내부적으로 함수 참조를
|
||||
제거하도록 설계해야 합니다.
|
||||
|
||||
## 메인 프로세스의 빌트인 모듈에 접근
|
||||
|
|
|
@ -1,12 +1,13 @@
|
|||
# screen
|
||||
|
||||
`screen` 모듈은 화면 크기, 디스플레이, 커서 위치 등등의 다양한 정보를 가져옵니다.
|
||||
이 모듈은 `app` 모듈의 `ready` 이벤트가 발생하기 전까지 사용할 수 없습니다.
|
||||
이 모듈은 `app` 모듈의 `ready` 이벤트가 발생하기 전까지 사용할 수 없습니다. (호출 또는
|
||||
모듈 포함)
|
||||
|
||||
`screen`은 [EventEmitter](http://nodejs.org/api/events.html#events_class_events_eventemitter)를
|
||||
상속 받았습니다.
|
||||
|
||||
**참고:** 랜더러 / DevTools에선 이미 DOM 속성이 `window.screen`을 가지고 있으므로
|
||||
**참고:** 렌더러 / DevTools에선 이미 DOM 속성이 `window.screen`을 가지고 있으므로
|
||||
`screen = require('screen')` 형식으로 모듈을 사용할 수 없습니다. 아래의 예제와 같이
|
||||
`electronScreen` 같은 이름으로 모듈 이름을 대체하여 사용해야 합니다.
|
||||
|
||||
|
|
|
@ -293,9 +293,9 @@ myWindow.webContents.session.setCertificateVerifyProc(function(hostname, cert, c
|
|||
|
||||
* `handler` Function
|
||||
* `webContents` Object - [WebContents](web-contents.md) 권한을 요청.
|
||||
* `permission` String - 'media', 'geolocation', 'notifications',
|
||||
'midiSysex', 'pointerLock', 'fullscreen'의 나열.
|
||||
* `callback` Function - 권한 허용 및 거부.
|
||||
* `permission` String - 'media', 'geolocation', 'notifications',
|
||||
'midiSysex', 'pointerLock', 'fullscreen', 'openExternal'의 나열.
|
||||
* `callback` Function - 권한 허용 및 거부.
|
||||
|
||||
`session`의 권한 요청에 응답을 하는데 사용하는 핸들러를 설정합니다.
|
||||
`callback(true)`를 호출하면 권한 제공을 허용하고 `callback(false)`를
|
||||
|
@ -419,7 +419,7 @@ HTTP 요청을 보내기 전 요청 헤더를 사용할 수 있을 때 `listener
|
|||
* `timestamp` Double
|
||||
* `requestHeaders` Object
|
||||
|
||||
#### `ses.webRequest.onHeadersReceived([filter,] listener)`
|
||||
#### `ses.webRequest.onHeadersReceived([filter, ]listener)`
|
||||
|
||||
* `filter` Object
|
||||
* `listener` Function
|
||||
|
|
|
@ -36,14 +36,12 @@ shell.openExternal('https://github.com');
|
|||
mailto: URL은 유저의 기본 이메일 에이전트로 URL을 엽니다.) 어플리케이션이 해당 URL을
|
||||
열 수 있을 때 `true`를 반환합니다. 아니라면 `false`를 반환합니다.
|
||||
|
||||
역주: 폴더는 'file:\\\\C:\\'와 같이 지정하여 열 수 있습니다. (Windows의 경우)
|
||||
**역주:** 탐색기로 폴더만 표시하려면 `'file://경로'`와 같이 지정하여 열 수 있습니다.
|
||||
|
||||
### `shell.moveItemToTrash(fullPath)`
|
||||
|
||||
* `fullPath` String
|
||||
|
||||
Move the given file to trash and returns boolean status for the operation.
|
||||
|
||||
지정한 파일을 휴지통으로 이동합니다. 작업의 성공여부를 boolean 형으로 리턴합니다.
|
||||
|
||||
### `shell.beep()`
|
||||
|
|
|
@ -5,12 +5,12 @@ node 모듈을 완벽하게 지원합니다. ([네이티브 모듈](../tutorial/
|
|||
포함)
|
||||
|
||||
또한 Electron은 네이티브 데스크톱 어플리케이션을 개발 할 수 있도록 추가적인 built-in
|
||||
모듈을 제공합니다. 몇몇 모듈은 메인 프로세스에서만 사용할 수 있고 어떤 모듈은 랜더러
|
||||
모듈을 제공합니다. 몇몇 모듈은 메인 프로세스에서만 사용할 수 있고 어떤 모듈은 렌더러
|
||||
프로세스(웹 페이지)에서만 사용할 수 있습니다. 또한 두 프로세스 모두 사용할 수 있는
|
||||
모듈도 있습니다.
|
||||
|
||||
기본적인 규칙으로 [GUI][gui]와 저 수준 시스템에 관련된 모듈들은 오직 메인
|
||||
프로세스에서만 사용할 수 있습니다. [메인 프로세스 vs. 랜더러 프로세스](../tutorial/quick-start.md#메인-프로세스)
|
||||
프로세스에서만 사용할 수 있습니다. [메인 프로세스 vs. 렌더러 프로세스](../tutorial/quick-start.md#메인-프로세스)
|
||||
컨셉에 익숙해야 모듈을 다루기 쉬우므로 관련 문서를 읽어 보는 것을 권장합니다.
|
||||
|
||||
메인 프로세스 스크립트는 일반 Node.js 스크립트와 비슷합니다:
|
||||
|
@ -28,7 +28,7 @@ app.on('ready', function() {
|
|||
});
|
||||
```
|
||||
|
||||
랜더러 프로세스도 예외적인 node module들을 사용할 수 있다는 점을 제외하면 일반 웹
|
||||
렌더러 프로세스도 예외적인 node module들을 사용할 수 있다는 점을 제외하면 일반 웹
|
||||
페이지와 크게 다를게 없습니다:
|
||||
|
||||
```html
|
||||
|
|
|
@ -350,6 +350,10 @@ var currentURL = win.webContents.getURL();
|
|||
|
||||
현재 웹 페이지가 리소스를 로드중인지 여부를 반환합니다.
|
||||
|
||||
### `webContents.isLoadingMainFrame()`
|
||||
|
||||
메인 프레임이 여전히 로딩중인지 여부를 반환합니다. (내부 iframe 또는 frame 포함)
|
||||
|
||||
### `webContents.isWaitingForResponse()`
|
||||
|
||||
현재 웹 페이지가 페이지의 메인 리소스로부터 첫 응답을 기다리고있는지 여부를 반환합니다.
|
||||
|
@ -640,6 +644,9 @@ mainWindow.webContents.on('devtools-opened', function() {
|
|||
|
||||
* `options` Object (optional)
|
||||
* `detach` Boolean - 새 창에서 개발자 도구를 엽니다.
|
||||
* `mode` String - 개발자 도구 표시 상태를 지정합니다. 옵션은 "right", "bottom",
|
||||
"undocked", "detach" 중 한 가지가 될 수 있습니다. 기본값은 마지막 표시 상태를
|
||||
사용합니다.
|
||||
|
||||
개발자 도구를 엽니다.
|
||||
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
# webFrame
|
||||
|
||||
`web-frame` 모듈은 현재 웹 페이지의 랜더링 상태를 설정 할 수 있도록 관련 유틸리티를
|
||||
`web-frame` 모듈은 현재 웹 페이지의 렌더링 상태를 설정 할 수 있도록 관련 유틸리티를
|
||||
제공하는 모듈입니다.
|
||||
|
||||
다음 예제는 현재 페이지를 200% 줌 합니다:
|
||||
|
|
|
@ -20,12 +20,6 @@
|
|||
<webview id="foo" src="https://www.github.com/" style="display:inline-flex; width:640px; height:480px"></webview>
|
||||
```
|
||||
|
||||
주의할 점은 `webview` 태그의 스타일은 전통적인 flexbox 레이아웃을 사용했을 때 자식
|
||||
`object` 요소가 해당 `webview` 컨테이너의 전체 높이와 넓이를 확실히 채우도록
|
||||
내부적으로 `display:flex;`를 사용합니다. (v0.36.11 부터) 따라서 인라인 레이아웃을
|
||||
위해 `display:inline-flex;`를 쓰지 않는 한, 기본 `display:flex;` CSS 속성을
|
||||
덮어쓰지 않도록 주의해야 합니다.
|
||||
|
||||
게스트 컨텐츠를 조작하기 위해 자바스크립트로 `webview` 태그의 이벤트를 리스닝 하여
|
||||
응답을 받을 수 있습니다. 다음 예제를 참고하세요: 첫번째 리스너는 페이지 로딩 시작시의
|
||||
이벤트를 확인하고 두번째 리스너는 페이지의 로딩이 끝난시점을 확인합니다. 그리고
|
||||
|
@ -49,6 +43,36 @@
|
|||
</script>
|
||||
```
|
||||
|
||||
## CSS 스타일링 참고
|
||||
|
||||
주의할 점은 `webview` 태그의 스타일은 전통적인 flexbox 레이아웃을 사용했을 때 자식
|
||||
`object` 요소가 해당 `webview` 컨테이너의 전체 높이와 넓이를 확실히 채우도록
|
||||
내부적으로 `display:flex;`를 사용합니다. (v0.36.11 부터) 따라서 인라인 레이아웃을
|
||||
위해 `display:inline-flex;`를 쓰지 않는 한, 기본 `display:flex;` CSS 속성을
|
||||
덮어쓰지 않도록 주의해야 합니다.
|
||||
|
||||
`webview`는 `hidden` 또는 `display: none;` 속성을 사용할 때 발생하는 문제를 한 가지
|
||||
가지고 있습니다. 자식 `browserplugin` 객체 내에서 비정상적인 랜더링 동작을 발생시킬 수
|
||||
있으며 웹 페이지가 로드되었을 때, `webview`가 숨겨지지 않았을 때, 반대로 그냥 바로
|
||||
다시 보이게 됩니다. `webview`를 숨기는 방법으로 가장 권장되는 방법은 `width` &
|
||||
`height`를 0으로 지정하는 CSS를 사용하는 것이며 `flex`를 통해 0px로 요소를 수축할 수
|
||||
있도록 합니다.
|
||||
|
||||
```html
|
||||
<style>
|
||||
webview {
|
||||
display:inline-flex;
|
||||
width:640px;
|
||||
height:480px;
|
||||
}
|
||||
webview.hide {
|
||||
flex: 0 1;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## 태그 속성
|
||||
|
||||
`webview` 태그는 다음과 같은 속성을 가지고 있습니다:
|
||||
|
@ -149,7 +173,7 @@ API를 사용할 수 있습니다. 이를 지정하면 내부에서 로우레벨
|
|||
동일한 세션을 공유할 수 있도록 할 수 있습니다. 만약 `partition`이 지정되지 않으면 앱의
|
||||
기본 세션을 사용합니다.
|
||||
|
||||
이 값은 첫 탐색 이전에만 지정할 수 있습니다. 즉. 작동중인 랜더러 프로세스의 세션은
|
||||
이 값은 첫 탐색 이전에만 지정할 수 있습니다. 즉. 작동중인 렌더러 프로세스의 세션은
|
||||
변경할 수 없습니다. 이후 이 값을 바꾸려고 시도하면 DOM 예외를 발생시킵니다.
|
||||
|
||||
### `allowpopups`
|
||||
|
@ -263,7 +287,7 @@ Webview에 웹 페이지 `url`을 로드합니다. `url`은 `http://`, `file://`
|
|||
|
||||
### `<webview>.isCrashed()`
|
||||
|
||||
랜더러 프로세스가 크래시 됬는지 확인합니다.
|
||||
렌더러 프로세스가 크래시 됬는지 확인합니다.
|
||||
|
||||
### `<webview>.setUserAgent(userAgent)`
|
||||
|
||||
|
@ -294,7 +318,7 @@ Webview에 웹 페이지 `url`을 로드합니다. `url`은 `http://`, `file://`
|
|||
이 옵션을 활성화 시키면 `requestFullScreen`와 같은 HTML API에서 유저의 승인을
|
||||
무시하고 개발자가 API를 바로 사용할 수 있도록 허용합니다.
|
||||
|
||||
역주: 기본적으로 브라우저에선 전체화면, 웹캠, 파일 열기등의 API를 사용하려면 유저의
|
||||
**역주:** 기본적으로 브라우저에선 전체화면, 웹캠, 파일 열기등의 API를 사용하려면 유저의
|
||||
승인(이벤트)이 필요합니다.
|
||||
|
||||
### `<webview>.openDevTools()`
|
||||
|
@ -423,8 +447,8 @@ Webview 페이지를 PDF 형식으로 인쇄합니다.
|
|||
* `channel` String
|
||||
* `args` (optional)
|
||||
|
||||
`channel`을 통해 랜더러 프로세스로 비동기 메시지를 보냅니다. 또한 `args`를 지정하여
|
||||
임의의 인자를 보낼 수도 있습니다. 랜더러 프로세스는 `ipcRenderer` 모듈의 `channel`
|
||||
`channel`을 통해 렌더러 프로세스로 비동기 메시지를 보냅니다. 또한 `args`를 지정하여
|
||||
임의의 인자를 보낼 수도 있습니다. 렌더러 프로세스는 `ipcRenderer` 모듈의 `channel`
|
||||
이벤트로 이 메시지를 받아 처리할 수 있습니다.
|
||||
|
||||
예제는 [webContents.send](web-contents.md#webcontentssendchannel-args)를 참고하세요.
|
||||
|
@ -469,9 +493,10 @@ Returns:
|
|||
* `errorCode` Integer
|
||||
* `errorDescription` String
|
||||
* `validatedURL` String
|
||||
* `isMainFrame` Boolean
|
||||
|
||||
`did-finish-load`와 비슷합니다. 하지만 이 이벤트는 `window.stop()`과 같은 무언가로
|
||||
인해 로드에 실패했을 때 발생하는 이벤트입니다.
|
||||
`did-finish-load`와 비슷합니다. 하지만 이 이벤트는 `window.stop()`과 같이 취소
|
||||
함수가 호출되었거나 로드에 실패했을 때 발생하는 이벤트입니다.
|
||||
|
||||
### Event: 'did-frame-finish-load'
|
||||
|
||||
|
@ -696,7 +721,7 @@ ipcRenderer.on('ping', function() {
|
|||
|
||||
### Event: 'crashed'
|
||||
|
||||
랜더러 프로세스가 크래시 되었을 때 발생하는 이벤트입니다.
|
||||
렌더러 프로세스가 크래시 되었을 때 발생하는 이벤트입니다.
|
||||
|
||||
### Event: 'gpu-crashed'
|
||||
|
||||
|
@ -725,6 +750,10 @@ WebContents가 파괴될 때 발생하는 이벤트입니다.
|
|||
|
||||
### Event: 'did-change-theme-color'
|
||||
|
||||
Returns:
|
||||
|
||||
* `themeColor` String
|
||||
|
||||
페이지의 테마 색이 변경될 때 발생하는 이벤트입니다. 이 이벤트는 보통 meta 태그에
|
||||
의해서 발생합니다:
|
||||
|
||||
|
|
|
@ -0,0 +1,87 @@
|
|||
# Windows에서 Electron 디버깅하기
|
||||
|
||||
만약 작성한 Javascript 어플리케이션이 아닌 Electron 자체의 크래시나 문제를 경험하고
|
||||
있다면, 네이티브/C++ 디버깅에 익숙하지 않은 개발자는 디버깅이 약간 까다로울 수
|
||||
있습니다. 그렇다 해도, Visual Studio, GitHub의 Electron이 호스팅하는 심볼 서버,
|
||||
Electron 소스 코드가 중단점을 통해 순차적으로 쉽게 디버깅할 수 있는 환경을 제공합니다.
|
||||
|
||||
## 요구 사항
|
||||
|
||||
* **Electron의 디버그 빌드**: 가장 쉬운 방법은 보통
|
||||
[Windows용 빌드 설명서](build-instructions-windows.md)에 명시된 요구사항과 툴을
|
||||
사용하여 스스로 빌드하는 것입니다. 물론 직접 다운로드 받은 Electron 바이너리에도
|
||||
디버거 연결 및 디버깅을 사용할 수 있지만, 실질적으로 디버깅이 까다롭게 고도의
|
||||
최적화가 되어있음을 발견하게 될 것입니다: 인라인화, 꼬리 호출, 이외 여러 가지
|
||||
생소한 최적화가 적용되어 디버거가 모든 변수와 실행 경로를 정상적으로 표시할 수
|
||||
없습니다.
|
||||
|
||||
* **Visual Studio와 C++ 툴**: Visual Studio 2013과 Visual Studio 2015 두 가지
|
||||
커뮤니티 에디션 모두 잘 작동합니다. 설치가 완료되면,
|
||||
[Visual Studio가 GitHub의 Electron 심볼 서버를 사용하도록](setting-up-symbol-server.md)
|
||||
설정해야 합니다. 이 작업은 Visual Studio가 Electron에서 무슨일이 일어나는지 더 잘
|
||||
이해할 수 있도록 하며 변수를 사람이 읽기 좋은 포맷으로 쉽게 표현할 수 있도록 합니다.
|
||||
|
||||
* **ProcMon**: 이 무료 [SysInternals][sys-internals] 툴은 프로세스 인자, 파일
|
||||
핸들러 그리고 레지스트리 작업을 탐색할 수 있게 도와줍니다.
|
||||
|
||||
## Electron에 디버거 연결하고 디버깅하기
|
||||
|
||||
디버깅 작업을 시작하려면, PowerShell/CMD 중 한 가지를 열고 디버그 빌드 상태의
|
||||
Electron에 인자로 어플리케이션을 전달하여 실행합니다:
|
||||
|
||||
```powershell
|
||||
$ ./out/D/electron.exe ~/my-electron-app/
|
||||
```
|
||||
|
||||
### 중단점 설정
|
||||
|
||||
그리고, Visual Studio를 엽니다. Electron은 Visual Studio로 만들어지지 않았으며
|
||||
이러한 이유로 인해 프로젝트 파일을 가지고 있지 않습니다. 하지만 "파일로 열기"를 통해
|
||||
소스 코드 파일들을 열 수 있습니다. Visual Studio가 각각의 파일을 따로 연다는 것입니다.
|
||||
여전히 중단점을 설정할 수 있습니다. Visual Studio는 현재 소스 코드와 일치하는 작동
|
||||
중인 프로세스와 중단점을 자동으로 찾아냅니다.
|
||||
|
||||
관련된 코드 파일들은 `./atom/`에서 찾을 수 있으며 또한 Brightray 안
|
||||
`./vendor/brightray/browser`와 `./vendor/brightray/common`에서도 찾을 수 있습니다.
|
||||
만약 하드코어를 좋아한다면, Chromium을 직접 디버깅할 수도 있습니다. 확실히
|
||||
`chromium_src` 안에서 찾을 수 있습니다.
|
||||
|
||||
### 디버거 연결
|
||||
|
||||
로컬에서 작동 중인 프로세스 또는 원격 컴퓨터에 Visual Studio 디버거를 적용시킬 수
|
||||
있습니다. 프로세스의 실행이 끝난 후, 디버그 / 프로세스에 연결을 (또는 `Ctrl+Alt+P`
|
||||
입력) 클릭하면 "프로세스에 연결" 대화 상자가 열립니다. 이 도구를 통해 로컬 또는
|
||||
원격에서 작동 중인 어플리케이션을 디버깅할 수 있으며 여러 프로세스를 동시에 디버깅할
|
||||
수도 있습니다.
|
||||
|
||||
만약 Electron이 서로 다른 유저 계정에서 실행 중이라면, `모든 사용자의 프로세스
|
||||
보이기`를 선택하면 됩니다. 참고로 이는 `BrowserWindow`가 열린 개수에 따라 달라질 수
|
||||
있으며 아마 다수의 프로세스를 발견할 수 있을 것입니다. 전형적인 one-window
|
||||
어플리케이션은 Visual Studio에서 두 개의 `Electron.exe` 항목으로 표시됩니다. 하나는
|
||||
메인 프로세스이며 다른 하나는 렌더러 프로세스입니다. 리스트는 단지 이름 하나만 제공하기
|
||||
때문에 현재까지는 다른 적절한 프로세스 판별법이 없습니다.
|
||||
|
||||
### 어떤 프로세스에 디버거를 적용해야 하나요?
|
||||
|
||||
코드는 메인 프로세스 내에서 실행되며 (이는 코드를 안에서 찾을 수 있거나, 결국 메인
|
||||
Javascript 파일에 의해 실행) remote (`require('electron').remote`)를 사용하여
|
||||
코드를 실행하는 것 또한 메인 프로세스 내에서 실행됩니다. 다른 코드는 각각의 렌더러
|
||||
프로세스 내에서 실행됩니다.
|
||||
|
||||
디버깅할 때 여러 프로그램에 디버거를 적용할 수 있지만, 언제나 한 개의 프로그램만
|
||||
디버거에서 활성화되어야 합니다. `디버그 경로` 툴바 또는 `프로세스 창`에서 활성화
|
||||
프로그램을 설정할 수 있습니다.
|
||||
|
||||
## 프로세스를 관찰하기 위해 ProcMon 사용
|
||||
|
||||
Visual Studio는 특정 코드 경로를 탐색하는것에 대해 환상적인 기능을 제공하고 ProcMon은
|
||||
어플리케이션이 운영체제와 하는 일의 모든 것을 관찰하는데 강력한 기능을 가지고 있습니다.
|
||||
이 툴은 프로세스의 파일, 레지스트리, 네트워킹, 프로세스, 프로파일링 상세를 포착할 수
|
||||
있으며 강력하게 **모든** 이벤트의 발생을 로깅을 시도합니다. 만약 어플리케이션이
|
||||
운영체제에 대해 무슨 일을 하고 있는지 이해하고 싶다면 이는 좋은 자원이 될 것입니다.
|
||||
|
||||
ProcMon의 기본적인 디버깅 기능을 알아보고 싶다면 Microsoft에서 제공하는
|
||||
[동영상 강좌][procmon-instructions]를 참고하세요.
|
||||
|
||||
[sys-internals]: https://technet.microsoft.com/en-us/sysinternals/processmonitor.aspx
|
||||
[procmon-instructions]: https://channel9.msdn.com/shows/defrag-tools/defrag-tools-4-process-monitor
|
|
@ -13,7 +13,7 @@ Electron
|
|||
├── atom - C++ 소스 코드.
|
||||
| ├── app - 시스템 엔트리 코드.
|
||||
| ├── browser - 주 윈도우를 포함한 프론트엔드, UI, 그리고 메인 프로세스에 관련된
|
||||
| | 코드와 랜더러 및 웹 페이지 관리 관련 코드.
|
||||
| | 코드와 렌더러 및 웹 페이지 관리 관련 코드.
|
||||
| | ├── ui - 서로 다른 플랫폼에 대한 UI 관련 구현 코드.
|
||||
| | | ├── cocoa - Cocoa 특정 소스 코드.
|
||||
| | | ├── gtk - GTK+ 특정 소스 코드.
|
||||
|
@ -22,9 +22,9 @@ Electron
|
|||
| | ├── net - 네트워킹 관련 코드.
|
||||
| | ├── mac - Mac 특정 Objective-C 소스 코드.
|
||||
| | └── resources - 아이콘들, 플랫폼 종속성 파일들, 기타 등등..
|
||||
| ├── renderer - 랜더러 프로세스에서 작동하는 코드.
|
||||
| | └── api - 랜더러 프로세스 API의 구현.
|
||||
| └── common - 메인과 랜더러 프로세스에서 모두 사용하는 코드, 몇가지 유틸리티
|
||||
| ├── renderer - 렌더러 프로세스에서 작동하는 코드.
|
||||
| | └── api - 렌더러 프로세스 API의 구현.
|
||||
| └── common - 메인과 렌더러 프로세스에서 모두 사용하는 코드, 몇가지 유틸리티
|
||||
| 함수들이 포함되어 있고 node의 메시지 루프와 Chromium의 메시지 루프를 통합.
|
||||
| └── api - 공통 API 구현들, 기초 Electron 빌트-인 모듈들.
|
||||
├── chromium_src - Chromium에서 복사하여 가져온 소스코드.
|
||||
|
@ -33,9 +33,9 @@ Electron
|
|||
├── lib - JavaScript 소스 코드.
|
||||
| ├── browser - Javascript 메인 프로세스 초기화 코드.
|
||||
| | └── api - Javascript API 구현 코드.
|
||||
| ├── common - 메인과 랜더러 프로세스에서 모두 사용하는 JavaScript
|
||||
| ├── common - 메인과 렌더러 프로세스에서 모두 사용하는 JavaScript
|
||||
| | └── api - Javascript API 구현 코드.
|
||||
| └── renderer - Javascript 랜더러 프로세스 초기화 코드.
|
||||
| └── renderer - Javascript 렌더러 프로세스 초기화 코드.
|
||||
| └── api - Javascript API 구현 코드.
|
||||
├── spec - 자동화 테스트.
|
||||
├── atom.gyp - Electron의 빌드 규칙.
|
||||
|
@ -57,3 +57,30 @@ Electron
|
|||
스크립트로부터 만들어지는 임시 디렉터리.
|
||||
* **external_binaries** - `gyp` 빌드를 지원하지 않아 따로 다운로드된 서드파티
|
||||
프레임워크 바이너리들.
|
||||
|
||||
## Git 서브 모듈 최신 버전으로 유지
|
||||
|
||||
Electron 저장소는 몇 가지 외부 벤더 종속성을 가지고 있으며 [/vendor](/vendor)
|
||||
디렉터리에서 확인할 수 있습니다. 때때로 `git status`를 실행했을 때 아마 다음과 같은
|
||||
메시지를 흔히 목격할 것입니다:
|
||||
|
||||
```sh
|
||||
$ git status
|
||||
|
||||
modified: vendor/brightray (new commits)
|
||||
modified: vendor/node (new commits)
|
||||
```
|
||||
|
||||
이 외부 종속성 모듈들을 업데이트 하려면, 다음 커맨드를 실행합니다:
|
||||
|
||||
```sh
|
||||
git submodule update --init --recursive
|
||||
```
|
||||
|
||||
만약 자기 자신이 너무 이 커맨드를 자주 사용하는 것 같다면, `~/.gitconfig` 파일을
|
||||
생성하여 편하게 업데이트할 수 있습니다:
|
||||
|
||||
```
|
||||
[alias]
|
||||
su = submodule update --init --recursive
|
||||
```
|
||||
|
|
|
@ -20,13 +20,13 @@ Node.js의 새로운 기능은 보통 V8 업그레이드에서 가져옵니다.
|
|||
|
||||
## 어떻게 웹 페이지 간에 데이터를 공유할 수 있나요?
|
||||
|
||||
두 웹페이지 간에 (랜더러 프로세스) 데이터를 공유하려면 간단히 이미 모든 브라우저에서
|
||||
두 웹페이지 간에 (렌더러 프로세스) 데이터를 공유하려면 간단히 이미 모든 브라우저에서
|
||||
사용할 수 있는 HTML5 API들을 사용하면 됩니다. 가장 좋은 후보는
|
||||
[Storage API][storage], [`localStorage`][local-storage],
|
||||
[`sessionStorage`][session-storage], 그리고 [IndexedDB][indexed-db]가 있습니다.
|
||||
|
||||
또는 Electron에서만 사용할 수 있는 IPC 시스템을 사용하여 메인 프로세스의 global
|
||||
변수에 데이터를 저장한 후 다음과 같이 랜더러 프로세스에서 `remote` 모듈을 사용하여
|
||||
변수에 데이터를 저장한 후 다음과 같이 렌더러 프로세스에서 `remote` 모듈을 사용하여
|
||||
접근할 수 있습니다:
|
||||
|
||||
```javascript
|
||||
|
@ -141,7 +141,7 @@ npm uninstall -g electron
|
|||
|
||||
그런데 여전히 빌트인 모듈이 계속해서 문제를 발생시키는 경우, 아마 모듈을 잘못 사용하고
|
||||
있을 가능성이 큽니다. 예를 들면 `electron.app`은 메인 프로세스에서만 사용할 수 있는
|
||||
모듈이며, 반면 `electron.webFrame` 모듈은 랜더러 프로세스에서만 사용할 수 있는
|
||||
모듈이며, 반면 `electron.webFrame` 모듈은 렌더러 프로세스에서만 사용할 수 있는
|
||||
모듈입니다.
|
||||
|
||||
[memory-management]: https://developer.mozilla.org/ko/docs/Web/JavaScript/Memory_Management
|
||||
|
|
|
@ -18,7 +18,7 @@ Electron 문서를 작성하는 규칙은 다음과 같습니다.
|
|||
추가합니다.
|
||||
- 메서드 헤더는 `code backtick` 으로 표시합니다.
|
||||
- 이벤트 헤더는 한 '따옴표'로 표시합니다.
|
||||
- 리스트를 2 단계 이상 중첩하지 않습니다. (안타깝게도 markdown 랜더러가 이를 지원하지
|
||||
- 리스트를 2 단계 이상 중첩하지 않습니다. (안타깝게도 markdown 렌더러가 이를 지원하지
|
||||
않습니다)
|
||||
- 섹션에 대한 제목을 추가합니다. Events, Class 메서드 그리고 인스턴스 메서드 등
|
||||
- 어떤 '것'의 사용 결과를 설명할 때 '될 것입니다' 형식을 사용하여 설명합니다.
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
# 메인 프로세스 디버깅하기
|
||||
|
||||
브라우저 창의 개발자 도구는 웹 페이지 같은 랜더러 프로세스의 스크립트만 디버깅이
|
||||
브라우저 창의 개발자 도구는 웹 페이지 같은 렌더러 프로세스의 스크립트만 디버깅이
|
||||
가능합니다. 대신 Electron은 메인 프로세스의 디버깅을 위해 `--debug` 과 `--debug-brk`
|
||||
스위치들을 제공합니다.
|
||||
|
||||
|
|
|
@ -14,7 +14,7 @@ Windows, Linux, OS X 운영체제 모두 기본적으로 어플리케이션에
|
|||
통해 개발자가 편리하게 데스크톱 알림을 사용할 수 있는 기능을 제공합니다. 데스크톱 알림은
|
||||
운영체제의 네이티브 알림 API를 사용하여 표시합니다.
|
||||
|
||||
**참고:** 이 API는 HTML5 API이기 때문에 랜더러 프로세스에서만 사용할 수 있습니다.
|
||||
**참고:** 이 API는 HTML5 API이기 때문에 렌더러 프로세스에서만 사용할 수 있습니다.
|
||||
|
||||
```javascript
|
||||
var myNotification = new Notification('Title', {
|
||||
|
|
|
@ -4,10 +4,6 @@ Electron은 v0.34.0 버전부터 앱 패키지를 Mac App Store(MAS)에 제출
|
|||
되었습니다. 이 가이드는 어플리케이션을 앱 스토어에 등록하는 방법과 빌드의 한계에 대한
|
||||
설명을 제공합니다.
|
||||
|
||||
**참고:** v0.36.0 버전부터 어플리케이션이 샌드박스화 된 상태로 실행되면 GPU 작동을
|
||||
방지하는 버그가 있었습니다. 따라서 이 버그가 고쳐지기 전까진 v0.35.x 버전을 사용하는
|
||||
것을 권장합니다. 이 버그에 관한 자세한 사항은 [issue #3871][issue-3871]를 참고하세요.
|
||||
|
||||
**참고:** Mac App Store에 어플리케이션을 등록하려면
|
||||
[Apple Developer Program][developer-program]에 등록되어 있어야 하며 비용이 발생할
|
||||
수 있습니다.
|
||||
|
@ -56,6 +52,8 @@ Apple로부터 인증서를 취득했다면, [어플리케이션 배포](applica
|
|||
<dict>
|
||||
<key>com.apple.security.app-sandbox</key>
|
||||
<true/>
|
||||
<key>com.apple.security.temporary-exception.sbpl</key>
|
||||
<string>(allow mach-lookup (global-name-regex #"^org.chromium.Chromium.rohitfork.[0-9]+$"))</string>
|
||||
</dict>
|
||||
</plist>
|
||||
```
|
||||
|
@ -77,17 +75,18 @@ INSTALLER_KEY="3rd Party Mac Developer Installer: Company Name (APPIDENTITY)"
|
|||
|
||||
FRAMEWORKS_PATH="$APP_PATH/Contents/Frameworks"
|
||||
|
||||
codesign --deep -fs "$APP_KEY" --entitlements child.plist "$FRAMEWORKS_PATH/Electron Framework.framework/Versions/A"
|
||||
codesign --deep -fs "$APP_KEY" --entitlements child.plist "$FRAMEWORKS_PATH/$APP Helper.app/"
|
||||
codesign --deep -fs "$APP_KEY" --entitlements child.plist "$FRAMEWORKS_PATH/$APP Helper EH.app/"
|
||||
codesign --deep -fs "$APP_KEY" --entitlements child.plist "$FRAMEWORKS_PATH/$APP Helper NP.app/"
|
||||
if [ -d "$FRAMEWORKS_PATH/Squirrel.framework/Versions/A" ]; then
|
||||
# non-MAS 빌드 서명
|
||||
codesign --deep -fs "$APP_KEY" --entitlements child.plist "$FRAMEWORKS_PATH/Mantle.framework/Versions/A"
|
||||
codesign --deep -fs "$APP_KEY" --entitlements child.plist "$FRAMEWORKS_PATH/ReactiveCocoa.framework/Versions/A"
|
||||
codesign --deep -fs "$APP_KEY" --entitlements child.plist "$FRAMEWORKS_PATH/Squirrel.framework/Versions/A"
|
||||
fi
|
||||
codesign -fs "$APP_KEY" --entitlements parent.plist "$APP_PATH"
|
||||
codesign -s "$APP_KEY" -f --entitlements child.plist "$FRAMEWORKS_PATH/Electron Framework.framework/Versions/A/Electron Framework"
|
||||
codesign -s "$APP_KEY" -f --entitlements child.plist "$FRAMEWORKS_PATH/Electron Framework.framework/Versions/A/Libraries/libffmpeg.dylib"
|
||||
codesign -s "$APP_KEY" -f --entitlements child.plist "$FRAMEWORKS_PATH/Electron Framework.framework/Versions/A/Libraries/libnode.dylib"
|
||||
codesign -s "$APP_KEY" -f --entitlements child.plist "$FRAMEWORKS_PATH/Electron Framework.framework"
|
||||
codesign -s "$APP_KEY" -f --entitlements child.plist "$FRAMEWORKS_PATH/$APP Helper.app/Contents/MacOS/$APP Helper"
|
||||
codesign -s "$APP_KEY" -f --entitlements child.plist "$FRAMEWORKS_PATH/$APP Helper.app/"
|
||||
codesign -s "$APP_KEY" -f --entitlements child.plist "$FRAMEWORKS_PATH/$APP Helper EH.app/Contents/MacOS/$APP Helper EH"
|
||||
codesign -s "$APP_KEY" -f --entitlements child.plist "$FRAMEWORKS_PATH/$APP Helper EH.app/"
|
||||
codesign -s "$APP_KEY" -f --entitlements child.plist "$FRAMEWORKS_PATH/$APP Helper NP.app/Contents/MacOS/$APP Helper NP"
|
||||
codesign -s "$APP_KEY" -f --entitlements child.plist "$FRAMEWORKS_PATH/$APP Helper NP.app/"
|
||||
codesign -s "$APP_KEY" -f --entitlements child.plist "$APP_PATH/Contents/MacOS/$APP"
|
||||
codesign -s "$APP_KEY" -f --entitlements parent.plist "$APP_PATH"
|
||||
|
||||
productbuild --component "$APP_PATH" /Applications --sign "$INSTALLER_KEY" "$RESULT_PATH"
|
||||
```
|
||||
|
@ -96,11 +95,31 @@ productbuild --component "$APP_PATH" /Applications --sign "$INSTALLER_KEY" "$RES
|
|||
문서를 참고하여 기본적인 개념을 이해해야 합니다. 그리고 자격(plist) 파일에
|
||||
어플리케이션에서 요구하는 권한의 키를 추가합니다.
|
||||
|
||||
### 어플리케이션을 업로드하고 심사용 앱으로 제출
|
||||
### 어플리케이션 업로드
|
||||
|
||||
어플리케이션 서명을 완료한 후 iTunes Connect에 업로드하기 위해 Application Loader를
|
||||
사용할 수 있습니다. 참고로 업로드하기 전에 [레코드][create-record]를 만들었는지
|
||||
확인해야 합니다. 그리고 [심사를 위해 앱을 제출][submit-for-review]할 수 있습니다.
|
||||
확인해야 합니다.
|
||||
|
||||
### `temporary-exception`의 사용처 설명
|
||||
|
||||
어플리케이션을 샌드박싱할 때 `temporary-exception` 엔트리가 자격에 추가되며
|
||||
[어플리케이션 샌드박스 임시 예외 적용][temporary-exception] 문서에 따라
|
||||
왜 이 엔트리가 필요한지 설명해야 합니다:
|
||||
|
||||
> Note: If you request a temporary-exception entitlement, be sure to follow the
|
||||
guidance regarding entitlements provided on the iTunes Connect website. In
|
||||
particular, identify the entitlement and corresponding issue number in the App
|
||||
Sandbox Entitlement Usage Information section in iTunes Connect and explain why
|
||||
your app needs the exception.
|
||||
|
||||
아마 제출하려는 어플리케이션이 Chromium 브라우저를 기반으로 만들어졌고, 또한
|
||||
멀티-프로세스 구조를 위해 Mach 포트를 사용하는 것도 설명해야 할 수 있습니다. 하지만
|
||||
여전히 이러한 문제 때문에 어플리케이션 심사에 실패할 수 있습니다.
|
||||
|
||||
### 어플리케이션을 심사에 제출
|
||||
|
||||
위 과정을 마치면 [어플리케이션을 심사를 위해 제출][submit-for-review]할 수 있습니다.
|
||||
|
||||
## MAS 빌드의 한계
|
||||
|
||||
|
@ -117,7 +136,7 @@ productbuild --component "$APP_PATH" /Applications --sign "$INSTALLER_KEY" "$RES
|
|||
* 어플리케이션이 DNS의 변경을 감지하지 못할 수 있습니다.
|
||||
|
||||
또한 어플리케이션 샌드박스 개념으로 인해 어플리케이션에서 접근할 수 있는 리소스는
|
||||
엄격하게 제한되어 있습니다. 자세한 내용은 [App Sandboxing][app-sandboxing] 문서를
|
||||
엄격하게 제한되어 있습니다. 자세한 내용은 [앱 샌드박싱][app-sandboxing] 문서를
|
||||
참고하세요.
|
||||
|
||||
## Electron에서 사용하는 암호화 알고리즘
|
||||
|
@ -164,5 +183,5 @@ ERN의 승인을 얻는 방법은, 다음 글을 참고하는 것이 좋습니
|
|||
[create-record]: https://developer.apple.com/library/ios/documentation/LanguagesUtilities/Conceptual/iTunesConnect_Guide/Chapters/CreatingiTunesConnectRecord.html
|
||||
[submit-for-review]: https://developer.apple.com/library/ios/documentation/LanguagesUtilities/Conceptual/iTunesConnect_Guide/Chapters/SubmittingTheApp.html
|
||||
[app-sandboxing]: https://developer.apple.com/app-sandboxing/
|
||||
[issue-3871]: https://github.com/electron/electron/issues/3871
|
||||
[ern-tutorial]: https://carouselapps.com/2015/12/15/legally-submit-app-apples-app-store-uses-encryption-obtain-ern/
|
||||
[temporary-exception]: https://developer.apple.com/library/mac/documentation/Miscellaneous/Reference/EntitlementKeyReference/Chapters/AppSandboxTemporaryExceptionEntitlements.html
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
# 온라인/오프라인 이벤트 감지
|
||||
|
||||
온라인/오프라인 이벤트는 다음 예제와 같이 랜더러 프로세스에서 표준 HTML5 API를 이용하여
|
||||
온라인/오프라인 이벤트는 다음 예제와 같이 렌더러 프로세스에서 표준 HTML5 API를 이용하여
|
||||
구현할 수 있습니다.
|
||||
|
||||
_main.js_
|
||||
|
|
|
@ -16,23 +16,23 @@ Electron은 실행될 때 __메인 프로세스__ 로 불리는 `package.json`
|
|||
호출합니다. 이 스크립트는 메인 프로세스에서 작동합니다. GUI 컴포넌트를 조작하거나 웹
|
||||
페이지 창을 생성할 수 있습니다.
|
||||
|
||||
### 랜더러 프로세스
|
||||
### 렌더러 프로세스
|
||||
|
||||
Electron이 웹페이지를 보여줄 때 Chromium의 multi-processes 구조도 같이 사용됩니다.
|
||||
Electron 프로세스 내에서 작동하는 웹 페이지를 __랜더러 프로세스__ 라고 불립니다.
|
||||
Electron 프로세스 내에서 작동하는 웹 페이지를 __렌더러 프로세스__ 라고 불립니다.
|
||||
|
||||
보통 일반 브라우저의 웹 페이지들은 샌드박스가 적용된 환경에서 작동하며 네이티브
|
||||
리소스에는 접근할 수 없도록 되어 있습니다. 하지만 Electron은 웹 페이지 내에서 Node.js
|
||||
API를 사용하여 low-level 수준으로 운영체제와 상호작용할 수 있습니다.
|
||||
|
||||
### 메인 프로세스와 랜더러 프로세스의 차이점
|
||||
### 메인 프로세스와 렌더러 프로세스의 차이점
|
||||
|
||||
메인 프로세스는 `BrowserWindow` Class를 사용하여 새로운 창을 만들 수 있습니다.
|
||||
`BrowserWindow` 인스턴스는 따로 분리된 프로세스에서 랜더링 되며 이 프로세스를 랜더러
|
||||
프로세스라고 합니다. `BrowserWindow` 인스턴스가 소멸할 때 그 창의 랜더러 프로세스도
|
||||
`BrowserWindow` 인스턴스는 따로 분리된 프로세스에서 렌더링 되며 이 프로세스를 렌더러
|
||||
프로세스라고 합니다. `BrowserWindow` 인스턴스가 소멸할 때 그 창의 렌더러 프로세스도
|
||||
같이 소멸합니다.
|
||||
|
||||
메인 프로세스는 모든 웹 페이지와 랜더러 프로세스를 관리하며 랜더러 프로세스는 각각의
|
||||
메인 프로세스는 모든 웹 페이지와 렌더러 프로세스를 관리하며 렌더러 프로세스는 각각의
|
||||
프로세스에 고립되며 웹 페이지의 작동에만 영향을 끼칩니다.
|
||||
|
||||
웹 페이지 내에선 기본적으로 네이티브 GUI와 관련된 API를 호출할 수 없도록 설계 되어
|
||||
|
@ -40,7 +40,7 @@ API를 사용하여 low-level 수준으로 운영체제와 상호작용할 수
|
|||
리소스를 누수시킬 수 있기 때문입니다. 꼭 웹 페이지 내에서 API를 사용해야 한다면 메인
|
||||
프로세스에서 그 작업을 처리할 수 있도록 메인 프로세스와 통신을 해야 합니다.
|
||||
|
||||
Electron에는 메인 프로세스와 랜더러 프로세스 사이에 통신을 할 수 있도록
|
||||
Electron에는 메인 프로세스와 렌더러 프로세스 사이에 통신을 할 수 있도록
|
||||
[ipc](../api/ipc-renderer.md) 모듈을 제공하고 있습니다.
|
||||
또는 [remote](../api/remote.md) 모듈을 사용하여 RPC 스타일로 통신할 수도 있습니다.
|
||||
또한 FAQ에서 [다양한 객체를 공유하는 방법](share-data)도 소개하고 있습니다.
|
||||
|
|
|
@ -12,7 +12,7 @@ Windows 7 이후 버전만 지원됩니다. Windows Vista에서도 작동할 수
|
|||
테스트가 완료되지 않았습니다.
|
||||
|
||||
윈도우용 바이너리는 `x86`과 `x64` 모두 제공됩니다. 그리고 `ARM` 버전 윈도우는 아직
|
||||
지원하지 않습니다. (역주: 추후 지원할 가능성이 있습니다)
|
||||
지원하지 않습니다.
|
||||
|
||||
### Linux
|
||||
|
||||
|
|
|
@ -16,9 +16,9 @@ Electron 기반 어플리케이션을 Travis, Circle, Jenkins 또는 유사한
|
|||
그리고, 가상 xvfb 스크린을 생성하고 DISPLAY라고 불리우는 환경 변수를 지정합니다.
|
||||
Electron의 Chromium은 자동적으로 `$DISPLAY` 변수를 찾습니다. 따라서 앱의 추가적인
|
||||
다른 설정이 필요하지 않습니다. 이러한 작업은 Paul Betts의
|
||||
[xfvb-maybe](https://github.com/paulcbetts/xvfb-maybe)를 통해 자동화 할 수
|
||||
있습니다: `xfvb-maybe`를 테스트 커맨드 앞에 추가하고 현재 시스템에서 요구하면
|
||||
이 작은 툴이 자동적으로 xfvb를 설정합니다. Windows와 Mac OS X에선 간단히 아무 작업도
|
||||
[xvfb-maybe](https://github.com/paulcbetts/xvfb-maybe)를 통해 자동화 할 수
|
||||
있습니다: `xvfb-maybe`를 테스트 커맨드 앞에 추가하고 현재 시스템에서 요구하면
|
||||
이 작은 툴이 자동적으로 xvfb를 설정합니다. Windows와 Mac OS X에선 간단히 아무 작업도
|
||||
하지 않습니다.
|
||||
|
||||
```
|
||||
|
@ -45,7 +45,7 @@ install:
|
|||
|
||||
### Jenkins
|
||||
|
||||
Jenkins는 [Xfvb 플러그인이 존재합니다](https://wiki.jenkins-ci.org/display/JENKINS/Xvfb+Plugin).
|
||||
Jenkins는 [Xvfb 플러그인이 존재합니다](https://wiki.jenkins-ci.org/display/JENKINS/Xvfb+Plugin).
|
||||
|
||||
### Circle CI
|
||||
|
||||
|
|
Loading…
Reference in a new issue