Traduction de css.md

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)

en/css.md

@@ -1,35 +1,35 @@
-# Gestion des CSS (En) <br><br> *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 `<style>` inside `*.vue` single file components, which offers:
+La gestion recommandée pour l'utilisation des CSS est de simplement utiliser une balise `<style>` à l'intérieur d'un fichier de composant monopage `*.vue`. Cela permet :
 
-- Collocated, component-scoped CSS
-- Ability to leverage pre-processors or PostCSS
-- Hot-reload during development
+- une sortie CSS limitée au composant,
+- la possibilité d'utiliser des pré-processeurs ou PostCSS,
+- le rechargement à chaud pendant le développement.
 
-More importantly, `vue-style-loader`, the loader used internally by `vue-loader`, has some special features for server rendering:
+Plus important encore, `vue-style-loader`, le loader utilisé en interne par `vue-loader`, a plusieurs fonctionnalités pour le rendu côté serveur :
 
-- Universal authoring experience for client and server.
+- Expérience de création universelle côté client et côté serveur.
 
-- Automatic critical CSS when using `bundleRenderer`.
+- Création automatique de CSS critique lors de l'utilisation de `bundleRenderer`.
 
-  If used during a server render, a component's CSS can be collected and inlined in the HTML (automatically handled when using `template` option). On the client, when the component is used for the first time, `vue-style-loader` will check if there is already server-inlined CSS for this component - if not, the CSS will be dynamically injected via a `<style>` tag.
+  S'il est utilisé pendant le rendu côté serveur, un composant CSS peut être récupéré et injecté dans la source HTML (automatiquement injecté avec l'option `template`). Côté client, quand le composant est utilisé pour la première fois, `vue-style-loader` va vérifier s'il n'y a pas déjà une sortie CSS dans la source HTML pour ce composant ; si non, le CSS va être automatiquement injecté via une balise `<stlye>`.
 
-- Common CSS Extraction.
+- Extraction de CSS commun.
 
