From 9afac950cffdfe3e66dd8632e6a05907ff1d6a76 Mon Sep 17 00:00:00 2001 From: ChangJoo Park Date: Thu, 15 Jun 2017 20:18:48 +0900 Subject: [PATCH 01/11] 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 02/11] 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 03/11] 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 04/11] 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 05/11] 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 06/11] 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 07/11] 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 08/11] 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 09/11] 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 10/11] 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 11/11] 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을 작성해야합니다.