Skip to content

Commit 5810394

Browse files
ChangJoo-ParkChangJoo-Park
authored
Merge pull request #57 from ChangJoo-Park/master
Update Korean docs.
2 parents 7af2281 + 647e3af commit 5810394

11 files changed

+80
-74
lines changed

‎ko/README.md

+9-7
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,15 @@
33
> **참고사항:** 이 가이드는 아래에 표기된 라이브러리들의 최소 요구사항을 필요로 합니다.
44
> - vue & vue-server-renderer >= 2.3.0
55
> - vue-router >= 2.5.0
6-
> - vue-loader >= 12.0.0 & vue-style-loader >= 3.0.0Vue 2.2 버전과 함께 SSR을 사용하고 있다면 권장하는 코드 구조가 [약간 다릅니다.](./structure.md) ([runInNewContext](./api.md#runinnewcontext)이 `false`로 설정됨) 기존 앱을 사용해야 하는 것이 맞지만 새로운 권장 방식으로 마이그레이션 하는 것이 좋습니다.
6+
> - vue-loader >= 12.0.0 & vue-style-loader >= 3.0.0
7+
8+
Vue 2.2 버전과 함께 SSR을 사용하고 있다면 권장하는 코드 구조가 [약간 다릅니다.](./structure.md) ([runInNewContext](./api.md#runinnewcontext)이 `false`로 설정됨) 기존 앱을 사용해야 하는 것이 맞지만 새로운 권장 방식으로 마이그레이션 하는 것이 좋습니다.
79

810
## 서버사이드 렌더링(SSR)이란 무엇입니까?
911

10-
Vue.js는 클라이언트 측 애플리케이션을 위한 프레임워크입니다. 기본적으로 Vue 컴포넌트는 브라우저에서 DOM을 생성 및 조작 후 출력합니다. 그러나 동일한 컴포넌트를 서버의 HTML 문자열로 렌더링하고 직접 브라우저로 보내고 마지막으로 정적 마크업을 클라이언트의 상호작용하는 애플리케이션으로 "hydrate" 하는 것도 가능합니다.
12+
Vue.js는 클라이언트 측 애플리케이션을 위한 프레임워크입니다. 기본적으로 Vue 컴포넌트는 브라우저에서 DOM을 생성 및 조작 후 출력합니다. 그러나 동일한 컴포넌트를 서버의 HTML 문자열로 렌더링한 후 직접 브라우저로 보내고 마지막으로 정적 마크업을 클라이언트의 상호작용하는 애플리케이션으로 "hydrate" 하는 것도 가능합니다.
1113

12-
서버에서 렌더링된 Vue.js 앱은 코드 대부분이 서버와 클라이언트 모두에서 실행하는 점에서 "같은 형태" **이며** "범용적"으로 여겨질 수 있습니다.
14+
서버에서 렌더링된 Vue.js 앱은 코드 대부분이 서버와 클라이언트 모두에서 실행하는 점에서 "같은 형태" **이며** "범용적"으로 여겨질 수 있습니다.
1315

1416
## 왜 SSR을 사용하나요?
1517

@@ -31,16 +33,16 @@ Vue.js는 클라이언트 측 애플리케이션을 위한 프레임워크입니
3133

3234
## 서버 사이드 렌더링 vs 사전 렌더링
3335

34-
몇 가지 마케팅 페이지 (예 : `/`, `/about`, `/contact` 등)의 검색 엔진 최적화를 개선하기 위해 SSR을 고려하는 중이라면 **사전 렌더링**이 더 좋습니다. HTML을 즉석에서 컴파일하기 위해 웹 서버를 사용하는 대신 사전 렌더링은 빌드시 특정 경로에 대한 정적 HTML 파일을 생성합니다. 장점은 미리 렌더링을 설정하는 것이 훨씬 간단하며 프론트 엔드를 완전히 정적 인 사이트로 유지할 수 있다는 것입니다.
36+
몇 가지 마케팅 페이지 (예 : `/`, `/about`, `/contact` 등)의 검색 엔진 최적화를 개선하기 위해 SSR을 고려하는 중이라면 **사전 렌더링**이 더 좋습니다. HTML을 즉석에서 컴파일하기 위해 웹 서버를 사용하는 대신 사전 렌더링은 빌드시 특정 경로에 대한 정적 HTML 파일을 생성합니다. 장점은 미리 렌더링을 설정하는 것이 훨씬 간단하며 프론트 엔드를 완전히 정적인 사이트로 유지할 수 있다는 것입니다.
3537

36-
webpack을 사용하는 경우 p[prerender-spa-plugin](https://github.com/chrisvfritz/prerender-spa-plugin)을 사용하여 사전 렌더링을 쉽게 추가 할 수 있습니다. Vue 앱으로 광범위하게 테스트되었습니다. 실제로 [제작자](https://github.com/chrisvfritz)는 Vue 핵심 팀의 멤버입니다.
38+
webpack을 사용하는 경우 [prerender-spa-plugin](https://github.com/chrisvfritz/prerender-spa-plugin)을 사용하여 사전 렌더링을 쉽게 추가 할 수 있습니다. Vue 앱으로 광범위하게 테스트되었습니다. 실제로 [제작자](https://github.com/chrisvfritz)는 Vue 핵심 팀의 멤버입니다.
3739

3840
## 이 가이드에 관하여
3941

4042
이 안내서는 Node.js를 서버로 사용하는 서버 렌더링 싱글 페이지 애플리케이션에 중점을 둡니다. Vue SSR과 다른 백엔드 설정을 혼용하는 것은 다른 주제이므로 이 가이드에서는 다루지 않습니다.
4143

42-
이 가이드는 매우 깊이 있고 Vue.js 자체에 이미 익숙하고 Node.js와 webpack에 대한 실제 지식이 있다고 가정합니다. Next.js를 사용해 보세요. 즉시 원활하게 사용할 수있는 더 높은 수준의 솔루션을 원한다면 [Nuxt.js](http://nuxtjs.org/)를 사용해보십시오. 동일한 Vue 스택을 기반으로하지만 많은 상용구를 추상화하고 정적 사이트 생성과 같은 몇 가지 추가 기능을 제공합니다. 그러나 앱 구조를 직접 제어해야하는 경우 사용방식이 맞지 않을 수 있습니다. 그럼에도 불구하고 상황이 어떻게 작동하는지 더 잘 이해하기 위해 이 안내서를 읽는 것이 여전히 유용 할 것입니다.
44+
이 가이드는 매우 깊이 있고 Vue.js 자체에 이미 익숙하고 Node.js와 webpack에 대한 실제 지식이 있다고 가정합니다. 즉시 원활하게 사용할 수있는 더 높은 수준의 솔루션을 원한다면 [Nuxt.js](http://nuxtjs.org/)를 사용해보십시오. 동일한 Vue 스택을 기반으로하지만 많은 상용구를 추상화하고 정적 사이트 생성과 같은 몇 가지 추가 기능을 제공합니다. 그러나 앱 구조를 직접 제어해야하는 경우 사용방식이 맞지 않을 수 있습니다. 그럼에도 불구하고 상황이 어떻게 작동하는지 더 잘 이해하기 위해 이 안내서를 읽는 것이 여전히 유용할 것입니다.
4345

4446
이 가이드를 읽으면서 가이드가 다루는 대부분의 기술을 사용하는 [HackerNews Demo](https://github.com/vuejs/vue-hackernews-2.0/)를 참조하는 것이 도움이 될 것입니다.
4547

46-
마지막으로, 이 가이드는 완벽하지 않습니다. 잘 작동하고 있는 것을 알고 있지만 개선할 여지가 있습니다. 이 가이드는 미래에 개정 될 수 있습니다. 풀 리퀘스트를 해주세요
48+
마지막으로, 이 가이드는 완벽하지 않습니다. 잘 작동하고 있는 것을 알고 있지만 개선할 여지가 있습니다. 이 가이드는 앞으로 개정 될 수 있습니다. 풀 리퀘스트를 해주세요

‎ko/SUMMARY.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
- [유니버설 코드 작성하기](universal.md)
33
- [소스코드 구조](structure.md)
44
- [라우팅과 코드 분할](routing.md)
5-
- [데이터 프리페치와 스테이트](data.md)
5+
- [데이터 프리페치와 state(상태)](data.md)
66
- [클라이언트 사이드 하이드레이션](hydration.md)
77
- [번들 렌더러 소개](bundle-renderer.md)
88
- [빌드 설정](build-config.md)

‎ko/api.md

+13-13
Original file line numberDiff line numberDiff line change
@@ -50,18 +50,18 @@ Vue 인스턴스를 Node.js 스트림으로 렌더링합니다. 컨텍스트 객
5050

5151
- #### `template`
5252

53-
전체 페이지 HTML에 대한 템플릿을 제공하십시오. 템플릿에는 렌더링된 앱 컨텐츠의 플레이스홀더 역할을 하는 주석 `<!--vue-ssr-outlet-->`이 있어야 합니다.
53+
전체 페이지 HTML에 대한 템플릿입니다. 템플릿에는 렌더링된 앱 컨텐츠의 플레이스홀더(placeholder) 역할을 하는 주석 `<!--vue-ssr-outlet-->`이 있어야 합니다.
5454

5555
템플릿은 렌더링 컨텍스트를 사용하여 기본 인터폴레이션을 지원합니다.
5656

57-
- 이중 mustache를 이용해 HTML 이스케이프 인터폴레이션을 합니다.
58-
- 삼중 mustache를 이용해 비 HTML 이스케이프 인터폴레이션을 합니다.
57+
- 이중 mustache를 이용해 HTML 이스케이프 인터폴레이션(HTML-escaped-interpolation)을 합니다.
58+
- 삼중 mustache를 이용해 비 HTML 이스케이프 인터폴레이션(Non HTML-escaped-interpolation)을 합니다.
5959

6060
템플릿은 렌더링 컨텍스트에서 특정 데이터가 발견되면 적절한 컨텐츠를 자동으로 주입합니다.
6161

6262
- `context.head`: (string) 페이지 head에 삽입되어야하는 마크업
6363
- `context.styles`: (string) 페이지 head에 삽입되어야하는 모든 인라인 CSS. 컴포넌트 CSS에 `vue-loader` + `vue-style-loader`를 사용하는 경우 이 속성이 자동으로 채워집니다.
64-
- `context.state`: (Object) `window.__INITIAL_STATE__`에서 반드시 인라인되어야하는 초기 Vuex 스토어 스테이트 인라인된 JSON은 XSS를 방지하기 위해 [serialize-javascript](https://github.com/yahoo/serialize-javascript)를 사용해 자동으로 삭제합니다.
64+
- `context.state`: (Object) `window.__INITIAL_STATE__`에서 반드시 인라인되어야하는 초기 Vuex store(저장소) state(상태) 인라인된 JSON은 XSS를 방지하기 위해 [serialize-javascript](https://github.com/yahoo/serialize-javascript)를 사용해 자동으로 삭제합니다.
6565

6666
`clientManifest`이 제공되면 템플릿은 자동으로 아래 내용을 주입합니다.
6767

@@ -79,7 +79,7 @@ Vue 인스턴스를 Node.js 스트림으로 렌더링합니다. 컨텍스트 객
7979

8080
`vue-server-renderer/client-plugin`에 의해 생성된 클라이언트 매니페스트 객체를 제공합니다. 클라이언트 매니페스트는 번들 렌더러에게 HTML 템플릿으로 자동 에셋 주입을 위한 적절한 정보를 제공합니다. 자세한 내용은[Generating clientManifest](./build-config.md#generating-clientmanifest)을 참조하세요.
8181

82-
-
82+
-
8383
#### `inject`
8484

8585
- 2.3.0+
@@ -88,7 +88,7 @@ Vue 인스턴스를 Node.js 스트림으로 렌더링합니다. 컨텍스트 객
8888

8989
[Manual Asset Injection](./build-config.md#manual-asset-injection)을 참조하세요
9090

91-
-
91+
-
9292
#### `shouldPreload`
9393

9494
- 2.3.0+
@@ -121,7 +121,7 @@ Vue 인스턴스를 Node.js 스트림으로 렌더링합니다. 컨텍스트 객
121121
})
122122
```
123123

124-
-
124+
-
125125
#### `runInNewContext`
126126

127127
- 2.3.0+
@@ -130,20 +130,20 @@ Vue 인스턴스를 Node.js 스트림으로 렌더링합니다. 컨텍스트 객
130130

131131
기본적으로 각 렌더에 대해 번들 렌더러는 새로운 V8 컨텍스트를 만들고 전체 번들을 다시 실행합니다. 이는 몇가지 장점을 가집니다. 예를 들어 애플리케이션 코드는 서버 프로세스와 분리되어 있으며 문서에 언급된 [stateful singleton problem](./structure.md#avoid-stateful-singletons)에 대해 걱정할 필요가 없습니다. 그러나 번들을 다시 실행하는 것은 앱이 커지면 비용이 많이 들기 때문에 이 모드는 상당한 성능 비용을 발생시킵니다.
132132

133-
이 옵션은 하위 호환성을 위해 `true`가 기본값이지만 가능할 때마다 `runInNewContext: false` 또는 `runInNewContext: 'once'`를 사용하는 것이 좋습니다.
133+
이 옵션은 하위 호환성을 위해 `true`가 기본값이지만 가능할 때마다 `runInNewContext: false` 또는 `runInNewContext: 'once'`를 사용하는 것이 좋습니다.
134134

135-
> 2.3.0에서 이 옵션은 `runInNewContext: false`가 별ㄷ로의 전역 컨텍스트를 사용하여 번들을 실행하는 버그가 있습니다. 2.3.1버전 이후 버전을 사용한다고 가정합니다.
135+
> 2.3.0에서 이 옵션은 `runInNewContext: false`가 별도의 전역 컨텍스트를 사용하여 번들을 실행하는 버그가 있습니다. 2.3.1버전 이후 버전을 사용한다고 가정합니다.
136136
137137
`runInNewContext: false`를 사용하면 번들 코드가 서버 프로세스와 동일한 `global` 컨텍스트에서 실행되므로 애플리케이션 코드에서 `global`을 수정하는 코드를 주의해야 합니다.
138138

139-
`runInNewContext: 'once'`(2.3.1+)를 사용하면 번들은 별도의 `global` 컨텍스트로 평가되지만 시작할 때 한번뿐입니다. 번들이 실수로 서버 프로세스의 `global` 객체를 오염시키는 것을 방지하므로 더 안전한 코드 관리를 할 수 있습니다. 주의사항은 다음과 같습니다.
139+
`runInNewContext: 'once'`(2.3.1+)를 사용하면 번들은 별도의 `global` 컨텍스트로 평가되지만 시작할 때 한번 뿐입니다. 번들이 실수로 서버 프로세스의 `global` 객체를 오염시키는 것을 방지하므로 더 안전한 코드 관리를 할 수 있습니다. 주의사항은 다음과 같습니다.
140140

141-
1. 이 모드에서는 `global`(예: 폴리필)을 수정하는 종속성을 외부에 둘 수 없습니다.
141+
1. 이 모드에서는 `global`(예: 폴리필)을 수정하는 의존성을 외부에 둘 수 없습니다.
142142
2. 번들 실행에서 반환된 값은 다른 전역 생성자를 사용합니다. 번들 내부에서 발견된 오류는 서버 프로세스에서 `Error` 인스턴스가 되지 않습니다.
143143

144144
[Source Code Structure](./structure.md)를 참조하세요
145145

146-
-
146+
-
147147
#### `basedir`
148148

149149
- 2.2.0+
@@ -174,7 +174,7 @@ Vue 인스턴스를 Node.js 스트림으로 렌더링합니다. 컨텍스트 객
174174
})
175175
```
176176

177-
캐시 객체는 최소한 `get`과 `set`을 구현해야합니다. 또한 두번째 전달인자를 콜백으로 허용하면 `get`과 `has`는 선택적으로 비동기화 할수 있습니다. 이렇게하면 캐시에서 비동기 API를 사용할 수 있습니다. 예: redis 클라이언트
177+
캐시 객체는 최소한 `get`과 `set`을 구현해야합니다. 또한 두번째 전달인자를 콜백으로 허용하면 `get`과 `has`는 선택적으로 비동기화할 수 있습니다. 이렇게하면 캐시에서 비동기 API를 사용할 수 있습니다. 예: redis 클라이언트
178178

179179
```js
180180
const renderer = createRenderer({

‎ko/basic.md

+13-13
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ npm install vue vue-server-renderer --save
1010

1111
#### 참고 사항
1212

13-
- Node.js 6 이상을 권장합니다.
13+
- Node.js v6 이상을 권장합니다.
1414
- `vue-server-renderer` 와`vue`는 반드시 서로 맞는 버전을 사용해야합니다.
1515
- `vue-server-renderer`는 일부 Node.js 네이티브 모듈을 사용하므로 Node.js에서만 사용할 수 있습니다. 앞으로 다른 JavaScript 런타임에서 실행할 수 있는 보다 간단한 방법을 제공할 예정입니다.
1616

@@ -59,11 +59,11 @@ server.get('*', (req, res) => {
5959
return
6060
}
6161
res.end(`
62-
63-
62+
63+
6464
<title data-segment-id="430707">Hello</title>
6565
${html}
66-
66+
6767
`)
6868
})
6969
})
@@ -74,15 +74,15 @@ server.listen(8080)
7474

7575
Vue 앱을 렌더링할 때 렌더러는 앱의 마크업만 생성합니다. 이 예제에서 추가 HTML 페이지 쉘로 출력을 레핑해야합니다.
7676

77-
이를 간단히 하기 위해 렌더러를 만들 때 페이지 템플릿을 직접 제공할 수 있습니다. 대부분의 경우 페이지 템플릿을 자체 파일에 저장합니다. (예: `index.template.html`)
77+
이를 간단히 하기 위해 렌더러를 만들 때 페이지 템플릿을 직접 제공할 수 있습니다. 대부분의 경우 페이지 템플릿을 자체 파일에 저장합니다. (예: `index.template.html`)
7878

7979
```html
8080

8181

8282
<title data-segment-id="430708">Hello</title>
83-
83+
8484
<!--vue-ssr-outlet-->
85-
85+
8686

8787
```
8888

@@ -99,21 +99,21 @@ renderer.renderToString(app, (err, html) => {
9999
})
100100
```
101101

102-
### 템플릿 인터폴레이션
102+
### 템플릿 인터폴레이션(Interpolation)
103103

104104
템플릿은 간단한 인터폴레이션(보간)도 지원합니다. 다음 템플릿을 확인하세요.
105105

106106
```html
107107

108-
108+
109109
<!-- use double mustache for HTML-escaped interpolation -->
110110
<title data-segment-id="430709">{{ title }}</title>
111111
<!-- use triple mustache for non-HTML-escaped interpolation -->
112112
{{{ meta }}}
113-
114-
113+
114+
115115
<!--vue-ssr-outlet-->
116-
116+
117117

118118
```
119119

@@ -139,6 +139,6 @@ renderer.renderToString(app, context, (err, html) => {
139139

140140
- `*.vue` 컴포넌트를 사용할 때 CSS를 자동으로 주입합니다.
141141
- `clientManifest`를 사용할 때 에셋 링크 및 리소스에 관련한 힌트를 자동으로 주입합니다.
142-
- 클라이언트 측 하이드레이션을 위한 Vuex 스테이트 포함시 자동 주입 및 XSS를 예방을 지원합니다.
142+
- 클라이언트 측 하이드레이션을 위한 Vuex state(상태) 포함시 자동 주입 및 XSS를 예방을 지원합니다.
143143

144144
나중에 이 가이드에서 관련 개념을 소개할 때 자세히 다룰 것 입니다.

0 commit comments

Comments
 (0)