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