-  This setup support using [`extract-text-webpack-plugin`](https://github.com/webpack-contrib/extract-text-webpack-plugin) to extract the CSS in the main chunk into a separate CSS file (auto injected with `template`), which allows the file to be individually cached. This is recommended when there is a lot of shared CSS.
+  Cette mise en place supporte [`extract-text-webpack-plugin`](https://github.com/webpack-contrib/extract-text-webpack-plugin) pour extraire le CSS du fragment principal en un fichier CSS séparé (automatiquement injecté avec l'option `template`), ce qui permet au fichier d'être mis en cache individuellement. Cela est recommandé quand il y a beaucoup de CSS partagés.
 
-  CSS inside async components will remain inlined as JavaScript strings and handled by `vue-style-loader`.
+  Les CSS a l'intérieur des composants asynchrones vont être compilés en tant que chaîne de caractère JavaScript et pris en charge par `vue-style-loader`.
 
-## Enabling CSS Extraction
+## Activer l'extraction CSS
 
-To extract CSS from `*.vue` files, use `vue-loader`'s `extractCSS` option (requires `vue-loader>=12.0.0`):
+Pour extraire le CSS des fichiers `*.vue`, utilisez l'option `extractCSS` du `vue-loader` (requiert `vue-loader>=12.0.0`) :
 
 ``` js
 // webpack.config.js
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
 
-// CSS extraction should only be enabled for production
-// so that we still get hot-reload during development.
+// L'extraction CSS devrait uniquement être activée en production
+// ainsi vous pourriez utiliser le rechargement à chaud pendant le développement.
 const isProduction = process.env.NODE_ENV === 'production'
 
 module.exports = {
@@ -40,23 +40,23 @@ module.exports = {
         test: /\.vue$/,
         loader: 'vue-loader',
         options: {
-          // enable CSS extraction
+          // activer l'extraction CSS
           extractCSS: isProduction
         }
       },
       // ...
     ]
   },
   plugins: isProduction
-    // make sure to add the plugin!
+    // assurez-vous d'avoir ajouté le plugin !
     ? [new ExtractTextPlugin({ filename: 'common.[chunkhash].css' })]
     : []
 }
 ```
 
-Note that the above config only applies to styles in `*.vue` files, but you can use `<style src="./foo.css">` to import external CSS into Vue components.
+Notez que la configuration ci-dessus est uniquement appliquée pour les styles en provenance des fichiers `*.vue`, mais vous pouvez toujours utiliser `<style src="./foo.css">` pour importer des CSS externes dans des composants Vue.
 
-If you wish to import CSS from JavaScript, e.g. `import 'foo.css'`, you need to configure the appropriate loaders:
+Si vous souhaitez importer des CSS depuis le JavaScript, par ex. avec `import 'foo.css'`, vous aurez besoin de configurer les loaders appropriés :
 
 ``` js
 module.exports = {
@@ -65,7 +65,7 @@ module.exports = {
     rules: [
       {
         test: /\.css$/,
-        // important: use vue-style-loader instead of style-loader
+        // important : utilisez `vue-style-loader` à la place de `style-loader`
         use: isProduction
           ? ExtractTextPlugin.extract({
               use: 'css-loader',
@@ -79,32 +79,32 @@ module.exports = {
 }
 ```
 
-## Importing Styles from Dependencies
+## Importer des styles depuis les dépendances
 
-A few things to take note when importing CSS from an NPM dependency:
+Quelques choses que vous devez prendre en note quand vous importez des CSS depuis des dépendances npm :
 
-1. It should not be externalized in the server build.
+1. Ils ne devraient pas être externalisés dans un build serveur.
 
-2. If using CSS extraction + vendor extracting with `CommonsChunkPlugin`, `extract-text-webpack-plugin` will run into problems if the extracted CSS in inside an extracted vendors chunk. To work around this, avoid including CSS files in the vendor chunk. An example client webpack config:
+2. Si vous utilisez de l'extraction CSS + de l'extraction de CSS tierces avec `CommonsChunkPlugin`, `extract-text-webpack-plugin` va mal fonctionner si le CSS extrait est à l'intérieur d'un extrait de fragment tiers. Pour résoudre cela, évitez d'inclure des fichiers CSS dans un fragment tiers. Voici un exemple de configuration côté client avec webpack :
 
   ``` js
   module.exports = {
     // ...
     plugins: [
-      // it is common to extract deps into a vendor chunk for better caching.
+      // il est normal d'extraire un fragment tiers pour une meilleure mise en cache.
       new webpack.optimize.CommonsChunkPlugin({
         name: 'vendor',
         minChunks: function (module) {
-          // a module is extracted into the vendor chunk when...
+          // un module est extrait dans un fragment tiers puis...
           return (
-            // if it's inside node_modules
+            // s'il est a l'intérieur d'un dossier node_modules
             /node_modules/.test(module.context) &&
-            // do not externalize if the request is a CSS file
+            // ne pas l'externaliser si la requête est un fichier CSS
             !/\.css$/.test(module.request)
           )
         }
       }),
-      // extract webpack runtime & manifest
+      // extraction de l'exécuteur et du manifeste webpack
       new webpack.optimize.CommonsChunkPlugin({
         name: 'manifest'
       }),

ko/README.md

@@ -0,0 +1,48 @@
+# Vue.js 서버 사이드 렌더링 가이드
+
+> **참고사항:** 이 가이드는 아래에 표기된 라이브러리들의 최소 요구사항을 필요로 합니다.
+> - vue & vue-server-renderer >= 2.3.0
+> - vue-router >= 2.5.0
+> - 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 앱은 코드 대부분이 서버와 클라이언트 모두에서 실행하는 점에서 "같은 형태" **이며** "범용적"으로 여겨질 수 있습니다.
+
+## 왜 SSR을 사용하나요?
+
+전통적인 SPA(싱글 페이지 애플리케이션)에 비해 SSR의 장점은 주로 아래에 있는 내용과 같습니다.
+
+- 검색 엔진 크롤러는 완전히 렌더링 된 페이지를 직접 볼 수 있으므로 검색 엔진 최적화가 개선됩니다.
+
+  현재 Google과 Bing은 동기식 자바스크립트 애플리케이션의 인덱싱을 할 수 있습니다. 여기서 동기식이 핵심 단어입니다. 앱이 로딩 스피너로 시작한 다음 Ajax를 이용해 컨텐츠를 가져오는 경우 크롤러가 완료될 때까지 기다리지 않습니다. 즉, SEO가 중요한 페이지에서 비동기적으로 콘텐츠를 가져오는 경우 SSR이 필요합니다.
+
+- 컨텐츠 도달 시간 단축, 특히 느린 인터넷 또는 느린 장치의 경우에 서버 렌더링 마크업은 모든 자바 스크립트가 다운로드되어 실행될 때까지 기다릴 필요가 없으므로 사용자는 완전히 렌더링 된 페이지를 더 빨리 볼 수 있습니다. 일반적으로 사용자 경험이 향상되고 전환율과 직접적인 관련성이있는 애플리케이션의 경우 중요해질 수 있습니다.
+
+하지만 SSR을 사용할 때 고려해야할 몇가지 단점이 있습니다.
+
+- 개발 제약 사항이 있습니다. 브라우저의 특정 코드는 특정한 라이프사이클에서만 사용할 수 있습니다. 일부 외부 라이브러리는 서버에서 렌더링 된 애플리케이션에서 실행할 수 있도록 추가적인 처리가 필요할 수 있습니다.
+- 설치 및 배포 요구사항을 보다 복잡하게 만들 수 있습니다. 정적 파일 서버에 배포할 수 있는 완전히 정적인 SPA와 달리 서버 사이드 렌더링 애플리케이션에서는 Node.js 서버를 실행할 수 있는 환경이 필요합니다.
+- 더 많은 서버측 부하가 생깁니다. Node.js의 전체 애플리케이션 렌더링은 정적 파일을 제공하는 것 보다 CPU를 많이 사용하므로 트래픽이 많을 것으로 예상되면 서버 부하에 대비하고 캐싱 전략을 잘 짜야합니다.
+
+앱에 SSR을 사용하기 전에 먼저 실제 필요한지 고민해야합니다. 보통 앱의 컨텐츠가 얼마나 빨리 도달해야 하는지에 달려 있습니다. 예를 들어, 초기 로드 시 추가적인 수백 밀리 초가 그다지 중요하지 않은 내부 대시 보드를 구축하는 경우 SSR은 불필요합니다. 그러나 시간에 따른 컨텐츠가 절대적으로 중요한 경우 SSR을 사용하면 최상의 초기 로드 성능을 얻을 수 있습니다.
+
+## 서버 사이드 렌더링 vs 사전 렌더링
+
+몇 가지 마케팅 페이지 (예 : `/`, `/about`, `/contact` 등)의 검색 엔진 최적화를 개선하기 위해 SSR을 고려하는 중이라면 **사전 렌더링**이 더 좋습니다. HTML을 즉석에서 컴파일하기 위해 웹 서버를 사용하는 대신 사전 렌더링은 빌드시 특정 경로에 대한 정적 HTML 파일을 생성합니다. 장점은 미리 렌더링을 설정하는 것이 훨씬 간단하며 프론트 엔드를 완전히 정적인 사이트로 유지할 수 있다는 것입니다.
+
+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에 대한 실제 지식이 있다고 가정합니다. 즉시 원활하게 사용할 수있는 더 높은 수준의 솔루션을 원한다면 [Nuxt.js](http://nuxtjs.org/)를 사용해보십시오. 동일한 Vue 스택을 기반으로하지만 많은 상용구를 추상화하고 정적 사이트 생성과 같은 몇 가지 추가 기능을 제공합니다. 그러나 앱 구조를 직접 제어해야하는 경우 사용방식이 맞지 않을 수 있습니다. 그럼에도 불구하고 상황이 어떻게 작동하는지 더 잘 이해하기 위해 이 안내서를 읽는 것이 여전히 유용할 것입니다.
+
+이 가이드를 읽으면서 가이드가 다루는 대부분의 기술을 사용하는 [HackerNews Demo](https://github.com/vuejs/vue-hackernews-2.0/)를 참조하는 것이 도움이 될 것입니다.
+
+마지막으로, 이 가이드는 완벽하지 않습니다. 잘 작동하고 있는 것을 알고 있지만 개선할 여지가 있습니다. 이 가이드는 앞으로 개정 될 수 있습니다. 풀 리퀘스트를 해주세요

ko/SUMMARY.md

@@ -0,0 +1,27 @@
+- [기본 사용 방법](basic.md)
+- [유니버설 코드 작성하기](universal.md)
+- [소스코드 구조](structure.md)
+- [라우팅과 코드 분할](routing.md)
+- [데이터 프리페치와 state(상태)](data.md)
+- [클라이언트 사이드 하이드레이션](hydration.md)
+- [번들 렌더러 소개](bundle-renderer.md)
+- [빌드 설정](build-config.md)
+- [CSS 관리](css.md)
+- [Head 관리](head.md)
+- [캐싱](caching.md)
+- [스트리밍](streaming.md)
+- [API 참조](api.md)
+    - [createRenderer](api.md#createrendereroptions)
+    - [createBundleRenderer](api.md#createbundlerendererbundle-options)
+    - [Class: Renderer](api.md#class-renderer)
+    - [Class: BundleRenderer](api.md#class-bundlerenderer)
+    - [렌더러 옵션](api.md#renderer-options)
+    - [template](api.md#template)
+    - [clientManifest](api.md#clientmanifest)
+    - [inject](api.md#inject)
+    - [shouldPreload](api.md#shouldpreload)
+    - [runInNewContext](api.md#runinnewcontext)
+    - [basedir](api.md#basedir)
+    - [cache](api.md#cache)
+    - [directives](api.md#directives)
+    - [webpack Plugins](api.md#webpack-plugins)