Merge pull request #36 from wanybae/translation-ko

Translation ko/faq

Author: DiyLecko

ko/faq/async-data-components.md

@@ -0,0 +1,29 @@
+---
+title: 컴포넌트에서의 비동기 데이터
+description: 컴포넌트에서 비동기 데이터를 다루려면?
+---
+
+<!-- title: Async data in components -->
+<!-- description: Async data in components? -->
+
+<!-- # Async data in components? -->
+
+# 컴포넌트에서 비동기 데이터를 다루려면?
+
+<!-- It is not possible because it's not linked to a route, Nuxt.js supercharges the component data() associated to a route to allow async data. -->
+
+컴포넌트는 라우트에 연결되어 있지 않기 때문에 비동기 데이터를 다룰 수 없습니다. Nuxt.js 에서는 라우트에 연결된 컴포넌트의 data() 메소드에 좀 손을 써서 비동기 데이터를 다룰수 있게 합니다.
+
+<!-- For sub components, there are 2 ways of achieving it: -->
+
+しかしながら、서브 컴포넌트(역주: components 디렉토리에 있는 컴포넌트를 말함)에서도 비동기 데이터를 다룰수 있도록 하는 방법이 두가지가 있습니다:
+
+<!-- 1. Making the API call in the mounted() hook and setting the data afterwards, downside: no server rendering -->
+<!-- 2. Making the API call in the data() of the page component and giving the data as a prop to the subComponent: server rendering OK. But the data() of the page might be less readable because it's loading the async data of the sub components -->
+
+1. mounted() 훅에 API 콜을 작성하고 그 콜 이후에 데이터를 세팅하는 방법. 단점은 서버사이드 랜더링이 불가능하게 됩니다.
+2. 페이지 컴포넌트의 data() 메소드에서 API 콜을 작성하고 데이터를 프로퍼티로 서브 컴포넌트에게 넘기는 방법. 이 방법에서는 서버사이드 랜더링이 가능합니다. 그러나, 페이지의 data() 메소드가 서브 컴포넌트의 비동기 데이터를 로딩하기 때문에 코드의 가독성이 떨어지게 될수도 있습니다.
+
+<!-- It all depends if you want the sub components to be server-rendered or not. -->
+
+어느쪽을 선택할지에 대해서는 서브 컴포넌트를 서버사이드 랜더링을 할지에 대한 여부에 달려있다고 볼수 있을것 같습니다.

ko/faq/css-flash.md

@@ -0,0 +1,21 @@
+---
+title: CSS Flash
+description: 왜 CSS Flash 가 보이는지?
+---
+
+<!-- title: CSS Flash -->
+<!-- description: Why a CSS Flash appears with Nuxt.js? -->
+
+<!-- # Why a CSS Flash appears? -->
+
+# 왜 CSS Flash 가 보이는지?
+
+![cssflash](/flash_css.gif)
+
+<!-- This is because the CSS is in the JavaScript build in **development mode** to allow hot-reloading via Webpack. -->
+
+이게 보이는 것은 Webpack 을 통해 핫리로딩하는 **개발모드** 에서 빌드한 JavaScript 안에 CSS 가 작성되어 있기 때문입니다.
+
+<!-- Don't worry in production mode, the CSS is separated and put in the header so this "flash" does not appear anymore. -->
+
+그러니 걱정마세요. 프로덕션 모드에서는 CSS 는 분리되어서 head 에 위치하기 때문에, 이런 "flash" 현상은 보이지 않습니다.

ko/faq/dokku-deployment.md

