From 6d22b6408ef8292e5007a6bf206375310dea8506 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Mon, 5 Jun 2017 10:41:41 +0200 Subject: [PATCH 01/32] Traduction de css.md Signed-off-by: Bruno Lesieur --- en/SUMMARY.md | 2 +- en/css.md | 60 +++++++++++++++++++++++++-------------------------- 2 files changed, 31 insertions(+), 31 deletions(-) diff --git a/en/SUMMARY.md b/en/SUMMARY.md index b538ae93..c809a5ff 100644 --- a/en/SUMMARY.md +++ b/en/SUMMARY.md @@ -6,7 +6,7 @@ - [Hydratation côté client](hydration.md) - [Introduction au moteur de dépaquetage](bundle-renderer.md) - [Configuration de pré-compilation](build-config.md) -- [Gestion des CSS (En)](css.md) +- [Gestion des CSS](css.md) - [Gestion des entêtes (En)](head.md) - [Mise en cache (En)](caching.md) - [Envoi par flux (En)](streaming.md) diff --git a/en/css.md b/en/css.md index f909efcb..595274b5 100644 --- a/en/css.md +++ b/en/css.md @@ -1,35 +1,35 @@ -# Gestion des CSS (En)

*Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vue-ssr-docs).* +# Gestion des CSS -The recommended way to manage CSS is to simply use ``태그가 반환됩니다. 자세한 내용은 [CSS 관리](./css.md)를 참조하십시오. + +`clientManifest`가 제공되면 반환되는 문자열에는 webpack에서 생성한 CSS파일 (예: `extract-text-webpack-plugin` 또는 imported with `file-loader`)에 대한 `` 태그가 포함됩니다. + +- `context.renderState(options?: Object)` + +이 메소드는 `context.state`를 직렬화하고 스테이트를 `window.__INITIAL_STATE__`로 포함하는 인라인 스크립트를 리턴합니다. + +컨텍스트 스테이트 키와 윈도우 스테이트 키는 옵션 객체를 전달하여 사용자 정의할 수 있습니다. + +```js + context.renderState({ + contextKey: 'myCustomState', + windowKey: '__MY_STATE__' + }) + // -> +``` + +- `context.renderScripts()` + - `clientManifest`를 필요로 합니다. + +이 메소드는 클라이언트 애플리케이션이 시작하는데 필요한 ``태그를 반환합니다. 애플리케이션 코드에서 비동기 코드 분할을 사용하는 경우 이 메소드는 포함할 올바른 비동기 청크를 지능적으로 유추합니다. + +- `context.renderResourceHints()` + - `clientManifest`를 필요로 합니다. + +이 메소드는 현재 렌더링된 페이지에 필요한 `` 리소스 힌트를 반환합니다. 기본적으로 다음과 같습니다. + +- 페이지에 필요한 JavaScript 및 CSS 파일을 미리 로드 +- 나중에 필요할 수 있는 비동기 JavaScript 청크 프리페치 + +미리 로드된 파일은 [`shouldPreload`](./api.md#shouldpreload)옵션을 사용해 추가로 사용자 정의할 수 있습니다. + +- `context.getPreloadFiles()` + - `clientManifest`를 필요로 합니다. + +이 메소드는 문자열을 반환하지 않고 대신 미리 로드해야 할 에셋을 나타내는 파일 객체의 배열을 반환합니다. 이는 프로그래밍 방식으로 HTTP/2 서버 푸시를 하는데 사용할 수 있습니다. + +`createBundleRenderer`에 전달된 `template`은 `context`를 사용하여 보간되므로 템플릿안에서 이러한 메소드를 사용할 수 있습니다.(`inject: false` 옵션과 함께) + +```html + + + + {{{ renderResourceHints() }}} + {{{ renderStyles() }}} + + + + {{{ renderState() }}} + {{{ renderScripts() }}} + + +``` + +`template`을 사용하지 않으면 문자열을 직접 연결할 수 있습니다. From a50ba2d54661d7252cd799e700424a3a2b3b07b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?ChangJoo=20Park=28=EB=B0=95=EC=B0=BD=EC=A3=BC=29?= Date: Fri, 9 Jun 2017 01:59:33 +0900 Subject: [PATCH 13/32] Translate basic.md via GitLocalize --- ko/basic.md | 144 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 144 insertions(+) create mode 100644 ko/basic.md diff --git a/ko/basic.md b/ko/basic.md new file mode 100644 index 00000000..a24074f0 --- /dev/null +++ b/ko/basic.md @@ -0,0 +1,144 @@ +# 기본 사용 방법 + +## 설치 + +```bash +npm install vue vue-server-renderer --save +``` + +이 가이드에서는 NPM을 사용하지만 [Yarn](https://yarnpkg.com/en/)을 사용하여도 전혀 문제가 되지 않습니다. + +#### 참고 사항 + +- Node.js 6 이상을 권장합니다. +- `vue-server-renderer` 와`vue`는 반드시 서로 맞는 버전을 사용해야합니다. +- `vue-server-renderer`는 일부 Node.js 네이티브 모듈을 사용하므로 Node.js에서만 사용할 수 있습니다. 앞으로 다른 JavaScript 런타임에서 실행할 수 있는 보다 간단한 방법을 제공할 예정입니다. + +## Vue 인스턴스 렌더링 + +```js +// Step 1: Create a Vue instance +const Vue = require('vue') +const app = new Vue({ + template: `
Hello World
` +}) +// Step 2: Create a renderer +const renderer = require('vue-server-renderer').createRenderer() +// Step 3: Render the Vue instance to HTML +renderer.renderToString(app, (err, html) => { + if (err) throw err + console.log(html) + // =>
Hello World
+}) +``` + +## 서버와 통합하는 방법 + +[Express](https://expressjs.com/)와 같이 Node.js 서버에서 사용하면 매우 간단합니다. + +```bash +npm install express --save +``` + +--- + +```js +const Vue = require('vue') +const server = require('express')() +const renderer = require('vue-server-renderer').createRenderer() +server.get('*', (req, res) => { + const app = new Vue({ + data: { + url: req.url + }, + template: `
The visited URL is: {{ url }}
` + }) + renderer.renderToString(app, (err, html) => { + if (err) { + res.status(500).end('Internal Server Error') + return + } + res.end(` + + + Hello + ${html} + + `) + }) +}) +server.listen(8080) +``` + +## 페이지 템플릿 이용하기 + +Vue 앱을 렌더링할 때 렌더러는 앱의 마크업만 생성합니다. 이 예제에서 추가 HTML 페이지 쉘로 출력을 레핑해야합니다. + +이를 간단히 하기 위해 렌더러를 만들 때 페이지 템플릿을 직접 제공할 수 있습니다. 대부분의 경우 페이지 템플릿을 자체 파일에 저장합니다. (예: `index.template.html`) + +```html + + + Hello + + + + +``` + +Notice the `` comment -- this is where your app's markup will be injected. + +그 다음 파일을 읽고 Vue 렌더러로 전달합니다. + +```js +const renderer = createRenderer({ + template: require('fs').readFileSync('./index.template.html', 'utf-8') +}) +renderer.renderToString(app, (err, html) => { + console.log(html) // will be the full page with app content injected. +}) +``` + +### 템플릿 인터폴레이션 + +템플릿은 간단한 인터폴레이션(보간)도 지원합니다. 다음 템플릿을 확인하세요. + +```html + + + + {{ title }} + + {{{ meta }}} + + + + + +``` + +`renderToString`의 두번째 전달인자로 "render context object" 를 전달하여 인터폴레이션 데이터를 제공할 수 있습니다. + +```js +const context = { + title: 'hello', + meta: ` + + + ` +} +renderer.renderToString(app, context, (err, html) => { + // page title will be "Hello" + // with meta tags injected +}) +``` + +`컨텍스트`객체는 Vue 앱 인스턴스와 공유할 수 있으므로 컴포넌트가 템플릿 인터폴레이션을 위해 데이터를 동적으로 등록할 수 있습니다. + +또한 템플릿은 다음과 같은 몇 가지 고급 기능을 지원합니다. + +- `*.vue` 컴포넌트를 사용할 때 CSS를 자동으로 주입합니다. +- `clientManifest`를 사용할 때 에셋 링크 및 리소스에 관련한 힌트를 자동으로 주입합니다. +- 클라이언트 측 하이드레이션을 위한 Vuex 스테이트 포함시 자동 주입 및 XSS를 예방을 지원합니다. + +나중에 이 가이드에서 관련 개념을 소개할 때 자세히 다룰 것 입니다. From c617c9f05fcbc3e01d5ebaca26ffb15f2418075b Mon Sep 17 00:00:00 2001 From: Ryo Chikazawa Date: Fri, 9 Jun 2017 01:59:34 +0900 Subject: [PATCH 14/32] Translate basic.md via GitLocalize --- ko/basic.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ko/basic.md b/ko/basic.md index a24074f0..51890d42 100644 --- a/ko/basic.md +++ b/ko/basic.md @@ -86,7 +86,7 @@ Vue 앱을 렌더링할 때 렌더러는 앱의 마크업만 생성합니다. ``` -Notice the `` comment -- this is where your app's markup will be injected. +`` 주석을 주목하세요. 이것은 앱의 마크업이 삽입되는 곳 입니다. 그 다음 파일을 읽고 Vue 렌더러로 전달합니다. From 784752da35e5128a6d0ea4df51338be62c1ccc62 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?ChangJoo=20Park=28=EB=B0=95=EC=B0=BD=EC=A3=BC=29?= Date: Fri, 9 Jun 2017 01:59:39 +0900 Subject: [PATCH 15/32] Translate api.md via GitLocalize --- ko/api.md | 233 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 233 insertions(+) create mode 100644 ko/api.md diff --git a/ko/api.md b/ko/api.md new file mode 100644 index 00000000..e04d9496 --- /dev/null +++ b/ko/api.md @@ -0,0 +1,233 @@ +# API 레퍼런스 + +## `createRenderer([options])` + +[options](#renderer-options)와 함께 [`Renderer`](#class-renderer)인스턴스를 만듭니다. + +```js +const { createRenderer } = require('vue-server-renderer') +const renderer = createRenderer({ ... }) +``` + +## `createBundleRenderer(bundle[, options])` + +서버 번들과 [options](#renderer-options)을 이용해 [`BundleRenderer`](#class-bundlerenderer)인스턴스를 만듭니다. + +```js +const { createBundleRenderer } = require('vue-server-renderer') +const renderer = createBundleRenderer(serverBundle, { ... }) +``` + +`serverBundle` 전달인자는 다음 중 하나입니다. + +- 절대경로를 가지는 번들파일(`.js` or `.json`). `/`로 시작해야 파일 경로로 판단합니다. +- `vue-server-renderer/server-plugin`로 생성한 번들 객체입니다. +- JavaScript 코드 문자열 (권장하지 않습니다.) + +[Introducing the Server Bundle](./bundle-renderer.md)와 [를 참조하세요.](./build-config.md) + +## `Class: Renderer` + +- #### `renderer.renderToString(vm[, context], callback)` + +Vue 인스턴스를 문자열로 렌더링합니다. 컨텍스트 객체는 옵션입니다. 콜백은 일반적인 Node.js 스타일이며 첫번째 전달인자는 오류, 두번째 전달인자는 렌더링된 문자열 입니다. + +- #### `renderer.renderToStream(vm[, context])` + +Vue 인스턴스를 Node.js 스트림으로 렌더링합니다. 컨텍스트 객체는 옵션입니다. 자세한 내용은 [스트리밍](./streaming.md)을 참조하세요. + +## `Class: BundleRenderer` + +- #### `bundleRenderer.renderToString([context, ]callback)` + +번들을 문자열로 렌더링합니다. 컨텍스트 객체는 옵션입니다. 콜백은 일반적인 Node.js 스타일이며 첫번째 전달인자는 오류, 두번째 전달인자는 렌더링된 문자열 입니다. + +- #### `bundleRenderer.renderToStream([context])` + +Vue 인스턴스를 Node.js 스트림으로 렌더링합니다. 컨텍스트 객체는 옵션입니다. 자세한 내용은 [스트리밍](./streaming.md)을 참조하세요. + +## 렌더러 옵션 + +- #### `template` + +전체 페이지 HTML에 대한 템플릿을 제공하십시오. 템플릿에는 렌더링된 앱 컨텐츠의 플레이스홀더 역할을 하는 주석 ``이 있어야 합니다. + +템플릿은 렌더링 컨텍스트를 사용하여 기본 인터폴레이션을 지원합니다. + +- 이중 mustache를 이용해 HTML 이스케이프 인터폴레이션을 합니다. +- 삼중 mustache를 이용해 비 HTML 이스케이프 인터폴레이션을 합니다. + +템플릿은 렌더링 컨텍스트에서 특정 데이터가 발견되면 적절한 컨텐츠를 자동으로 주입합니다. + +- `context.head`: (string) 페이지 head에 삽입되어야하는 마크업 +- `context.styles`: (string) 페이지 head에 삽입되어야하는 모든 인라인 CSS. 컴포넌트 CSS에 `vue-loader` + `vue-style-loader`를 사용하는 경우 이 속성이 자동으로 채워집니다. +- `context.state`: (Object) `window.__INITIAL_STATE__`에서 반드시 인라인되어야하는 초기 Vuex 스토어 스테이트 인라인된 JSON은 XSS를 방지하기 위해 [serialize-javascript](https://github.com/yahoo/serialize-javascript)를 사용해 자동으로 삭제합니다. + +`clientManifest`이 제공되면 템플릿은 자동으로 아래 내용을 주입합니다. + +- 렌더링에 필요한 클라이언트 측 JavaScript 및 CSS 에셋 (비동기 청크가 자동으로 유추됨) +- 최적의 ` 렌더링된 페`이지에 대한 리소스 힌트 + +렌더러에 `inject: false`를 전달하여 모든 자동 주입을 비활성화 할 수 있습니다. + +참고하세요 + +- [페이지 템플릿 사용](./basic.md#using-a-page-template) +- [수동 에셋 주입](./build-config.md#manual-asset-injection) + - #### `clientManifest` +- 2.3.0+ + +`vue-server-renderer/client-plugin`에 의해 생성된 클라이언트 매니페스트 객체를 제공합니다. 클라이언트 매니페스트는 번들 렌더러에게 HTML 템플릿으로 자동 에셋 주입을 위한 적절한 정보를 제공합니다. 자세한 내용은[Generating clientManifest](./build-config.md#generating-clientmanifest)을 참조하세요. + +- +#### `inject` + + - 2.3.0+ + +`template`을 사용할 때 자동 주입 여부를 선택합니다. 기본값은 `true`입니다. + +[Manual Asset Injection](./build-config.md#manual-asset-injection)을 참조하세요 + +- +#### `shouldPreload` + + - 2.3.0+ + +` 리소스 힌트`가 생성되어야하는 파일을 제어하는 함수입니다. + +기본적으로 애플리케이션 시작에 절대적으로 필요한 JavaScript 및 CSS파일만 미리 로드합니다. + +이미지 또는 글꼴과 같은 다른 유형의 에셋의 경우 프리로드를 너무 많이하면 대역폭을 낭비하고 성능을 저하시키므로 프리로드할 대상은 시나리오에 따라 달라야합니다. `shouldPreload`옵션을 사용하여 프리로드할 항목을 정확하게 선택해야합니다. + +```js + const renderer = createBundleRenderer(bundle, { + template, + clientManifest, + shouldPreload: (file, type) => { + // type is inferred based on the file extension. + // https://fetch.spec.whatwg.org/#concept-request-destination + if (type === 'script' || type === 'style') { + return true + } + if (type === 'font') { + // only preload woff2 fonts + return /\.woff2$/.test(file) + } + if (type === 'image') { + // only preload important images + return file === 'hero.jpg' + } + } + }) +``` + +- +#### `runInNewContext` + + - 2.3.0+ + - `createBundleRenderer`에서만 사용할 수 있습니다. + - 예상: `boolean | 'once'` (`'once'` 2.3.1+ 에서만 지원함) + +기본적으로 각 렌더에 대해 번들 렌더러는 새로운 V8 컨텍스트를 만들고 전체 번들을 다시 실행합니다. 이는 몇가지 장점을 가집니다. 예를 들어 애플리케이션 코드는 서버 프로세스와 분리되어 있으며 문서에 언급된 [stateful singleton problem](./structure.md#avoid-stateful-singletons)에 대해 걱정할 필요가 없습니다. 그러나 번들을 다시 실행하는 것은 앱이 커지면 비용이 많이 들기 때문에 이 모드는 상당한 성능 비용을 발생시킵니다. + +이 옵션은 하위 호환성을 위해 `true`가 기본값이지만 가능할 때마다 `runInNewContext: false` 또는 `runInNewContext: 'once'`를 사용하는 것이 좋습니다. + +> 2.3.0에서 이 옵션은 `runInNewContext: false`가 별ㄷ로의 전역 컨텍스트를 사용하여 번들을 실행하는 버그가 있습니다. 2.3.1버전 이후 버전을 사용한다고 가정합니다. + +`runInNewContext: false`를 사용하면 번들 코드가 서버 프로세스와 동일한 `global` 컨텍스트에서 실행되므로 애플리케이션 코드에서 `global`을 수정하는 코드를 주의해야 합니다. + +`runInNewContext: 'once'`(2.3.1+)를 사용하면 번들은 별도의 `global` 컨텍스트로 평가되지만 시작할 때 한번뿐입니다. 번들이 실수로 서버 프로세스의 `global` 객체를 오염시키는 것을 방지하므로 더 안전한 코드 관리를 할 수 있습니다. 주의사항은 다음과 같습니다. + +1. 이 모드에서는 `global`(예: 폴리필)을 수정하는 종속성을 외부에 둘 수 없습니다. +2. 번들 실행에서 반환된 값은 다른 전역 생성자를 사용합니다. 번들 내부에서 발견된 오류는 서버 프로세스에서 `Error` 인스턴스가 되지 않습니다. + +[Source Code Structure](./structure.md)를 참조하세요 + +- +#### `basedir` + + - 2.2.0+ + - `createBundleRenderer`에서만 사용할 수 있습니다. + +`node_modules` 종속성 처리를 위해 서버 번들의 기본 디렉토리를 명시적으로 선언해야합니다. 생성된 번들 파일이 외부화된 NPM 종속성이 설치되어있거나 `vue-server-renderer`가 npm으로 연결된 다른 위치에 있는 경우에만 필요합니다. + +- #### `cache` + +[컴포넌트 캐시](./caching.md#component-level-caching)를 제공합니다. 캐시 객체는 Flow 표기법을 사용하여 다음 인터페이스를 구현해야합니다. + +```js + type RenderCache = { + get: (key: string, cb?: Function) => string | void; + set: (key: string, val: string) => void; + has?: (key: string, cb?: Function) => boolean | void; + }; +``` + +[lru-cache](https://github.com/isaacs/node-lru-cache):일반적으로 [lru-cache](https://github.com/isaacs/node-lru-cache)를 전달하여 사용합니다. + +```js + const LRU = require('lru-cache') + const renderer = createRenderer({ + cache: LRU({ + max: 10000 + }) + }) +``` + +캐시 객체는 최소한 `get`과 `set`을 구현해야합니다. 또한 두번째 전달인자를 콜백으로 허용하면 `get`과 `has`는 선택적으로 비동기화 할수 있습니다. 이렇게하면 캐시에서 비동기 API를 사용할 수 있습니다. 예: redis 클라이언트 + +```js + const renderer = createRenderer({ + cache: { + get: (key, cb) => { + redisClient.get(key, (err, res) => { + // handle error if any + cb(res) + }) + }, + set: (key, val) => { + redisClient.set(key, val) + } + } + }) +``` + +- #### `directives` + +사용자 정의 디렉티브에 대한 서버측 구현을 제공할 수 있습니다. + +```js + const renderer = createRenderer({ + directives: { + example (vnode, directiveMeta) { + // transform vnode based on directive binding metadata + } + } + }) +``` + +[`v-show`의 서버측 구현](https://github.com/vuejs/vue/blob/dev/src/platforms/web/server/directives/show.js)을 확인하세요 + +## webpack 플러그인 + +webpack 플러그인은 독립실행형으로 제공되므로 직접 require 해야합니다. + +```js +const VueSSRServerPlugin = require('vue-server-renderer/server-plugin') +const VueSSRClientPlugin = require('vue-server-renderer/client-plugin') +``` + +생성되는 기본 파일입니다. + +- 서버 플러그인을 위한 `vue-ssr-server-bundle.json` +- 클라이언트 플러그인을 위한 `vue-ssr-client-manifest.json` + +파일 이름은 플러그인 인스턴스를 생성할 때 사용자 정의할 수 있습니다. + +```js +const plugin = new VueSSRServerPlugin({ + filename: 'my-server-bundle.json' +}) +``` + +[빌드 설정](./build-config.md)을 참조하세요. From dd70a00e4496caa414820055f43e370367fd61f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?ChangJoo=20Park=28=EB=B0=95=EC=B0=BD=EC=A3=BC=29?= Date: Tue, 13 Jun 2017 15:45:41 +0900 Subject: [PATCH 16/32] Translate structure.md via GitLocalize (#54) --- ko/structure.md | 114 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 114 insertions(+) create mode 100644 ko/structure.md diff --git a/ko/structure.md b/ko/structure.md new file mode 100644 index 00000000..276ad176 --- /dev/null +++ b/ko/structure.md @@ -0,0 +1,114 @@ +# 소스 코드 구조 + +## 상태를 보존하는 싱글톤을 피하세요 + +클라이언트 전용 코드를 작성할 때 코드가 항상 새로운 컨텍스트에서 구동된다는 것에 익숙할 것입니다. 그러나 Node.js 서버는 오랫동안 실행되는 프로세스입니다. 프로세스에 코드가 필요한 경우 한번 계산되어 메모리에 남아있게 됩니다. 즉, 싱글톤 객체를 만들면 들어오는 모든 요청간에 공유될 수 있습니다. + +기본 예제에서 보듯이, 각 요청에 따라 **새로운 루트 Vue인스턴스를 생성**합니다. 이는 각 사용자가 브라우저에서 앱의 새로운 인스턴스를 사용하는 것과 유사합니다. 서로 다른 요청에서 공유된 인스턴스를 사용하면 상호 요청 상태 오염을 일으킬 수 있습니다. + +따라서 앱 인스턴스를 직접 생성하는 대신 반복적으로 실행할 수 있는 팩토리 함수를 노출하고 각 요청에 따라 새로운 앱 인스턴스를 만들어야 합니다. + +```js +// app.js +const Vue = require('vue') +module.exports = function createApp (context) { + return new Vue({ + data: { + url: context.url + }, + template: `
방문한 URL은 : {{ url }}
` + }) +} +``` + +이제 서버 측 코드는 아래와 같이 변경합니다. + +```js +// server.js +const createApp = require('./app') +server.get('*', (req, res) => { + const context = { url: req.url } + const app = createApp(context) + renderer.renderToString(app, (err, html) => { + // handle error... + res.end(html) + }) +}) +``` + +동일한 규칙이 라우터, 스토어 및 이벤트 버스 인스턴스에도 적용됩니다. 모듈에서 직접 export하고 앱에서 import 하는 대신 `createApp`에 새 인스턴스를 만들고 루트 Vue인스턴스에서 이를 주입해야합니다. + +> 이러한 제약 조건은 번들 렌더러를 `{ runInNewContext: true }`와 함께 사용할 때 제거할 수 있지만 각 요청에 대해 새로운 vm context를 만들어야하기 때문에 성능에 상당한 비용이 발생합니다. + +## 빌드 순서 소개 + +지금까지 클라이언트에 동일한 Vue 앱을 전달하는 방법을 다루지 않았습니다. 이를 위해 webpack을 사용해 Vue 앱을 번들링해야합니다. 사실, webpack을 사용해 서버에 Vue 앱을 번들링해야합니다. 이유는 아래와 같습니다. + +- 일반적으로 Vue 앱은 webpack과 `vue-loader`로 구성되어 있으며 `file-loader`를 통해 파일을 가져오는 것, `css-loader`를 통해 CSS를 가져오는 것과 같은 많은 webpack 관련 기능은 Node.js에서 직접 작동하지 않습니다. +- Node.js 최신 버전은 ES2015를 완벽히 지원하지만 이전 버전의 브라우저에서 작동할 수 있도록 만들기 위해 클라이언트 측 코드를 변환해야합니다. 이 때문에 빌드 단계가 필요합니다. + +따라서 webpack을 사용하여 클라이언트와 서버 모두를 번들로 제공할 것입니다. 서버 번들은 서버에서 필요하며 SSR에 사용되며, 클라이언트 번들은 정적 마크업을 위해 브라우저로 전송됩니다. + +![architecture](https://cloud.githubusercontent.com/assets/499550/17607895/786a415a-5fee-11e6-9c11-45a2cfdf085c.png) + +이후 섹션에서 설정의 세부 사항을 논의 할 것입니다. 이제 빌드 설정을 이해한다고 가정하고 webpack을 사용하여 Vue 앱 코드를 작성할 수 있습니다. + +## Webpack을 이용한 코드 구조 + +webpack을 이용해 서버와 클라이언트 모두에서 애플리케이션을 처리하므로 대부분의 소스 코드를 모든 webpack 기반으로 작성할 수 있습니다. 범용적인 코드를 작성할 때 주의해야할 [몇가지 사항](./universal.md)들이 있습니다. + +간단한 프로젝트는 아래와 같을 것 입니다. + +```bash +src +├── components +│   ├── Foo.vue +│   ├── Bar.vue +│   └── Baz.vue +├── App.vue +├── app.js # universal entry +├── entry-client.js # runs in browser only +└── entry-server.js # runs on server only +``` + +### `app.js ` + +`app.js`는 앱의 범용적인 시작 지점입니다. 클라이언트 전용 애플리케이션에서는 이 파일에 루트 Vue 인스턴스를 만들고 DOM에 직접 마운트합니다. 그러나 SSR의 경우에는 책임이 클라이언트 전용 엔트리 파일로 옮겨갑니다. + +```js +import Vue from 'vue' +import App from './App.vue' +// export a factory function for creating fresh app, router and store +// instances +export function createApp () { + const app = new Vue({ + // the root instance simply renders the App component. + render: h => h(App) + }) + return { app } +} +``` + +### `entry-client.js`: + +클라이언트 엔트리는 단순히 앱을 생성하고 DOM에 마운트하는 역할만 합니다. + +```js +import { createApp } from './app' +// client-specific bootstrapping logic... +const { app } = createApp() +// this assumes App.vue template root element has `id="app"` +app.$mount('#app') +``` + +### `entry-server.js`: + +서버 항목은 각 렌더링마다 반복적으로 호출할 수있는 함수인 export default를 사용합니다. 현재 이 인스턴스는 앱 인스턴스를 생성하고 반환하는 것 이외에는 하지 않지만 나중에 서버 측 라우트 매칭 및 데이터 프리-페칭 로직(pre-fetching logic)을 다룹니다. + +```js +import { createApp } from './app' +export default context => { + const { app } = createApp() + return app +} +``` From 5a9688ce1ac8764696f21e90eadbe050d1c743ab Mon Sep 17 00:00:00 2001 From: Evan You Date: Thu, 15 Jun 2017 12:28:39 +0800 Subject: [PATCH 17/32] Translate api.md via GitLocalize --- zh/api.md | 233 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 233 insertions(+) create mode 100644 zh/api.md diff --git a/zh/api.md b/zh/api.md new file mode 100644 index 00000000..15daaddf --- /dev/null +++ b/zh/api.md @@ -0,0 +1,233 @@ +# API 参考 + +## `createRenderer([options])` + +Create a [`Renderer`](#class-renderer) instance with (optional) [options](#renderer-options). + +```js +const { createRenderer } = require('vue-server-renderer') +const renderer = createRenderer({ ... }) +``` + +## `createBundleRenderer(bundle[, options])` + +Create a [`BundleRenderer`](#class-bundlerenderer) instance with a server bundle and (optional) [options](#renderer-options). + +```js +const { createBundleRenderer } = require('vue-server-renderer') +const renderer = createBundleRenderer(serverBundle, { ... }) +``` + +The `serverBundle` argument can be one of the following: + +- 绝对路径，指向一个已经构建好的 bundle 文件（`.js` 或 `.json`）。必须以 `/` 开头才会被识别为文件路径。 +- A bundle object generated by webpack + `vue-server-renderer/server-plugin`. +- A string of JavaScript code (not recommended). + +See [Introducing the Server Bundle](./bundle-renderer.md) and [Build Configuration](./build-config.md) for more details. + +## `Class: Renderer` + +- #### `renderer.renderToString(vm[, context], callback)` + + 将 Vue 实例渲染为字符串。上下文对象(context object)可选。回调函数是典型的 Node.js 风格回调，其中第一个参数是 error，第二个参数是渲染的字符串。 + +- #### `renderer.renderToStream(vm[, context])` + + Render a Vue instance to a Node.js stream. The context object is optional. See [Streaming](./streaming.md) for more details. + +## `Class: BundleRenderer` + +- #### `bundleRenderer.renderToString([context, ]callback)` + + Render the bundle to a string. The context object is optional. The callback is a typical Node.js style callback where the first argument is the error and the second argument is the rendered string. + +- #### `bundleRenderer.renderToStream([context])` + + Render the bundle to a Node.js stream. The context object is optional. See [Streaming](./streaming.md) for more details. + +## Renderer Options + +- #### `template` + + Provide a template for the entire page's HTML. The template should contain a comment `` which serves as the placeholder for rendered app content. + + The template also supports basic interpolation using the render context: + +- Use double-mustache for HTML-escaped interpolation; +- Use triple-mustache for non-HTML-escaped interpolation. + + The template automatically injects appropriate content when certain data is found on the render context: + +- `context.head`: (string) any head markup that should be injected into the head of the page. +- `context.styles`: (string) any inline CSS that should be injected into the head of the page. Note this property will be automatically populated if using `vue-loader` + `vue-style-loader` for component CSS. +- `context.state`: (Object) initial Vuex store state that should be inlined in the page as `window.__INITIAL_STATE__`. The inlined JSON is automatically sanitized with [serialize-javascript](https://github.com/yahoo/serialize-javascript) to prevent XSS. + + In addition, when `clientManifest` is also provided, the template automatically injects the following: + +- Client-side JavaScript and CSS assets needed by the render (with async chunks automatically inferred); +- Optimal `` resource hints for the rendered page. + + You can disable all automatic injections by also passing `inject: false` to the renderer. + + See also: + +- [Using a Page Template](./basic.md#using-a-page-template) +- [Manual Asset Injection](./build-config.md#manual-asset-injection) + - #### `clientManifest` +- 2.3.0+ + + Provide a client build manifest object generated by `vue-server-renderer/client-plugin`. The client manifest provides the bundle renderer with the proper information for automatic asset injection into the HTML template. For more details, see [Generating clientManifest](./build-config.md#generating-clientmanifest). + +- +#### `inject` + + - 2.3.0+ + + Controls whether to perform automatic injections when using `template`. Defaults to `true`. + + See also: [Manual Asset Injection](./build-config.md#manual-asset-injection). + +- +#### `shouldPreload` + + - 2.3.0+ + + A function to control what files should have `` resource hints generated. + + By default, only JavaScript and CSS files will be preloaded, as they are absolutely needed for your application to boot. + + For other types of assets such as images or fonts, preloading too much may waste bandwidth and even hurt performance, so what to preload will be scenario-dependent. You can control precisely what to preload using the `shouldPreload` option: + +```js + const renderer = createBundleRenderer(bundle, { + template, + clientManifest, + shouldPreload: (file, type) => { + // type is inferred based on the file extension. + // https://fetch.spec.whatwg.org/#concept-request-destination + if (type === 'script' || type === 'style') { + return true + } + if (type === 'font') { + // only preload woff2 fonts + return /\.woff2$/.test(file) + } + if (type === 'image') { + // only preload important images + return file === 'hero.jpg' + } + } + }) +``` + +- +#### `runInNewContext` + + - 2.3.0+ + - only used in `createBundleRenderer` + - Expects: `boolean | 'once'` (`'once'` only supported in 2.3.1+) + + By default, for each render the bundle renderer will create a fresh V8 context and re-execute the entire bundle. This has some benefits - for example, the app code is isolated from the server process and we don't need to worry about the [stateful singleton problem](./structure.md#avoid-stateful-singletons) mentioned in the docs. However, this mode comes at some considerable performance cost because re-executing the bundle is expensive especially when the app gets bigger. + + This option defaults to `true` for backwards compatibility, but it is recommended to use `runInNewContext: false` or `runInNewContext: 'once'` whenever you can. + +> In 2.3.0 this option has a bug where `runInNewContext: false` still executes the bundle using a separate global context. The following information assumes version 2.3.1+. + + With `runInNewContext: false`, the bundle code will run in the same `global` context with the server process, so be careful about code that modifies `global` in your application code. + + With `runInNewContext: 'once'` (2.3.1+), the bundle is evaluated in a separate `global` context, however only once at startup. This provides better app code isolation since it prevents the bundle from accidentally polluting the server process' `global` object. The caveats are that: + +1. Dependencies that modifies `global` (e.g. polyfills) cannot be externalized in this mode; +2. Values returned from the bundle execution will be using different global constructors, e.g. an error caught inside the bundle will not be an instance of `Error` in the server process. + + See also: [Source Code Structure](./structure.md) + +- +#### `basedir` + + - 2.2.0+ + - only used in `createBundleRenderer` + + Explicitly declare the base directory for the server bundle to resolve `node_modules` dependencies from. This is only needed if your generated bundle file is placed in a different location from where the externalized NPM dependencies are installed, or your `vue-server-renderer` is npm-linked into your current project. + +- #### `cache` + + Provide a [component cache](./caching.md#component-level-caching) implementation. The cache object must implement the following interface (using Flow notations): + +```js + type RenderCache = { + get: (key: string, cb?: Function) => string | void; + set: (key: string, val: string) => void; + has?: (key: string, cb?: Function) => boolean | void; + }; +``` + + A typical usage is passing in an [lru-cache](https://github.com/isaacs/node-lru-cache): + +```js + const LRU = require('lru-cache') + const renderer = createRenderer({ + cache: LRU({ + max: 10000 + }) + }) +``` + + Note that the cache object should at least implement `get` and `set`. In addition, `get` and `has` can be optionally async if they accept a second argument as callback. This allows the cache to make use of async APIs, e.g. a redis client: + +```js + const renderer = createRenderer({ + cache: { + get: (key, cb) => { + redisClient.get(key, (err, res) => { + // handle error if any + cb(res) + }) + }, + set: (key, val) => { + redisClient.set(key, val) + } + } + }) +``` + +- #### `directives` + + Allows you to provide server-side implementations for your custom directives: + +```js + const renderer = createRenderer({ + directives: { + example (vnode, directiveMeta) { + // transform vnode based on directive binding metadata + } + } + }) +``` + + As an example, check out [`v-show`'s server-side implementation](https://github.com/vuejs/vue/blob/dev/src/platforms/web/server/directives/show.js). + +## webpack Plugins + +The webpack plugins are provided as standalone files and should be required directly: + +```js +const VueSSRServerPlugin = require('vue-server-renderer/server-plugin') +const VueSSRClientPlugin = require('vue-server-renderer/client-plugin') +``` + +The default files generated are: + +- `vue-ssr-server-bundle.json` for the server plugin; +- `vue-ssr-client-manifest.json` for the client plugin. + +The filenames can be customized when creating the plugin instances: + +```js +const plugin = new VueSSRServerPlugin({ + filename: 'my-server-bundle.json' +}) +``` + +See [Build Configuration](./build-config.md) for more information. From 2f916161ae2468b984f2a35faeb52316c4023c10 Mon Sep 17 00:00:00 2001 From: lizhihua <275091674@qq.com> Date: Thu, 15 Jun 2017 12:28:40 +0800 Subject: [PATCH 18/32] Translate api.md via GitLocalize --- zh/api.md | 108 +++++++++++++++++++++++++++--------------------------- 1 file changed, 54 insertions(+), 54 deletions(-) diff --git a/zh/api.md b/zh/api.md index 15daaddf..1125a36d 100644 --- a/zh/api.md +++ b/zh/api.md @@ -2,7 +2,7 @@ ## `createRenderer([options])` -Create a [`Renderer`](#class-renderer) instance with (optional) [options](#renderer-options). +使用（可选的）[选项](#renderer-options)创建一个 [`Renderer`](#class-renderer) 实例。 ```js const { createRenderer } = require('vue-server-renderer') @@ -11,20 +11,20 @@ const renderer = createRenderer({ ... }) ## `createBundleRenderer(bundle[, options])` -Create a [`BundleRenderer`](#class-bundlerenderer) instance with a server bundle and (optional) [options](#renderer-options). +使用 server bundle 和（可选的）[选项](#renderer-options)创建一个 [`BundleRenderer`](#class-bundlerenderer) 实例。 ```js const { createBundleRenderer } = require('vue-server-renderer') const renderer = createBundleRenderer(serverBundle, { ... }) ``` -The `serverBundle` argument can be one of the following: +`serverBundle` 参数可以是以下之一： - 绝对路径，指向一个已经构建好的 bundle 文件（`.js` 或 `.json`）。必须以 `/` 开头才会被识别为文件路径。 -- A bundle object generated by webpack + `vue-server-renderer/server-plugin`. -- A string of JavaScript code (not recommended). +- 由 webpack + `vue-server-renderer/server-plugin` 生成的 bundle 对象。 +- JavaScript 代码字符串（不推荐）。 -See [Introducing the Server Bundle](./bundle-renderer.md) and [Build Configuration](./build-config.md) for more details. +更多细节请查看 [Server Bundle 指引](./bundle-renderer.md) 和 [构建配置](./build-config.md)。 ## `Class: Renderer` @@ -34,59 +34,59 @@ See [Introducing the Server Bundle](./bundle-renderer.md) and [Build Configurati - #### `renderer.renderToStream(vm[, context])` - Render a Vue instance to a Node.js stream. The context object is optional. See [Streaming](./streaming.md) for more details. + 将 Vue 示例渲染为 Node.js 流(stream)。上下文对象(context object)可选。更多细节请查看[流式渲染](./streaming.md)。 ## `Class: BundleRenderer` - #### `bundleRenderer.renderToString([context, ]callback)` - Render the bundle to a string. The context object is optional. The callback is a typical Node.js style callback where the first argument is the error and the second argument is the rendered string. +将 bundle 渲染为字符串。上下文对象(context object)可选。回调是一个典型的Node.js样式回调，其中第一个参数是错误，第二个参数是呈现的字符串。 - #### `bundleRenderer.renderToStream([context])` - Render the bundle to a Node.js stream. The context object is optional. See [Streaming](./streaming.md) for more details. + 将 bundle 渲染为 Node.js 流(stream). 上下文对象(context object)可选。更多细节请查看[流式渲染](./streaming.md)。 -## Renderer Options +## Renderer 选项 - #### `template` Provide a template for the entire page's HTML. The template should contain a comment `` which serves as the placeholder for rendered app content. - The template also supports basic interpolation using the render context: +模板还支持使用渲染上下文(render context)进行基本插值： -- Use double-mustache for HTML-escaped interpolation; -- Use triple-mustache for non-HTML-escaped interpolation. +- 使用双花括号(double-mustache)进行 HTML 转义插值(HTML-escaped interpolation)； +- 使用三花括号(triple-mustache)进行 HTML 不转义插值(non-HTML-escaped interpolation)。 - The template automatically injects appropriate content when certain data is found on the render context: +当在渲染上下文(render context)找到某些数据时，模板会自动注入合适的内容： -- `context.head`: (string) any head markup that should be injected into the head of the page. -- `context.styles`: (string) any inline CSS that should be injected into the head of the page. Note this property will be automatically populated if using `vue-loader` + `vue-style-loader` for component CSS. -- `context.state`: (Object) initial Vuex store state that should be inlined in the page as `window.__INITIAL_STATE__`. The inlined JSON is automatically sanitized with [serialize-javascript](https://github.com/yahoo/serialize-javascript) to prevent XSS. +- `context.head`：（字符串）任意 head 标记(markup)，将注入到页面头部。 +- `context.styles`：（字符串）任意内联 CSS，将注入到页面头部。注意，如果对组件 CSS 使用 `vue-loader` + `vue-style-loader`，此属性将自动填充。 +- `context.state`：（对象）初始 Vuex store 状态，将作为 `window.__INITIAL_STATE__` 内联到页面。内联的 JSON 将使用 [serialize-javascript](https://github.com/yahoo/serialize-javascript) 自动清理，以防止 XSS 攻击。 - In addition, when `clientManifest` is also provided, the template automatically injects the following: + 此外，当提供 `clientManifest` 时，模板会自动注入以下内容： -- Client-side JavaScript and CSS assets needed by the render (with async chunks automatically inferred); +- 渲染所需的客户端 JavaScript 和 CSS 资源（使用异步 chunk 自动推断）； - Optimal `` resource hints for the rendered page. - You can disable all automatic injections by also passing `inject: false` to the renderer. + 你也可以通过将 `inject: false` 传递给 renderer，来禁用所有自动注入。 - See also: +具体查看： -- [Using a Page Template](./basic.md#using-a-page-template) -- [Manual Asset Injection](./build-config.md#manual-asset-injection) +- [使用一个页面模板](./basic.md#using-a-page-template) +- [手动资源注入(Manual Asset Injection)](./build-config.md#manual-asset-injection) - #### `clientManifest` - 2.3.0+ - Provide a client build manifest object generated by `vue-server-renderer/client-plugin`. The client manifest provides the bundle renderer with the proper information for automatic asset injection into the HTML template. For more details, see [Generating clientManifest](./build-config.md#generating-clientmanifest). + 生成由 `vue-server-renderer/client-plugin` 生成的客户端构建 manifest 对象(client build manifest object)。客户端 manifest 对象(client manifest)通过「向 HTML 模板自动资源注入」可以为 bundle renderer 提供合适信息。更多详细信息，请查看[生成 clientManifest](./build-config.md#generating-clientmanifest)。 - #### `inject` - 2.3.0+ - Controls whether to perform automatic injections when using `template`. Defaults to `true`. + 控制使用 `template` 时是否执行自动注入。默认是 `true`。 - See also: [Manual Asset Injection](./build-config.md#manual-asset-injection). + 参考：[手动资源注入(Manual Asset Injection)](./build-config.md#manual-asset-injection)。 - #### `shouldPreload` @@ -95,16 +95,16 @@ See [Introducing the Server Bundle](./bundle-renderer.md) and [Build Configurati A function to control what files should have `` resource hints generated. - By default, only JavaScript and CSS files will be preloaded, as they are absolutely needed for your application to boot. +默认情况下，只有 JavaScript 和 CSS 文件会被预加载，因为它们是引导应用程序所必需的。 - For other types of assets such as images or fonts, preloading too much may waste bandwidth and even hurt performance, so what to preload will be scenario-dependent. You can control precisely what to preload using the `shouldPreload` option: + 对于其他类型的资源（如图像或字体），预加载过多可能会浪费带宽，甚至损害性能，因此预加载什么资源具体依赖于场景。你可以使用 `shouldPreload` 选项精确控制预加载资源： ```js const renderer = createBundleRenderer(bundle, { template, clientManifest, shouldPreload: (file, type) => { - // type is inferred based on the file extension. + // 基于文件扩展名的类型推断。 // https://fetch.spec.whatwg.org/#concept-request-destination if (type === 'script' || type === 'style') { return true @@ -125,35 +125,35 @@ See [Introducing the Server Bundle](./bundle-renderer.md) and [Build Configurati #### `runInNewContext` - 2.3.0+ - - only used in `createBundleRenderer` + - 只用于 `createBundleRenderer` - Expects: `boolean | 'once'` (`'once'` only supported in 2.3.1+) - By default, for each render the bundle renderer will create a fresh V8 context and re-execute the entire bundle. This has some benefits - for example, the app code is isolated from the server process and we don't need to worry about the [stateful singleton problem](./structure.md#avoid-stateful-singletons) mentioned in the docs. However, this mode comes at some considerable performance cost because re-executing the bundle is expensive especially when the app gets bigger. + 默认情况下，对于每次渲染，bundle renderer 将创建一个新的 V8 上下文并重新执行整个 bundle。这具有一些好处 - 例如，应用程序代码与服务器进程隔离，我们无需担心文档中提到的[状态单例问题](./structure.md#avoid-stateful-singletons)。然而，这种模式有一些相当大的性能开销，因为重新执行 bundle 带来 高性能开销，特别是当应用程序很大时。 - This option defaults to `true` for backwards compatibility, but it is recommended to use `runInNewContext: false` or `runInNewContext: 'once'` whenever you can. + 此选项默认为 `true` 用于向后兼容，但建议你尽可能使用 `runInNewContext: false` 或 `runInNewContext: 'once'`。 -> In 2.3.0 this option has a bug where `runInNewContext: false` still executes the bundle using a separate global context. The following information assumes version 2.3.1+. +> 在 2.3.0 中，此选项有一个 bug，其中 `runInNewContext: false` 仍然使用独立的全局上下文(separate global context)执行 bundle。以下信息假定版本为 2.3.1+。 - With `runInNewContext: false`, the bundle code will run in the same `global` context with the server process, so be careful about code that modifies `global` in your application code. + 使用 `runInNewContext: false`，bundle 代码将与服务器进程在同一个 `global` 上下文中运行，所以请留意在应用程序代码中，会修改 `global` 的代码。 - With `runInNewContext: 'once'` (2.3.1+), the bundle is evaluated in a separate `global` context, however only once at startup. This provides better app code isolation since it prevents the bundle from accidentally polluting the server process' `global` object. The caveats are that: + 使用 `runInNewContext: 'once'` (2.3.1+)，bundle 将在独立的`全局`上下文(separate global context)取值，然而只在启动时取值一次。这提供了更好的应用程序代码隔离，因为它防止 bundle 意外污染服务器进程的 `global` 对象。注意事项如下： -1. Dependencies that modifies `global` (e.g. polyfills) cannot be externalized in this mode; -2. Values returned from the bundle execution will be using different global constructors, e.g. an error caught inside the bundle will not be an instance of `Error` in the server process. +1. 在此模式下，修改 `global`（例如，polyfill）的依赖模块不能进行外部暴露； +2. 从 bundle 执行返回的值将使用不同的全局构造函数，例如，在服务器进程中捕获到 bundle 的内部错误，不会是 `Error` 的一个实例。 - See also: [Source Code Structure](./structure.md) + 参考：[源码结构](./structure.md) - #### `basedir` - 2.2.0+ - - only used in `createBundleRenderer` + - 只用于 `createBundleRenderer` - Explicitly declare the base directory for the server bundle to resolve `node_modules` dependencies from. This is only needed if your generated bundle file is placed in a different location from where the externalized NPM dependencies are installed, or your `vue-server-renderer` is npm-linked into your current project. + 显式地声明 server bundle 的基本目录(base directory)，以从 `node_modules` 解析依赖模块。只有在所生成的 bundle 文件与外部的 NPM 依赖模块放置在不同位置，或者 `vue-server-renderer` 是通过 npm-linked 链接当前项目中时，才需要配置。 - #### `cache` - Provide a [component cache](./caching.md#component-level-caching) implementation. The cache object must implement the following interface (using Flow notations): + 提供[组件缓存](./caching.md#component-level-caching)具体实现。缓存对象必须实现以下接口（使用 Flow 记号）： ```js type RenderCache = { @@ -163,7 +163,7 @@ See [Introducing the Server Bundle](./bundle-renderer.md) and [Build Configurati }; ``` - A typical usage is passing in an [lru-cache](https://github.com/isaacs/node-lru-cache): + 典型用法是传入 [lru-cache](https://github.com/isaacs/node-lru-cache)： ```js const LRU = require('lru-cache') @@ -174,14 +174,14 @@ See [Introducing the Server Bundle](./bundle-renderer.md) and [Build Configurati }) ``` - Note that the cache object should at least implement `get` and `set`. In addition, `get` and `has` can be optionally async if they accept a second argument as callback. This allows the cache to make use of async APIs, e.g. a redis client: + 请注意，缓存对象应至少要实现 `get` 和 `set`。此外，如果 `get` 和 `has` 接收第二个参数作为回调，那 `get` 和 `has` 也可以是可选的异步函数。这允许缓存使用异步 API，例如，一个 redis 客户端： ```js const renderer = createRenderer({ cache: { get: (key, cb) => { redisClient.get(key, (err, res) => { - // handle error if any + // 处理任何错误 cb(res) }) }, @@ -194,35 +194,35 @@ See [Introducing the Server Bundle](./bundle-renderer.md) and [Build Configurati - #### `directives` - Allows you to provide server-side implementations for your custom directives: +对于自定义指令，允许提供服务器端实现： ```js const renderer = createRenderer({ directives: { example (vnode, directiveMeta) { - // transform vnode based on directive binding metadata + // 基于指令绑定元数据(metadata)转换 vnode } } }) ``` - As an example, check out [`v-show`'s server-side implementation](https://github.com/vuejs/vue/blob/dev/src/platforms/web/server/directives/show.js). + 例如，请查看 [`v-show` 的服务器端实现](https://github.com/vuejs/vue/blob/dev/src/platforms/web/server/directives/show.js)。 -## webpack Plugins +## webpack 插件 -The webpack plugins are provided as standalone files and should be required directly: +webpack 插件作为独立文件提供，并且应当直接 require： ```js const VueSSRServerPlugin = require('vue-server-renderer/server-plugin') const VueSSRClientPlugin = require('vue-server-renderer/client-plugin') ``` -The default files generated are: +生成的默认文件是： -- `vue-ssr-server-bundle.json` for the server plugin; -- `vue-ssr-client-manifest.json` for the client plugin. +- `vue-ssr-server-bundle.json` 用于服务器端插件； +- `vue-ssr-client-manifest.json` 用于客户端插件。 -The filenames can be customized when creating the plugin instances: +创建插件实例时可以自定义文件名： ```js const plugin = new VueSSRServerPlugin({ @@ -230,4 +230,4 @@ const plugin = new VueSSRServerPlugin({ }) ``` -See [Build Configuration](./build-config.md) for more information. +更多信息请查看[构建配置](./build-config.md)。 From d7f0da72260a6aa7bec2663b23b55980dfd106ff Mon Sep 17 00:00:00 2001 From: Ryo Chikazawa Date: Thu, 15 Jun 2017 12:28:41 +0800 Subject: [PATCH 19/32] Translate api.md via GitLocalize --- zh/api.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/zh/api.md b/zh/api.md index 1125a36d..55efde91 100644 --- a/zh/api.md +++ b/zh/api.md @@ -50,7 +50,7 @@ const renderer = createBundleRenderer(serverBundle, { ... }) - #### `template` - Provide a template for the entire page's HTML. The template should contain a comment `` which serves as the placeholder for rendered app content. + 为整个页面的 HTML 提供一个模板。此模板应包含注释 ``，作为渲染应用程序内容的占位符。 模板还支持使用渲染上下文(render context)进行基本插值： @@ -66,7 +66,7 @@ const renderer = createBundleRenderer(serverBundle, { ... }) 此外，当提供 `clientManifest` 时，模板会自动注入以下内容： - 渲染所需的客户端 JavaScript 和 CSS 资源（使用异步 chunk 自动推断）； -- Optimal `` resource hints for the rendered page. +- 为要渲染页面提供最佳的 `` 资源提示(resource hints)。 你也可以通过将 `inject: false` 传递给 renderer，来禁用所有自动注入。 @@ -93,7 +93,7 @@ const renderer = createBundleRenderer(serverBundle, { ... }) - 2.3.0+ - A function to control what files should have `` resource hints generated. + 一个函数，用来控制什么文件应该生成 `` 资源预加载提示(resource hints)。 默认情况下，只有 JavaScript 和 CSS 文件会被预加载，因为它们是引导应用程序所必需的。 From 43d0167bc1a97b43dce416fb461f0df8cad0b7f0 Mon Sep 17 00:00:00 2001 From: Evan You Date: Thu, 15 Jun 2017 12:58:57 +0800 Subject: [PATCH 20/32] Translate api.md via GitLocalize --- zh/api.md | 52 ++++++++++++++++++++++++++-------------------------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/zh/api.md b/zh/api.md index 55efde91..af05ee57 100644 --- a/zh/api.md +++ b/zh/api.md @@ -30,42 +30,42 @@ const renderer = createBundleRenderer(serverBundle, { ... }) - #### `renderer.renderToString(vm[, context], callback)` - 将 Vue 实例渲染为字符串。上下文对象(context object)可选。回调函数是典型的 Node.js 风格回调，其中第一个参数是 error，第二个参数是渲染的字符串。 + 将 Vue 实例渲染为字符串。上下文对象 (context object) 可选。回调函数是典型的 Node.js 风格回调，其中第一个参数是可能抛出的错误，第二个参数是渲染完毕的字符串。 - #### `renderer.renderToStream(vm[, context])` - 将 Vue 示例渲染为 Node.js 流(stream)。上下文对象(context object)可选。更多细节请查看[流式渲染](./streaming.md)。 + 将 Vue 实例渲染为一个 Node.js 流 (stream)。上下文对象 (context object) 可选。更多细节请查看[流式渲染](./streaming.md)。 ## `Class: BundleRenderer` - #### `bundleRenderer.renderToString([context, ]callback)` -将 bundle 渲染为字符串。上下文对象(context object)可选。回调是一个典型的Node.js样式回调，其中第一个参数是错误，第二个参数是呈现的字符串。 +将 bundle 渲染为字符串。上下文对象 (context object) 可选。回调是一个典型的 Node.js 风格回调，其中第一个参数是可能抛出的错误，第二个参数是渲染完毕的字符串。 - #### `bundleRenderer.renderToStream([context])` - 将 bundle 渲染为 Node.js 流(stream). 上下文对象(context object)可选。更多细节请查看[流式渲染](./streaming.md)。 + 将 bundle 渲染为一个 Node.js 流 (stream). 上下文对象 (context object) 可选。更多细节请查看[流式渲染](./streaming.md)。 ## Renderer 选项 - #### `template` - 为整个页面的 HTML 提供一个模板。此模板应包含注释 ``，作为渲染应用程序内容的占位符。 + 为整个页面的 HTML 提供一个模板。此模板应包含注释 ``，作为渲染应用内容的占位符。 -模板还支持使用渲染上下文(render context)进行基本插值： +模板还支持使用渲染上下文 (render context) 进行基本插值： -- 使用双花括号(double-mustache)进行 HTML 转义插值(HTML-escaped interpolation)； -- 使用三花括号(triple-mustache)进行 HTML 不转义插值(non-HTML-escaped interpolation)。 +- 使用双花括号 (double-mustache) 进行 HTML 转义插值 (HTML-escaped interpolation)； +- 使用三花括号 (triple-mustache) 进行 HTML 不转义插值 (non-HTML-escaped interpolation)。 -当在渲染上下文(render context)找到某些数据时，模板会自动注入合适的内容： +当在渲染上下文 (render context) 上存在一些特定属性时，模板会自动注入对应的内容： -- `context.head`：（字符串）任意 head 标记(markup)，将注入到页面头部。 -- `context.styles`：（字符串）任意内联 CSS，将注入到页面头部。注意，如果对组件 CSS 使用 `vue-loader` + `vue-style-loader`，此属性将自动填充。 -- `context.state`：（对象）初始 Vuex store 状态，将作为 `window.__INITIAL_STATE__` 内联到页面。内联的 JSON 将使用 [serialize-javascript](https://github.com/yahoo/serialize-javascript) 自动清理，以防止 XSS 攻击。 +- `context.head`：（字符串）将会被作为 HTML 注入到页面的头部 (head) 里。 +- `context.styles`：（字符串）内联 CSS，将以 style 标签的形式注入到页面头部。注意，如过你使用了 `vue-loader` + `vue-style-loader` 来处理组件 CSS，此属性会在构建过程中被自动生成。 +- `context.state`：（对象）初始 Vuex store 状态，将以 `window.__INITIAL_STATE__` 的形式内联到页面。内联的 JSON 将使用 [serialize-javascript](https://github.com/yahoo/serialize-javascript) 自动清理，以防止 XSS 攻击。 此外，当提供 `clientManifest` 时，模板会自动注入以下内容： -- 渲染所需的客户端 JavaScript 和 CSS 资源（使用异步 chunk 自动推断）； +- 渲染当前页面所需的最优客户端 JavaScript 和 CSS 资源（支持自动推导异步代码分割所需的文件） - 为要渲染页面提供最佳的 `` 资源提示(resource hints)。 你也可以通过将 `inject: false` 传递给 renderer，来禁用所有自动注入。 @@ -77,7 +77,7 @@ const renderer = createBundleRenderer(serverBundle, { ... }) - #### `clientManifest` - 2.3.0+ - 生成由 `vue-server-renderer/client-plugin` 生成的客户端构建 manifest 对象(client build manifest object)。客户端 manifest 对象(client manifest)通过「向 HTML 模板自动资源注入」可以为 bundle renderer 提供合适信息。更多详细信息，请查看[生成 clientManifest](./build-config.md#generating-clientmanifest)。 + 通过此选项提供一个由 `vue-server-renderer/client-plugin` 生成的客户端构建 manifest 对象 (client build manifest object)。此对象包含了 webpack 整个构建过程的信息，从而可以让 bundle renderer 自动推导需要在 HTML 模板中注入的内容。更多详细信息，请查看[生成 clientManifest](./build-config.md#generating-clientmanifest)。 - #### `inject` @@ -93,9 +93,9 @@ const renderer = createBundleRenderer(serverBundle, { ... }) - 2.3.0+ - 一个函数，用来控制什么文件应该生成 `` 资源预加载提示(resource hints)。 + 一个函数，用来控制什么文件应该生成 `` 资源预加载提示 (resource hints)。 -默认情况下，只有 JavaScript 和 CSS 文件会被预加载，因为它们是引导应用程序所必需的。 +默认情况下，只有 JavaScript 和 CSS 文件会被预加载，因为它们是启动应用时所必需的。 对于其他类型的资源（如图像或字体），预加载过多可能会浪费带宽，甚至损害性能，因此预加载什么资源具体依赖于场景。你可以使用 `shouldPreload` 选项精确控制预加载资源： @@ -126,20 +126,20 @@ const renderer = createBundleRenderer(serverBundle, { ... }) - 2.3.0+ - 只用于 `createBundleRenderer` - - Expects: `boolean | 'once'` (`'once'` only supported in 2.3.1+) + - Expects: `boolean | 'once'` (`'once'` 仅在 2.3.1+ 中支持) - 默认情况下，对于每次渲染，bundle renderer 将创建一个新的 V8 上下文并重新执行整个 bundle。这具有一些好处 - 例如，应用程序代码与服务器进程隔离，我们无需担心文档中提到的[状态单例问题](./structure.md#avoid-stateful-singletons)。然而，这种模式有一些相当大的性能开销，因为重新执行 bundle 带来 高性能开销，特别是当应用程序很大时。 + 默认情况下，对于每次渲染，bundle renderer 将创建一个新的 V8 上下文并重新执行整个 bundle。这具有一些好处 - 例如，应用程序代码与服务器进程隔离，我们无需担心文档中提到的[状态单例问题](./structure.md#avoid-stateful-singletons)。然而，这种模式有一些相当大的性能开销，因为重新创建上下文并执行整个 bundle 还是相当昂贵的，特别是当应用很大的时候。 - 此选项默认为 `true` 用于向后兼容，但建议你尽可能使用 `runInNewContext: false` 或 `runInNewContext: 'once'`。 + 出于向后兼容的考虑，此选项默认为 `true`，但建议你尽可能使用 `runInNewContext: false` 或 `runInNewContext: 'once'`。 > 在 2.3.0 中，此选项有一个 bug，其中 `runInNewContext: false` 仍然使用独立的全局上下文(separate global context)执行 bundle。以下信息假定版本为 2.3.1+。 - 使用 `runInNewContext: false`，bundle 代码将与服务器进程在同一个 `global` 上下文中运行，所以请留意在应用程序代码中，会修改 `global` 的代码。 + 使用 `runInNewContext: false`，bundle 代码将与服务器进程在同一个 `global` 上下文中运行，所以请留意在应用程序代码中尽量避免修改 `global`。 - 使用 `runInNewContext: 'once'` (2.3.1+)，bundle 将在独立的`全局`上下文(separate global context)取值，然而只在启动时取值一次。这提供了更好的应用程序代码隔离，因为它防止 bundle 意外污染服务器进程的 `global` 对象。注意事项如下： + 使用 `runInNewContext: 'once'` (2.3.1+)，bundle 将在独立的`全局`上下文 (separate global context) 取值，然而只在启动时取值一次。这提供了一定程度的应用程序代码隔离，因为它能够防止 bundle 中的代码意外污染服务器进程的 `global` 对象。注意事项如下： -1. 在此模式下，修改 `global`（例如，polyfill）的依赖模块不能进行外部暴露； -2. 从 bundle 执行返回的值将使用不同的全局构造函数，例如，在服务器进程中捕获到 bundle 的内部错误，不会是 `Error` 的一个实例。 +1. 在此模式下，修改 `global`（例如，polyfill）的依赖模块必须被打包进 bundle，不能被外部化 (externalize)； +2. 从 bundle 执行返回的值将使用不同的全局构造函数，例如，在服务器进程中捕获到 bundle 内部抛出的错误，使用的是 bundle 上下文中的 Error 构造函数，所以它不会是服务器进程中 `Error` 的一个实例。 参考：[源码结构](./structure.md) @@ -149,11 +149,11 @@ const renderer = createBundleRenderer(serverBundle, { ... }) - 2.2.0+ - 只用于 `createBundleRenderer` - 显式地声明 server bundle 的基本目录(base directory)，以从 `node_modules` 解析依赖模块。只有在所生成的 bundle 文件与外部的 NPM 依赖模块放置在不同位置，或者 `vue-server-renderer` 是通过 npm-linked 链接当前项目中时，才需要配置。 + 显式地声明 server bundle 的运行目录。运行时将会以此目录为基准来解析 `node_modules` 中的依赖模块。只有在所生成的 bundle 文件与外部的 NPM 依赖模块放置在不同位置，或者 `vue-server-renderer` 是通过 npm link 链接到当前项目中时，才需要配置此选项。 - #### `cache` - 提供[组件缓存](./caching.md#component-level-caching)具体实现。缓存对象必须实现以下接口（使用 Flow 记号）： + 提供[组件缓存](./caching.md#component-level-caching)具体实现。缓存对象必须实现以下接口（使用 Flow 语法表示）： ```js type RenderCache = { @@ -174,7 +174,7 @@ const renderer = createBundleRenderer(serverBundle, { ... }) }) ``` - 请注意，缓存对象应至少要实现 `get` 和 `set`。此外，如果 `get` 和 `has` 接收第二个参数作为回调，那 `get` 和 `has` 也可以是可选的异步函数。这允许缓存使用异步 API，例如，一个 redis 客户端： + 请注意，缓存对象应至少要实现 `get` 和 `set`。此外，如果 `get` 和 `has` 接收第二个参数作为回调，那 get 和 has 也可以是可选的异步函数。这允许缓存使用异步 API，例如，一个 redis 客户端： ```js const renderer = createRenderer({ From 9afac950cffdfe3e66dd8632e6a05907ff1d6a76 Mon Sep 17 00:00:00 2001 From: ChangJoo Park Date: Thu, 15 Jun 2017 20:18:48 +0900 Subject: [PATCH 21/32] Update routing.md --- ko/routing.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ko/routing.md b/ko/routing.md index 51349679..b6d62a2d 100644 --- a/ko/routing.md +++ b/ko/routing.md @@ -68,7 +68,7 @@ export default context => { } ``` -서버 번들이 이미 빌드되었다고 가정하면 (빌드 설정은 이 단계에서는 무시합니다.) 서버 코드는 다음과 같습니다. +이미 서버 번들이 빌드되었다고 가정하면 (빌드 설정은 이 단계에서는 무시합니다.) 서버 코드는 다음과 같습니다. ```js // server.js @@ -104,7 +104,7 @@ import Foo from './Foo.vue' const Foo = () => import('./Foo.vue') ``` -이는 순수 클라이언트 측 Vue 앱을 만드는 어떠한 시나리오에서도 작동합니다. 그러나 SSR을 할 때 몇가지 제한 사항이 있습니다. 먼저 렌더링을 시작하기 전에 서버에서 모든 비동기 컴포넌트를 처리해야합니다. 그렇지 않으면 마크업에 미처 불러오지 못한 부분들이 생깁니다. 클라이언트에서 처리하기 전에 이를 마무리해야합니다. 그렇지 않으면 클라이언트와의 컨텐츠가 일치하지 않는 에러가 발생할 수 있습니다. +이는 순수 클라이언트 측 Vue 앱을 만드는 어떠한 시나리오에서도 작동합니다. 그러나 SSR을 사용할 때 몇가지 제한 사항이 있습니다. 먼저 렌더링을 시작하기 전에 서버에서 모든 비동기 컴포넌트를 처리해야합니다. 그렇지 않으면 마크업에 미처 불러오지 못한 부분들이 생깁니다. 클라이언트에서 처리하기 전에 이를 마무리해야합니다. 그렇지 않으면 클라이언트와의 컨텐츠가 일치하지 않는 에러가 발생할 수 있습니다. 이로 인해 앱의 임의의 위치에서 비동기 컴포넌트를 사용하는 것이 약간 까다로울 수 있습니다.(향후 이 기능이 향상됩니다.) 그러나 **라우트 레벨에서 수행하는 경우**(라우트 컴포넌트에서 비동기 컴포넌트 사용) 원할히 작동합니다. 라우트를 해석할 때 (vue-router와 일치하는 비동기 컴포넌트를 자동으로 분석할 때) 해야할 일은 서버와 클라이언트 모두에서 `router.onReady`를 사용해야 합니다. From 775e882b0aea4d5bddc25f1f297dbbffe36b2fc5 Mon Sep 17 00:00:00 2001 From: ChangJoo Park Date: Thu, 15 Jun 2017 20:19:48 +0900 Subject: [PATCH 22/32] Update universal.md --- ko/universal.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ko/universal.md b/ko/universal.md index 3013ed78..97a68b25 100644 --- a/ko/universal.md +++ b/ko/universal.md @@ -26,7 +26,7 @@ ## 사용자 정의 디렉티브 -대부분의 사용자 지정 디렉티브는 DOM을 직접 조작하므로 SSR중 오류가 발생합니다. 이 문제를 해결하는 방법은 두가지 입니다. +대부분의 사용자 정의 디렉티브는 DOM을 직접 조작하므로 SSR중 오류가 발생합니다. 이 문제를 해결하는 방법은 두가지 입니다. 1. 추상화 메커니즘으로 컴포넌트를 사용하고 가상 DOM 수준에서 작업해야합니다. (예 : 렌더링 기능 사용) 2. 컴포넌트로 쉽게 바꿀 수 없는 사용자 정의 디렉티브가 있는 경우 서버 렌더러를 만들 때 [`directives`](./api.md#directives)옵션을 사용해 "서버용 버전"을 제공할 수 있습니다. From d378e64e762899a9786212ad1bf88104525006b1 Mon Sep 17 00:00:00 2001 From: ChangJoo Park Date: Thu, 15 Jun 2017 20:22:30 +0900 Subject: [PATCH 23/32] Update README.md --- ko/README.md | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/ko/README.md b/ko/README.md index 6a86900f..99497a6c 100644 --- a/ko/README.md +++ b/ko/README.md @@ -3,13 +3,15 @@ > **참고사항:** 이 가이드는 아래에 표기된 라이브러리들의 최소 요구사항을 필요로 합니다. > - vue & vue-server-renderer >= 2.3.0 > - vue-router >= 2.5.0 -> - vue-loader >= 12.0.0 & vue-style-loader >= 3.0.0Vue 2.2 버전과 함께 SSR을 사용하고 있다면 권장하는 코드 구조가 [약간 다릅니다.](./structure.md) ([runInNewContext](./api.md#runinnewcontext)이 `false`로 설정됨) 기존 앱을 사용해야 하는 것이 맞지만 새로운 권장 방식으로 마이그레이션 하는 것이 좋습니다. +> - vue-loader >= 12.0.0 & vue-style-loader >= 3.0.0 + +Vue 2.2 버전과 함께 SSR을 사용하고 있다면 권장하는 코드 구조가 [약간 다릅니다.](./structure.md) ([runInNewContext](./api.md#runinnewcontext)이 `false`로 설정됨) 기존 앱을 사용해야 하는 것이 맞지만 새로운 권장 방식으로 마이그레이션 하는 것이 좋습니다. ## 서버사이드 렌더링(SSR)이란 무엇입니까? -Vue.js는 클라이언트 측 애플리케이션을 위한 프레임워크입니다. 기본적으로 Vue 컴포넌트는 브라우저에서 DOM을 생성 및 조작 후 출력합니다. 그러나 동일한 컴포넌트를 서버의 HTML 문자열로 렌더링하고 직접 브라우저로 보내고 마지막으로 정적 마크업을 클라이언트의 상호작용하는 애플리케이션으로 "hydrate" 하는 것도 가능합니다. +Vue.js는 클라이언트 측 애플리케이션을 위한 프레임워크입니다. 기본적으로 Vue 컴포넌트는 브라우저에서 DOM을 생성 및 조작 후 출력합니다. 그러나 동일한 컴포넌트를 서버의 HTML 문자열로 렌더링한 후 직접 브라우저로 보내고 마지막으로 정적 마크업을 클라이언트의 상호작용하는 애플리케이션으로 "hydrate" 하는 것도 가능합니다. -서버에서 렌더링된 Vue.js 앱은 코드 대부분이 서버와 클라이언트 모두에서 실행하는 점에서 "같은 형태" **이며** "범용적"으로 여겨질 수 있습니다. +서버에서 렌더링된 Vue.js 앱은 코드 대부분이 서버와 클라이언트 모두에서 실행하는 점에서 "같은 형태" **이며** "범용적"으로 여겨질 수 있습니다. ## 왜 SSR을 사용하나요? @@ -31,15 +33,15 @@ Vue.js는 클라이언트 측 애플리케이션을 위한 프레임워크입니 ## 서버 사이드 렌더링 vs 사전 렌더링 -몇 가지 마케팅 페이지 (예 : `/`, `/about`, `/contact` 등)의 검색 엔진 최적화를 개선하기 위해 SSR을 고려하는 중이라면 **사전 렌더링**이 더 좋습니다. HTML을 즉석에서 컴파일하기 위해 웹 서버를 사용하는 대신 사전 렌더링은 빌드시 특정 경로에 대한 정적 HTML 파일을 생성합니다. 장점은 미리 렌더링을 설정하는 것이 훨씬 간단하며 프론트 엔드를 완전히 정적 인 사이트로 유지할 수 있다는 것입니다. +몇 가지 마케팅 페이지 (예 : `/`, `/about`, `/contact` 등)의 검색 엔진 최적화를 개선하기 위해 SSR을 고려하는 중이라면 **사전 렌더링**이 더 좋습니다. HTML을 즉석에서 컴파일하기 위해 웹 서버를 사용하는 대신 사전 렌더링은 빌드시 특정 경로에 대한 정적 HTML 파일을 생성합니다. 장점은 미리 렌더링을 설정하는 것이 훨씬 간단하며 프론트 엔드를 완전히 정적인 사이트로 유지할 수 있다는 것입니다. -webpack을 사용하는 경우 p[prerender-spa-plugin](https://github.com/chrisvfritz/prerender-spa-plugin)을 사용하여 사전 렌더링을 쉽게 추가 할 수 있습니다. Vue 앱으로 광범위하게 테스트되었습니다. 실제로 [제작자](https://github.com/chrisvfritz)는 Vue 핵심 팀의 멤버입니다. +webpack을 사용하는 경우 [prerender-spa-plugin](https://github.com/chrisvfritz/prerender-spa-plugin)을 사용하여 사전 렌더링을 쉽게 추가 할 수 있습니다. Vue 앱으로 광범위하게 테스트되었습니다. 실제로 [제작자](https://github.com/chrisvfritz)는 Vue 핵심 팀의 멤버입니다. ## 이 가이드에 관하여 이 안내서는 Node.js를 서버로 사용하는 서버 렌더링 싱글 페이지 애플리케이션에 중점을 둡니다. Vue SSR과 다른 백엔드 설정을 혼용하는 것은 다른 주제이므로 이 가이드에서는 다루지 않습니다. -이 가이드는 매우 깊이 있고 Vue.js 자체에 이미 익숙하고 Node.js와 webpack에 대한 실제 지식이 있다고 가정합니다. Next.js를 사용해 보세요. 즉시 원활하게 사용할 수있는 더 높은 수준의 솔루션을 원한다면 [Nuxt.js](http://nuxtjs.org/)를 사용해보십시오. 동일한 Vue 스택을 기반으로하지만 많은 상용구를 추상화하고 정적 사이트 생성과 같은 몇 가지 추가 기능을 제공합니다. 그러나 앱 구조를 직접 제어해야하는 경우 사용방식이 맞지 않을 수 있습니다. 그럼에도 불구하고 상황이 어떻게 작동하는지 더 잘 이해하기 위해 이 안내서를 읽는 것이 여전히 유용 할 것입니다. +이 가이드는 매우 깊이 있고 Vue.js 자체에 이미 익숙하고 Node.js와 webpack에 대한 실제 지식이 있다고 가정합니다. 즉시 원활하게 사용할 수있는 더 높은 수준의 솔루션을 원한다면 [Nuxt.js](http://nuxtjs.org/)를 사용해보십시오. 동일한 Vue 스택을 기반으로하지만 많은 상용구를 추상화하고 정적 사이트 생성과 같은 몇 가지 추가 기능을 제공합니다. 그러나 앱 구조를 직접 제어해야하는 경우 사용방식이 맞지 않을 수 있습니다. 그럼에도 불구하고 상황이 어떻게 작동하는지 더 잘 이해하기 위해 이 안내서를 읽는 것이 여전히 유용할 것입니다. 이 가이드를 읽으면서 가이드가 다루는 대부분의 기술을 사용하는 [HackerNews Demo](https://github.com/vuejs/vue-hackernews-2.0/)를 참조하는 것이 도움이 될 것입니다. From f2c6f339cba308877dc640422d18821c3d6432f5 Mon Sep 17 00:00:00 2001 From: ChangJoo Park Date: Thu, 15 Jun 2017 20:24:22 +0900 Subject: [PATCH 24/32] Update head.md --- ko/head.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/ko/head.md b/ko/head.md index 0ad9a4f9..dfc0ef6e 100644 --- a/ko/head.md +++ b/ko/head.md @@ -60,23 +60,23 @@ export default { } ``` -번들 렌더러에 전달된 `template` 내부 +번들 렌더러에 전달된 `template` 내부입니다 ```html - + {{ title }} - - + + ... - + ``` **참고** - 두개의 mustache(HTML 이스케이프된 보간)를 사용해 XSS 공격을 피해야 합니다. -- 렌더링하는 동안 컴포넌트에 title을 설정하지 않은 경우 `context` 개체를 만들 때 기본 title을 제공해야합니다. +- 렌더링하는 동안 컴포넌트에 title을 설정하지 않은 경우 `context` 객체를 만들 때 기본 title을 제공해야합니다. --- From dfb55d9f880277749b5193e13c3e5320ab50906f Mon Sep 17 00:00:00 2001 From: ChangJoo Park Date: Thu, 15 Jun 2017 20:24:28 +0900 Subject: [PATCH 25/32] Update README.md --- ko/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ko/README.md b/ko/README.md index 99497a6c..390fd83e 100644 --- a/ko/README.md +++ b/ko/README.md @@ -45,4 +45,4 @@ webpack을 사용하는 경우 [prerender-spa-plugin](https://github.com/chrisvf 이 가이드를 읽으면서 가이드가 다루는 대부분의 기술을 사용하는 [HackerNews Demo](https://github.com/vuejs/vue-hackernews-2.0/)를 참조하는 것이 도움이 될 것입니다. -마지막으로, 이 가이드는 완벽하지 않습니다. 잘 작동하고 있는 것을 알고 있지만 개선할 여지가 있습니다. 이 가이드는 미래에 개정 될 수 있습니다. 풀 리퀘스트를 해주세요 +마지막으로, 이 가이드는 완벽하지 않습니다. 잘 작동하고 있는 것을 알고 있지만 개선할 여지가 있습니다. 이 가이드는 앞으로 개정 될 수 있습니다. 풀 리퀘스트를 해주세요 From fe009687094299bb0eb91cbb4591de3b45449767 Mon Sep 17 00:00:00 2001 From: ChangJoo Park Date: Thu, 15 Jun 2017 20:27:20 +0900 Subject: [PATCH 26/32] Update caching.md --- ko/caching.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/ko/caching.md b/ko/caching.md index 2738e9b3..110bf82d 100644 --- a/ko/caching.md +++ b/ko/caching.md @@ -4,7 +4,7 @@ Vue의 SSR은 매우 빠르지만 컴포넌트 인스턴스 및 가상 DOM 노 ## 페이지 레벨 캐싱 -서버에서 렌더링된 애플리케이션은 외부 데이터를 사용하므로 본질적으로 내용은 동적이어서 오래동안 캐시할 수 없습니다. 그러나 컨텐츠가 사용자별로 다르면(즉, 동일한 URL의 경우 항상 모든 사용자에게 동일한 컨텐츠가 렌더링 됨) [micro-caching](https://www.nginx.com/blog/benefits-of-microcaching-nginx/)이라고 부르는 방식을 활용하여 높은 트래픽을 처리하는 앱의 성능을 대폭 향상시킬 수 있습니다. +서버에서 렌더링된 앱은 외부 데이터를 사용하므로 본질적인 내용은 동적이기 때문에 오랫동안 캐시할 수 없습니다. 그러나 컨텐츠가 사용자별로 다르면(즉, 동일한 URL의 경우 항상 모든 사용자에게 동일한 컨텐츠가 렌더링 됨) [micro-caching](https://www.nginx.com/blog/benefits-of-microcaching-nginx/)이라고 부르는 방식을 활용하여 높은 트래픽을 처리하는 앱의 성능을 대폭 향상시킬 수 있습니다. 이것은 일반적으로 Nginx 레이어에서 이루어지지만 Node.js에서도 구현할 수 있습니다. @@ -34,7 +34,7 @@ server.get('*', (req, res) => { }) ``` -컨텐츠는 단 1초 동안만 캐시되므로 사용자는 이전 컨텐츠는 보지 못합니다. 그러나 이는 서버가 각 캐시된 페이지에 대해 초당 최대 하나의 렌더링만 수행하면 된다는 것만 의미합니다. +컨텐츠는 단 1초 동안만 캐시되므로 사용자는 이전 컨텐츠를 볼 수 없습니다. 그러나 이는 서버가 각 캐시된 페이지에 대해 초당 최대 하나의 렌더링만 수행하면 된다는 것만 의미합니다. ## 컴포넌트 레벨 캐싱 @@ -76,7 +76,7 @@ export default { - 전역 상태에 의존하는 하위 컴포넌트를 가지고 있는 경우 - 렌더링 `context`에 사이드이펙트를 발생시키는 하위 컴포넌트가 있는 경우 -따라서 성능상의 병목을 해결하려면 컴포넌트 캐싱을 신중하게 적용해야합니다. 대부분의 경우 단일 인스턴스 컴포넌트를 캐시하지 않아도 됩니다. 캐싱에 적합한 가장 일반적인 유형의 컴포넌트는 큰`v-for` 목록에서 반복되는 컴포넌트입니다. 이러한 컴포넌트는 대개 데이터베이스 모음의 객체에 의해 구동되기 때문에 고유한 ID와 최종 업데이트된 타임스탬프를 사용하여 캐시키를 생성하는 간단한 캐싱 전략을 사용할 수 있습니다, +따라서 성능상의 병목을 해결하려면 컴포넌트 캐싱을 신중하게 적용해야합니다. 대부분의 경우 단일 인스턴스 컴포넌트를 캐시하지 않아도 됩니다. 캐싱에 적합한 가장 일반적인 유형의 컴포넌트는 거대한 `v-for` 리스트에서 반복되는 컴포넌트입니다. 이러한 컴포넌트는 대개 데이터베이스 모음의 객체에 의해 구동되기 때문에 고유한 ID와 최종 업데이트된 타임스탬프를 사용하여 캐시키를 생성하는 간단한 캐싱 전략을 사용할 수 있습니다, ```js serverCacheKey: props => props.item.id + '::' + props.item.last_updated From 8813c0c108343c9700fa7f25c8e6d17c051ab7f1 Mon Sep 17 00:00:00 2001 From: ChangJoo Park Date: Thu, 15 Jun 2017 20:29:27 +0900 Subject: [PATCH 27/32] Update build-config.md --- ko/build-config.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/ko/build-config.md b/ko/build-config.md index 276a4b97..ba4c3c49 100644 --- a/ko/build-config.md +++ b/ko/build-config.md @@ -52,13 +52,13 @@ const renderer = createBundleRenderer('/path/to/vue-ssr-server-bundle.json', { }) ``` -또는, 번들을 Object로 만들어 `createBundleRenderer`에 전달할 수 있습니다. 이는 개발중 핫 리로드를 사용할 때 유용합니다. HackerNews 데모의 [설정](https://github.com/vuejs/vue-hackernews-2.0/blob/master/build/setup-dev-server.js)을 참조하세요. +또는, 번들을 객체로 만들어 `createBundleRenderer`에 전달할 수 있습니다. 이는 개발중 핫 리로드를 사용할 때 유용합니다. HackerNews 데모의 [설정](https://github.com/vuejs/vue-hackernews-2.0/blob/master/build/setup-dev-server.js)을 참조하세요. ### Externals 주의사항 `externals`옵션에서는 CSS파일을 허용하는 목록에 추가합니다. 의존성에서 가져온 CSS는 여전히 webpack에서 처리해야합니다. webpack을 사용하는 다른 유형의 파일을 가져오는 경우(예: `*.vue`, `*.sass`) 파일을 허용 목록에 추가해야합니다. -`runInNewContext: 'once'` 또는 `runInNewContext: true`를 사용하는 경우 `전역 변수`를 수정하는 폴리필을 허용 목록에 추가해야합니다. 예를 들어 `babel-polyfill`이 있습니다. 새 컨텍스트 모드를 사용할 때 **서버 번들의 내부 코드가 자체적으로 `전역` 객체를 가지고 있기 때문입니다.** Node 7.6버전 이상을 사용할 때 서버에서는 실제로 필요하지 않으므로 클라이언트에서 가져오는 것이 더 쉽습니다. +`runInNewContext: 'once'` 또는 `runInNewContext: true`를 사용하는 경우 `전역 변수`를 수정하는 폴리필(Polyfill)을 허용 목록에 추가해야합니다. 예를 들어 `babel-polyfill`이 있습니다. 새 컨텍스트 모드를 사용할 때 **서버 번들의 내부 코드가 자체적으로 `전역` 객체를 가지고 있기 때문입니다.** Node 7.6 이상을 사용할 때 서버에서는 실제로 필요하지 않으므로 클라이언트에서 가져오는 것이 더 쉽습니다. ## 클라이언트 설정 @@ -72,7 +72,7 @@ const renderer = createBundleRenderer('/path/to/vue-ssr-server-bundle.json', { 두가지 장점이 있습니다. -1. 생성된 파일 이름에 해시가 있을 때 올바른 에셋 URL을 삽입하기 위해 `html-webpack-plugin`를 대체할 수 있습니다. +1. 생성된 파일 이름에 해시가 있을 때 올바른 에셋 URL을 삽입하기 위해 `html-webpack-plugin`을 대체할 수 있습니다. 2. webpack의 주문형 코드 분할 기능을 활용하는 번들을 렌더링할 때 최적의 청크를 프리로드/프리페치하고 클라이언트에 폭포수 요청을 피하기 위해 필요한 비동기 청크에 `` 태그를 지능적으로 삽입할 수 있습니다. 이는 TTI(첫 작동까지의 시간)을 개선합니다. 클라이언트 매니페스트를 사용하려면 클라이언트 설정은 아래와 같아야 합니다. @@ -116,15 +116,15 @@ const renderer = createBundleRenderer(serverBundle, { ```html - + - - + +
async
@@ -132,7 +132,7 @@ const renderer = createBundleRenderer(serverBundle, { - + ` ``` @@ -146,7 +146,7 @@ const renderer = createBundleRenderer(serverBundle, { 렌더링 중에 사용된 `*.vue` 컴포넌트에서 수집된 모든 CSS가 포함된 인라인 ``태그가 반환됩니다. 자세한 내용은 [CSS 관리](./css.md)를 참조하십시오. -`clientManifest`가 제공되면 반환되는 문자열에는 webpack에서 생성한 CSS파일 (예: `extract-text-webpack-plugin` 또는 imported with `file-loader`)에 대한 `` 태그가 포함됩니다. +`clientManifest`가 제공되면 반환되는 문자열에는 webpack에서 생성한 CSS파일 (예: `extract-text-webpack-plugin` 또는 `file-loader`로 추가된)에 대한 `` 태그가 포함됩니다. - `context.renderState(options?: Object)` @@ -180,22 +180,22 @@ const renderer = createBundleRenderer(serverBundle, { - `context.getPreloadFiles()` - `clientManifest`를 필요로 합니다. -이 메소드는 문자열을 반환하지 않고 대신 미리 로드해야 할 에셋을 나타내는 파일 객체의 배열을 반환합니다. 이는 프로그래밍 방식으로 HTTP/2 서버 푸시를 하는데 사용할 수 있습니다. +이 메소드는 문자열을 반환하지 않는 대신 미리 로드해야 할 에셋을 나타내는 파일 객체의 배열을 반환합니다. 이는 프로그래밍 방식으로 HTTP/2 서버 푸시를 하는데 사용할 수 있습니다. `createBundleRenderer`에 전달된 `template`은 `context`를 사용하여 보간되므로 템플릿안에서 이러한 메소드를 사용할 수 있습니다.(`inject: false` 옵션과 함께) ```html - + {{{ renderResourceHints() }}} {{{ renderStyles() }}} - - + + {{{ renderState() }}} {{{ renderScripts() }}} - + ``` From 652aa7e8299577fd6a9de98cc2a2ff591cf1f5cd Mon Sep 17 00:00:00 2001 From: ChangJoo Park Date: Thu, 15 Jun 2017 20:31:43 +0900 Subject: [PATCH 28/32] Update basic.md --- ko/basic.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/ko/basic.md b/ko/basic.md index 51890d42..1ed887fa 100644 --- a/ko/basic.md +++ b/ko/basic.md @@ -10,7 +10,7 @@ npm install vue vue-server-renderer --save #### 참고 사항 -- Node.js 6 이상을 권장합니다. +- Node.js v6 이상을 권장합니다. - `vue-server-renderer` 와`vue`는 반드시 서로 맞는 버전을 사용해야합니다. - `vue-server-renderer`는 일부 Node.js 네이티브 모듈을 사용하므로 Node.js에서만 사용할 수 있습니다. 앞으로 다른 JavaScript 런타임에서 실행할 수 있는 보다 간단한 방법을 제공할 예정입니다. @@ -59,11 +59,11 @@ server.get('*', (req, res) => { return } res.end(` - - + + Hello ${html} - + `) }) }) @@ -74,15 +74,15 @@ server.listen(8080) Vue 앱을 렌더링할 때 렌더러는 앱의 마크업만 생성합니다. 이 예제에서 추가 HTML 페이지 쉘로 출력을 레핑해야합니다. -이를 간단히 하기 위해 렌더러를 만들 때 페이지 템플릿을 직접 제공할 수 있습니다. 대부분의 경우 페이지 템플릿을 자체 파일에 저장합니다. (예: `index.template.html`) +이를 간단히 하기 위해 렌더러를 만들 때 페이지 템플릿을 직접 제공할 수 있습니다. 대부분의 경우 페이지 템플릿을 자체 파일에 저장합니다. (예: `index.template.html`) ```html Hello - + - + ``` @@ -99,21 +99,21 @@ renderer.renderToString(app, (err, html) => { }) ``` -### 템플릿 인터폴레이션 +### 템플릿 인터폴레이션(Interpolation) 템플릿은 간단한 인터폴레이션(보간)도 지원합니다. 다음 템플릿을 확인하세요. ```html - + {{ title }} {{{ meta }}} - - + + - + ``` From 111421cf47053db2568023e5b3c7c09eec585779 Mon Sep 17 00:00:00 2001 From: ChangJoo Park Date: Thu, 15 Jun 2017 20:32:21 +0900 Subject: [PATCH 29/32] Update state/store --- ko/SUMMARY.md | 2 +- ko/api.md | 2 +- ko/basic.md | 2 +- ko/build-config.md | 4 ++-- ko/structure.md | 2 +- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/ko/SUMMARY.md b/ko/SUMMARY.md index 9e71e28b..3c71d83a 100644 --- a/ko/SUMMARY.md +++ b/ko/SUMMARY.md @@ -2,7 +2,7 @@ - [유니버설 코드 작성하기](universal.md) - [소스코드 구조](structure.md) - [라우팅과 코드 분할](routing.md) -- [데이터 프리페치와 스테이트](data.md) +- [데이터 프리페치와 state(상태)](data.md) - [클라이언트 사이드 하이드레이션](hydration.md) - [번들 렌더러 소개](bundle-renderer.md) - [빌드 설정](build-config.md) diff --git a/ko/api.md b/ko/api.md index e04d9496..e1344afd 100644 --- a/ko/api.md +++ b/ko/api.md @@ -61,7 +61,7 @@ Vue 인스턴스를 Node.js 스트림으로 렌더링합니다. 컨텍스트 객 - `context.head`: (string) 페이지 head에 삽입되어야하는 마크업 - `context.styles`: (string) 페이지 head에 삽입되어야하는 모든 인라인 CSS. 컴포넌트 CSS에 `vue-loader` + `vue-style-loader`를 사용하는 경우 이 속성이 자동으로 채워집니다. -- `context.state`: (Object) `window.__INITIAL_STATE__`에서 반드시 인라인되어야하는 초기 Vuex 스토어 스테이트 인라인된 JSON은 XSS를 방지하기 위해 [serialize-javascript](https://github.com/yahoo/serialize-javascript)를 사용해 자동으로 삭제합니다. +- `context.state`: (Object) `window.__INITIAL_STATE__`에서 반드시 인라인되어야하는 초기 Vuex store(저장소) state(상태) 인라인된 JSON은 XSS를 방지하기 위해 [serialize-javascript](https://github.com/yahoo/serialize-javascript)를 사용해 자동으로 삭제합니다. `clientManifest`이 제공되면 템플릿은 자동으로 아래 내용을 주입합니다. diff --git a/ko/basic.md b/ko/basic.md index 1ed887fa..2b3b6b10 100644 --- a/ko/basic.md +++ b/ko/basic.md @@ -139,6 +139,6 @@ renderer.renderToString(app, context, (err, html) => { - `*.vue` 컴포넌트를 사용할 때 CSS를 자동으로 주입합니다. - `clientManifest`를 사용할 때 에셋 링크 및 리소스에 관련한 힌트를 자동으로 주입합니다. -- 클라이언트 측 하이드레이션을 위한 Vuex 스테이트 포함시 자동 주입 및 XSS를 예방을 지원합니다. +- 클라이언트 측 하이드레이션을 위한 Vuex state(상태) 포함시 자동 주입 및 XSS를 예방을 지원합니다. 나중에 이 가이드에서 관련 개념을 소개할 때 자세히 다룰 것 입니다. diff --git a/ko/build-config.md b/ko/build-config.md index ba4c3c49..ca167781 100644 --- a/ko/build-config.md +++ b/ko/build-config.md @@ -150,9 +150,9 @@ const renderer = createBundleRenderer(serverBundle, { - `context.renderState(options?: Object)` -이 메소드는 `context.state`를 직렬화하고 스테이트를 `window.__INITIAL_STATE__`로 포함하는 인라인 스크립트를 리턴합니다. +이 메소드는 `context.state`를 직렬화하고 state(상태)를 `window.__INITIAL_STATE__`로 포함하는 인라인 스크립트를 리턴합니다. -컨텍스트 스테이트 키와 윈도우 스테이트 키는 옵션 객체를 전달하여 사용자 정의할 수 있습니다. +컨텍스트 state(상태) 키와 윈도우 state(상태) 키는 옵션 객체를 전달하여 사용자 정의할 수 있습니다. ```js context.renderState({ diff --git a/ko/structure.md b/ko/structure.md index 276ad176..04a51d9d 100644 --- a/ko/structure.md +++ b/ko/structure.md @@ -36,7 +36,7 @@ server.get('*', (req, res) => { }) ``` -동일한 규칙이 라우터, 스토어 및 이벤트 버스 인스턴스에도 적용됩니다. 모듈에서 직접 export하고 앱에서 import 하는 대신 `createApp`에 새 인스턴스를 만들고 루트 Vue인스턴스에서 이를 주입해야합니다. +동일한 규칙이 라우터, store(저장소) 및 이벤트 버스 인스턴스에도 적용됩니다. 모듈에서 직접 export하고 앱에서 import 하는 대신 `createApp`에 새 인스턴스를 만들고 루트 Vue인스턴스에서 이를 주입해야합니다. > 이러한 제약 조건은 번들 렌더러를 `{ runInNewContext: true }`와 함께 사용할 때 제거할 수 있지만 각 요청에 대해 새로운 vm context를 만들어야하기 때문에 성능에 상당한 비용이 발생합니다. From 117c6e2bcedebff377db9e9e70a31942a58b3dff Mon Sep 17 00:00:00 2001 From: ChangJoo Park Date: Thu, 15 Jun 2017 20:36:50 +0900 Subject: [PATCH 30/32] Update api.md --- ko/api.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/ko/api.md b/ko/api.md index e1344afd..03599514 100644 --- a/ko/api.md +++ b/ko/api.md @@ -50,12 +50,12 @@ Vue 인스턴스를 Node.js 스트림으로 렌더링합니다. 컨텍스트 객 - #### `template` -전체 페이지 HTML에 대한 템플릿을 제공하십시오. 템플릿에는 렌더링된 앱 컨텐츠의 플레이스홀더 역할을 하는 주석 ``이 있어야 합니다. +전체 페이지 HTML에 대한 템플릿입니다. 템플릿에는 렌더링된 앱 컨텐츠의 플레이스홀더(placeholder) 역할을 하는 주석 ``이 있어야 합니다. 템플릿은 렌더링 컨텍스트를 사용하여 기본 인터폴레이션을 지원합니다. -- 이중 mustache를 이용해 HTML 이스케이프 인터폴레이션을 합니다. -- 삼중 mustache를 이용해 비 HTML 이스케이프 인터폴레이션을 합니다. +- 이중 mustache를 이용해 HTML 이스케이프 인터폴레이션(HTML-escaped-interpolation)을 합니다. +- 삼중 mustache를 이용해 비 HTML 이스케이프 인터폴레이션(Non HTML-escaped-interpolation)을 합니다. 템플릿은 렌더링 컨텍스트에서 특정 데이터가 발견되면 적절한 컨텐츠를 자동으로 주입합니다. @@ -79,7 +79,7 @@ Vue 인스턴스를 Node.js 스트림으로 렌더링합니다. 컨텍스트 객 `vue-server-renderer/client-plugin`에 의해 생성된 클라이언트 매니페스트 객체를 제공합니다. 클라이언트 매니페스트는 번들 렌더러에게 HTML 템플릿으로 자동 에셋 주입을 위한 적절한 정보를 제공합니다. 자세한 내용은[Generating clientManifest](./build-config.md#generating-clientmanifest)을 참조하세요. -- +- #### `inject` - 2.3.0+ @@ -88,7 +88,7 @@ Vue 인스턴스를 Node.js 스트림으로 렌더링합니다. 컨텍스트 객 [Manual Asset Injection](./build-config.md#manual-asset-injection)을 참조하세요 -- +- #### `shouldPreload` - 2.3.0+ @@ -121,7 +121,7 @@ Vue 인스턴스를 Node.js 스트림으로 렌더링합니다. 컨텍스트 객 }) ``` -- +- #### `runInNewContext` - 2.3.0+ @@ -130,20 +130,20 @@ Vue 인스턴스를 Node.js 스트림으로 렌더링합니다. 컨텍스트 객 기본적으로 각 렌더에 대해 번들 렌더러는 새로운 V8 컨텍스트를 만들고 전체 번들을 다시 실행합니다. 이는 몇가지 장점을 가집니다. 예를 들어 애플리케이션 코드는 서버 프로세스와 분리되어 있으며 문서에 언급된 [stateful singleton problem](./structure.md#avoid-stateful-singletons)에 대해 걱정할 필요가 없습니다. 그러나 번들을 다시 실행하는 것은 앱이 커지면 비용이 많이 들기 때문에 이 모드는 상당한 성능 비용을 발생시킵니다. -이 옵션은 하위 호환성을 위해 `true`가 기본값이지만 가능할 때마다 `runInNewContext: false` 또는 `runInNewContext: 'once'`를 사용하는 것이 좋습니다. +이 옵션은 하위 호환성을 위해 `true`가 기본값이지만 가능할 때마다 `runInNewContext: false` 또는 `runInNewContext: 'once'`를 사용하는 것이 좋습니다. -> 2.3.0에서 이 옵션은 `runInNewContext: false`가 별ㄷ로의 전역 컨텍스트를 사용하여 번들을 실행하는 버그가 있습니다. 2.3.1버전 이후 버전을 사용한다고 가정합니다. +> 2.3.0에서 이 옵션은 `runInNewContext: false`가 별도의 전역 컨텍스트를 사용하여 번들을 실행하는 버그가 있습니다. 2.3.1버전 이후 버전을 사용한다고 가정합니다. `runInNewContext: false`를 사용하면 번들 코드가 서버 프로세스와 동일한 `global` 컨텍스트에서 실행되므로 애플리케이션 코드에서 `global`을 수정하는 코드를 주의해야 합니다. -`runInNewContext: 'once'`(2.3.1+)를 사용하면 번들은 별도의 `global` 컨텍스트로 평가되지만 시작할 때 한번뿐입니다. 번들이 실수로 서버 프로세스의 `global` 객체를 오염시키는 것을 방지하므로 더 안전한 코드 관리를 할 수 있습니다. 주의사항은 다음과 같습니다. +`runInNewContext: 'once'`(2.3.1+)를 사용하면 번들은 별도의 `global` 컨텍스트로 평가되지만 시작할 때 한번 뿐입니다. 번들이 실수로 서버 프로세스의 `global` 객체를 오염시키는 것을 방지하므로 더 안전한 코드 관리를 할 수 있습니다. 주의사항은 다음과 같습니다. -1. 이 모드에서는 `global`(예: 폴리필)을 수정하는 종속성을 외부에 둘 수 없습니다. +1. 이 모드에서는 `global`(예: 폴리필)을 수정하는 의존성을 외부에 둘 수 없습니다. 2. 번들 실행에서 반환된 값은 다른 전역 생성자를 사용합니다. 번들 내부에서 발견된 오류는 서버 프로세스에서 `Error` 인스턴스가 되지 않습니다. [Source Code Structure](./structure.md)를 참조하세요 -- +- #### `basedir` - 2.2.0+ @@ -174,7 +174,7 @@ Vue 인스턴스를 Node.js 스트림으로 렌더링합니다. 컨텍스트 객 }) ``` -캐시 객체는 최소한 `get`과 `set`을 구현해야합니다. 또한 두번째 전달인자를 콜백으로 허용하면 `get`과 `has`는 선택적으로 비동기화 할수 있습니다. 이렇게하면 캐시에서 비동기 API를 사용할 수 있습니다. 예: redis 클라이언트 +캐시 객체는 최소한 `get`과 `set`을 구현해야합니다. 또한 두번째 전달인자를 콜백으로 허용하면 `get`과 `has`는 선택적으로 비동기화할 수 있습니다. 이렇게하면 캐시에서 비동기 API를 사용할 수 있습니다. 예: redis 클라이언트 ```js const renderer = createRenderer({ From 647e3affdcecfcca1f2fdeb0e5675dedcd03dfbe Mon Sep 17 00:00:00 2001 From: ChangJoo Park Date: Thu, 15 Jun 2017 20:40:20 +0900 Subject: [PATCH 31/32] Update hydration.md --- ko/hydration.md | 28 ++++++++++++++++------------ 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/ko/hydration.md b/ko/hydration.md index 97fecf34..21d9021e 100644 --- a/ko/hydration.md +++ b/ko/hydration.md @@ -7,21 +7,25 @@ app.$mount('#app') ``` -서버가 이미 마크업을 렌더링 했으므로, 이를 버리고 모든 DOM 요소를 다시 만들필요는 없습니다. 대신 정적 마크 업을 "수화 (hydrate)"하여 상호작용하게 만들고 싶습니다. +서버가 이미 마크업을 렌더링 했으므로, 이를 버리고 모든 DOM 요소를 다시 만들 필요는 없습니다. 대신 정적 마크 업을 "수화 (hydrate)"하여 상호작용하게 만들고 싶습니다. 서버에서 렌더링 한 결과를 검사하면 앱의 루트 엘리먼트에 특수 속성을 확인할 수 있습니다. ```js
-

특수 속성 data-server-rendered은 클라이언트 측 Vue가 마크업이 서버에 의해 렌더링 되고 하이드레이션 모드로 마운트되어야 한다고 알립니다.

-

개발 모드에서 Vue는 클라이언트 측에서 만들어진 가상 DOM 트리가 서버에서 렌더링된 DOM구조와 일치함을 나타냅니다. 일치하지 않는 부분이 있으면 하이드레이션을 중단하고 기존 DOM을 삭제한 후 처음부터 렌더링 합니다. 배포 모드에서는 최대 성능을 위해 assert를 하지 않습니다.

-

하이드레이션 주의 사항

-

SSR + 클라이언트 하이드레이션을 사용할 때 주의해야하는 것들 중 하나는 브라우저에서 변경할 수 있는 특수한 HTML 구조입니다. 예를 들어 Vue 템플릿을 다음과 같이 작성한 경우입니다.

-

-  
-
hi
-

브라우저는 자동으로 을 안에 자동으로 주입합니다. 하지만, Vue가 생성한 가상 DOM에 을 주입하면 불일치가 발생합니다. 그러므로 동일하도록 만들기 위해 템플릿에 유효한 HTML을 작성해야합니다. -
 -

-
``` + +특수 속성 `data-server-rendered`은 클라이언트 측 Vue가 마크업이 서버에 의해 렌더링 되고 하이드레이션 모드로 마운트되어야한다고 알립니다. +개발 모드에서 Vue는 클라이언트 측에서 만들어진 가상 DOM 트리가 서버에서 렌더링된 DOM구조와 일치함을 나타냅니다. 일치하지 않는 부분이 있으면 하이드레이션을 중단하고 기존 DOM을 삭제한 후 처음부터 렌더링 합니다. **배포 모드에서는 최대 성능을 위해 assert를 하지 않습니다.** + +### 하이드레이션 주의사항 + +SSR + 클라이언트 하이드레이션을 사용할 때 주의해야하는 것들 중 하나는 브라우저에서 변경할 수 있는 특수한 HTML 구조입니다. 예를 들어 Vue 템플릿을 다음과 같이 작성한 경우입니다. + +```html + + +
hi
+``` + +브라우저는 자동으로 ``를 `` 안에 자동으로 주입합니다. 하지만 Vue가 생성한 가상 DOM에 ``을 주입하면 불일치가 발생합니다. 그러므로 동일하도록 만들기 위해 템플릿에 유효한 HTML을 작성해야합니다. From 3066215bd76046d88d0e3422fba075d94ac4e7a3 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Sat, 17 Jun 2017 08:58:07 +0200 Subject: [PATCH 32/32] Update css.md Signed-off-by: Bruno Lesieur --- en/css.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/en/css.md b/en/css.md index 71b6c562..9e2c6f3b 100644 --- a/en/css.md +++ b/en/css.md @@ -2,11 +2,11 @@ La gestion recommandée pour l'utilisation des CSS est de simplement utiliser une balise `