@@ -0,0 +1,70 @@
+---
+title: Dokku 를 사용한 배포
+description: Dokku 를 사용하여 배포하려면?
+---
+
+<!-- title: Dokku Deployment -->
+<!-- description: How to deploy Nuxt.js on Dokku? -->
+
+<!-- # How to deploy on Dokku? -->
+
+# Dokku 를 사용하여 배포하려면?
+
+<!-- We recommend to read [Dokku documentation for the setup](http://dokku.viewdocs.io/dokku/getting-started/installation/) and [Deploying a Node.js Application on Digital Ocean using dokku](http://jakeklassen.com/post/deploying-a-node-app-on-digital-ocean-using-dokku/) -->
+
+[Dokku 셋업 문서](http://dokku.viewdocs.io/dokku/getting-started/installation/) 와 [디지털 대양의 Node.js 어플리케이션을 dokku를 사용하여 배포하기 ](http://jakeklassen.com/post/deploying-a-node-app-on-digital-ocean-using-dokku/)를 추천합니다.
+
+<!-- For the example, we will call our nuxt.js application `my-nuxt-app` -->
+
+한 예로, nuxt.js 어플리케이션을 `my-nuxt-app`이라고 부르겠습니다.
+
+<!-- We need to tell Dokku to install the `devDependencies` of the project (to be able to launch `npm run build`): -->
+
+`npm run build`를 사용하기 위해서 프로젝트의 `devDependencies`를 설치하도록 Dokku에게 요청할 필요가 있습니다:
+
+```bash
+// on Dokku Server
+dokku config:set my-nuxt-app NPM_CONFIG_PRODUCTION=false
+```
+
+<!-- Also, we want our application to listen on the port `0.0.0.0` and run in production mode: -->
+
+또한 어플리케이션에게 `0.0.0.0` 포트를 리슨하도록 하고, 프로덕션 모드로 기동하도록 합니다:
+```bash
+// on Dokku Server
+dokku config:set my-nuxt-app HOST=0.0.0.0 NODE_ENV=production
+```
+
+<!-- You should see these 3 line when you type `dokku config my-nuxt-app` -->
+
+`dokku config my-nuxt-app`을 실행하면 다음 3줄을 보게 될텐데요.
+
+![nuxt config vars Dokku](https://i.imgur.com/9FNsaoQ.png)
+
+<!-- Then, we tell Dokku to launch `npm run build` via the `scripts.dokku.predeploy` script in our project `app.json`:
+`create a file name app.json in our project root folder` -->
+
+그럼 `app.json`화일의 `scripts.dokku.predeploy`의 `npm run build`를 Dokku에서 실행하도록 합니다:
+`프로젝트의 루트 폴더에 app.json을 생성합니다.`
+```js
+{
+  "scripts": {
+    "dokku": {
+      "predeploy": "npm run build"
+    }
+  }
+}
+```
+
+<!-- Finally, we can push our app on Dokku with: -->
+
+이걸로 앱을 Dokku에 git push 할 수 있게 되었습니다:
+```bash
+// commit your change before push.
+git remote add dokku dokku@yourServer:my-nuxt-app
+git push dokku master
+```
+
+<!-- Voilà! Our nuxt.js application is now hosted on Dokku! -->
+
+자! 이제 nuxt.js 어플리케이션이 Dokku위에서 호스팅 됩니다.

ko/faq/duplicated-meta-tags.md

@@ -0,0 +1,61 @@
+---
+title: 중복된 메타태그
+description: 메타태그가 중복된 경우에는?
+---
+
+<!-- title: Duplicated Meta tags -->
+<!-- description: Duplicated Meta tags with Nuxt.js? -->
+
+<!-- # Duplicated Meta tags? -->
+
+# 메타태그가 중복된 경우에는?
+
+<!-- This is a "feature" of [vue-meta](https://github.com/declandewet/vue-meta), please take a look at the [documentation of head elements](/guide/views#html-head). -->
+
+이것은 [vue-meta](https://github.com/declandewet/vue-meta)의 "특징" 입니다. [head 요소 문서](/guide/views#html-head-정보)를 참고해 주세요.
+
+<!-- \> To avoid any duplication when used in child component, please give a unique identifier with the hid key, please [read more](https://github.com/declandewet/vue-meta#lists-of-tags) about it. -->
+
+컴포넌트에서 vue-meta 를 사용할 때, 중복을 피하기 위해서는 유일한 식별자를 hid 키에 붙여서 사용합니다. 자세한 내용은  [vue-meta 테그 리스트](https://github.com/declandewet/vue-meta#lists-of-tags)를 참고해 주세요.
+
+<!-- For the meta description, you need to add the unique identifier `hid` so vue-meta will know that it has to overwrite the default tag. -->
+
+예를들어서 description 메타태그에는 `hid`라는 유일한 식별자를 붙여야 합니다. 그러면 vue-meta 는 디폴트 태그를 덮어써야 한다는 것을 알게 될 것입니다.
+
+<!-- Your `nuxt.config.js`: -->
+
+`nuxt.config.js`:
+
+```js
+...head: {
+    title: 'starter',
+    meta: [
+      { charset: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { name: 'keywords', content: 'keyword 1, keyword 2'},
+      { hid: 'description', name: 'description', content: 'This is the generic description.'}
+    ],
+  },
+...
+```
+
+<!-- An then in your individual page: -->
+
+그리고 개별페이지에는 다음과 같이 작성합니다:
+
+```js
+export default {
+  head () {
+    return {
+      title: `Page 1 (${this.name}-side)`,
+      meta: [
+        { hid: 'description', name: 'description', content: "Page 1 description" }
+      ],
+    }
+  }
+}
+```
+
+<!-- To learn how to use the `head` property in your pages, please see the [HTML head documentation](/guide/views#html-head). -->
+
+페이지의 `head` 프로퍼티의 자세한 사용방법에 대해서는 [HTML head 정보 문서](/guide/views#html-head-정보)를 참고해 주세요.

ko/faq/extend-webpack.md

@@ -0,0 +1,25 @@
+---
+title: Webpack 설정의 확장
+description: Webpack 설정을 확장하려면?
+---
+
+<!-- title: Extend Webpack -->
+<!-- description: How to extend webpack config? -->
+
+<!-- # How to extend webpack config? -->
+
+# Webpack 설정을 확장하려면?
+
+<!-- You can extend the webpack configuration via the `extend` option in your `nuxt.config.js`: -->
+
+`nuxt.config.js` 의 `extend` 옵션에 Webpack 설정을 확장할 수 있습니다:
+
+```js
+module.exports = {
+  build: {
+     extend (config, { isDev, isClient }) {
+       // ...
+     }
+  }
+}
+```

ko/faq/external-resources.md

@@ -0,0 +1,59 @@
+---
+title: 외부 리소스
+description: Nuxt.js 에서 외부 리소스를 사용하려면?
+---
+
+<!-- title: External resources -->
+<!-- description: How to use external resources with Nuxt.js? -->
+
+<!-- # How to use external resources? -->
+
+# 외부 리소스를 사용하려면?
+
+<!-- ## Global Settings -->
+
+## 글로벌 설정
+
+<!-- Include your resources in the `nuxt.config.js` file: -->
+
+`nuxt.config.js` 화일 안에 리소스를 include합니다:
+
+```js
+module.exports = {
+  head: {
+    script: [
+      { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' }
+    ],
+    link: [
+      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
+    ]
+  }
+}
+```
+
+<!-- ## Local Settings -->
+
+## 로컬 설정
+
+<!-- Include your resources in your .vue file inside the pages directory: -->
+
+pages 디렉토리의 .vue 화일 안에서 리소스를 include합니다:
+
+```html
+<template>
+  <h1>About page with jQuery and Roboto font</h1>
+</template>
+
+<script>
+export default {
+  head: {
+    script: [
+      { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' }
+    ],
+    link: [
+      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
+    ]
+  }
+}
+</script>
+```

ko/faq/github-pages.md

@@ -0,0 +1,74 @@
+---
+title: GitHub Pages 에 배포하기
+description: GitHub Pages 에 배포하려면?
+---
+
+<!-- title: GitHub Pages Deployment -->
+<!-- description: How to deploy Nuxt.js on GitHub Pages? -->
+
+<!-- # How to deploy on GitHub Pages? -->
+
+# GitHub Pages 에 배포하려면?
+
+<!-- Nuxt.js gives you the possibility to host your web application on any static hosting like [GitHub Pages](https://pages.github.com/) for example. -->
+
+Nuxt.js를 사용하면, 예를들어 [GitHub Pages](https://pages.github.com/)과 같은 정적호스팅 서비스에서 웹어플리케이션을 호스팅할 수 있습니다.
+
+<!-- To deploy on GitHub Pages, you need to generate your static web application: -->
+
+GitHub Pages에 배포하려면 정적 웹어플리케이션을 생성해야 합니다:
+
+```bash
+npm run generate
+```
+
+<!-- It will create a `dist` folder with everything inside ready to be deployed on GitHub Pages hosting. -->
+
+이때 `dist` 폴더가 생성되는데, 그 안에 GitHub pages에 배포될 모든것이 들어가 있습니다.
+
+<!-- Branch `gh-pages` for project repository OR branch `master` for user or organization site -->
+
+프로젝트 리포지토리라면 `gh-pages` 브랜치, 사용자 혹은 조직 사이트라면 `master` 브랜치를 지정하세요.
+
+<!-- <p class="Alert Alert--nuxt-green"><b>INFO:</b> If you use a custom domain for your GitHub Pages and put `CNAME` file, it is recommended that CNAME file is put in the `static` directory. [More documentation](/guide/assets#static) about it.</p> -->
+
+<p class="Alert Alert--nuxt-green"><b>정보:</b> GitHub Pages에서 독립도메인을 사용하기 위해서 `CNAME` 화일을 사용한다면, `CNAME` 화일은 `static` 디렉토리에 위치시키는게 좋습니다. 자세한 내용은 [webpack에서 다루지 않는 정적 화일](/guide/assets#webpack-에서-다루지-않는-정적-화일)을 참고해 주세요.</p>
+
+<!-- ## Command line deployment -->
+
+## 커맨드라인에서 배포하기
+
+<!-- You can also use [push-dir package](https://github.com/L33T-KR3W/push-dir): -->
+
+[push-dir package](https://github.com/L33T-KR3W/push-dir)를 사용하는 것도 가능합니다:
+
+<!-- First install it via npm: -->
+
+우선은 npm 으로 설치하세요:
+
+```bash
+npm install push-dir --save-dev
+```
+
+<!-- Add a `deploy` command to your package.json with the branch as `gh-pages` for project repository OR `master` for user or organization site. -->
+
+`deploy` 커맨드를 package.json에 추가해 주세요. 브랜치는 프로젝트 리포지토리라면 `gh-pages` 브랜치를, 사용자 혹은 조직 사이트라면 `master` 브랜치를 지정해 주세요.
+
+```js
+"scripts": {
+  "dev": "nuxt",
+  "build": "nuxt build",
+  "start": "nuxt start",
+  "generate": "nuxt generate",
+  "deploy": "push-dir --dir=dist --branch=gh-pages --cleanup"
+},
+```
+
+<!-- Then generate and deploy your static application: -->
+
+자, 정적 어플리케이션을 생성하고 배포하세요!:
+
+```bash
+npm run generate
+npm run deploy
+```