Merge pull request #16 from jicjjang/translation-ko

ko/examples

ko/examples/async-data.md

@@ -0,0 +1,6 @@
+---
+title: 비동기 데이터
+description: Nuxt.js를 사용한 비동기 데이터 예제
+github: async-data
+documentation: /guide/async-data
+---

ko/examples/auth-routes.md

@@ -0,0 +1,216 @@
+---
+title: 인증 경로
+description: Nuxt.js로 인증된 경로 예제
+github: auth-routes
+livedemo: https://nuxt-auth-routes.gomix.me
+liveedit: https://gomix.com/#!/project/nuxt-auth-routes
+---
+
+# 문서
+
+> Nuxt.js로 인증 경로를 쉽게 만들 수 있습니다.
+
+## Using Express and Sessions
+
+Nuxt.js를 사용하면서 어플리케이션에 세션 기능을 추가할 때 `express`와 `express-session`을 사용합니다.
+
+우선, 의존성을 설치해야 합니다:
+```bash
+yarn add express express-session body-parser whatwg-fetch
+```
+
+*`whatwg-fetch`에 대해서는 뒤에 말씀드리겠습니다.*
+
+`server.js`를 만듭니다.:
+```js
+const Nuxt = require('nuxt')
+const bodyParser = require('body-parser')
+const session = require('express-session')
+const app = require('express')()
+
+// req.body에 접근하기 위한 Body parser
+app.use(bodyParser.json())
+
+// req.session을 만들기 위한 session
+app.use(session({
+  secret: 'super-secret-key',
+  resave: false,
+  saveUninitialized: false,
+  cookie: { maxAge: 60000 }
+}))
+
+// POST /api/login 로 로그인하여 req.session.authUser에 추가.
+app.post('/api/login', function (req, res) {
+  if (req.body.username === 'demo' && req.body.password === 'demo') {
+    req.session.authUser = { username: 'demo' }
+    return res.json({ username: 'demo' })
+  }
+  res.status(401).json({ error: 'Bad credentials' })
+})
+
+// POST /api/logout 로 로그아웃하여 req.session.authUser에서 제거.
+app.post('/api/logout', function (req, res) {
+  delete req.session.authUser
+  res.json({ ok: true })
+})
+
+// 옵션으로 Nuxt.js를 인스턴스화 합니다.
+const isProd = process.env.NODE_ENV === 'production'
+const nuxt = new Nuxt({ dev: !isProd })
+// 프로덕션 환경에서 빌드되지 않음.
+const promise = (isProd ? Promise.resolve() : nuxt.build())
+promise.then(() => {
+  app.use(nuxt.render)
+  app.listen(3000)
+  console.log('Server is listening on http://localhost:3000')
+})
+.catch((error) => {
+  console.error(error)
+  process.exit(1)
+})
+```
+
+`package.json` 파일 업데이트:
+```json
+// ...
+"scripts": {
+  "dev": "node server.js",
+  "build": "nuxt build",
+  "start": "cross-env NODE_ENV=production node server.js"
+}
+// ...
+```
+주의: 위 예제를 확인하기 위해 `npm install --save-dev cross-env` 명령어를 실행해야 합니다. 윈도우에서 개발하지 *않는다면* `start` 스크립트에서 cross-env를 제외하고 직접 `NODE_ENV`를 설정할 수 있습니다.
+
+## Store 사용하기
+
+사용자가 페이지 **전체**에 연결되어 있는지 여부를 응용 프로그램에 알리려면 전역 상태가 필요합니다.
+
+Nuxt.js가 Vuex를 사용하기 위해서 `store/index.js` 파일을 만듭니다:
+
+```js
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+// window.fetch()를 위한 Polyfill
+require('whatwg-fetch')
+
+const store = new Vuex.Store({
+
+  state: {
+    authUser: null
+  },
+
+  mutations: {
+    SET_USER: function (state, user) {
+      state.authUser = user
+    }
+  },
+
+  actions: {
+    // ...
+  }
+
+})
+
+export default store
+```
+
+1. 우리는 `Vue`와 `Vuex` (Nuxt.js에 포함됨)를 가져오고 Vue에게 우리의 컴포넌트에서 `$store`를 사용하기 위해 Vuex를 사용할 것을 요청합니다.
+2. 모든 브라우저에서 `fetch()` 메소드를 polyfill하기 위해서 `require('whatwg-fetch')`를 사용합니다. ([fetch repo](https://github.com/github/fetch))
+3. 우리는 연결된 사용자의 `state.authUser`를 설정할 `SET_USER` 뮤테이션을 만듭니다.
+4. store 인스턴스를 Nuxt.js로 내보내서 어플리케이션에 주입 할 수 있습니다.
+
+### nuxtServerInit() 액션
+
+Nuxt.js는 인자에 컨텍스트가 있는 'nuxtServerInit`라는 특정 작업을 호출했을 때, 앱이 로드되며 store는 서버에서 이미 가져온 일부 데이터로 채워집니다.
+
+`store/index.js`에서 `nuxtServerInit` 액션을 추가 할 수 있습니다:
+```js
+nuxtServerInit ({ commit }, { req }) {
+  if (req.session && req.session.authUser) {
+    commit('SET_USER', req.session.authUser)
+  }
+}
+```
+
+nuxt.js는 비동기 데이터 메소드를 만들기 위해 가장 익숙한 메소드를 선택할 수 있는 다른 방법들을 제공합니다:
+
+1. Promise를 반환하면, nuxt.js는 컴포넌트를 렌더링하기 전에 Promise가 해결 될 때까지 기다립니다.
+2. [async/await proposal](https://github.com/lukehoban/ecmascript-asyncawait) 사용하기 ([더 배워보기](https://zeit.co/blog/async-and-await))
+
+### login() 액션
+
+우리는 사용자 로그인을 위해 호출 될 Pages 컴포넌트에 `login` 액션을 추가합니다:
+```js
+login ({ commit }, { username, password }) {
+  return fetch('/api/login', {
+    // 클라이언트 Cookies를 서버로 보냅니다.
+    credentials: 'same-origin',
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({
+      username,
+      password
+    })
+  })
+  .then((res) => {
+    if (res.status === 401) {
+      throw new Error('Bad credentials')
+    } else {
+      return res.json()
+    }
+  })
+  .then((authUser) => {
+    commit('SET_USER', authUser)
+  })
+}
+```
+
+### logout() 메서드
+
+```js
+logout ({ commit }) {
+  return fetch('/api/logout', {
+    // 클라이언트의 Cookies를 서버로 보냅니다.
+    credentials: 'same-origin',
+    method: 'POST'
+  })
+  .then(() => {
+    commit('SET_USER', null)
+  })
+}
+```
+
+## Pages 컴포넌트
+
+`$store.state.authUser`를 사용하여 사용자가 어플리케이션에 연결되어 있는지 여부를 확인할 수 있습니다.
+
+### 사용자가 연결되지 않았다면 Redirect
+
+연결된 사용자만 볼 수 있는 `/secret` 라우터를 추가합니다.
+```html
+<template>
+  <div>
+    <h1>Super secret page</h1>
+    <router-link to="/">Back to the home page</router-link>
+  </div>
+</template>
+
+<script>
+export default {
+  // 이 컴포넌트에 데이터를 설정할 필요가 없으므로 fetch()를 사용합니다.
+  fetch ({ store, redirect }) {
+    if (!store.state.authUser) {
+      return redirect('/')
+    }
+  }
+}
+</script>
+```
+
+`fetch` 메소드에서 사용자가 연결되어있지 않을 때, `redirect('/')`를 호출하는 것을 볼 수 있습니다.

ko/examples/cached-components.md

@@ -0,0 +1,6 @@
+---
+title: 캐시된 컴포넌트
+description: Nuxt.js를 사용하여 캐시된 컴포넌트 예제
+github: cached-components
+documentation: /api/configuration-cache
+---

ko/examples/custom-loading.md

@@ -0,0 +1,7 @@
+---
+title: 사용자 지정 로딩 컴포넌트
+description: Nuxt.js를 사용한 사용자 지정 로딩 컴포넌트 예제
+github: custom-loading
+livedemo: https://custom-loading.nuxtjs.org
+documentation: /api/configuration-loading
+---

ko/examples/custom-routes.md

@@ -0,0 +1,7 @@
+---
+title: 사용자 지정 경로
+description: Nuxt.js를 사용한 사용자 지정 경로 예제
+github: custom-routes
+livedemo: https://custom-routes.nuxtjs.org
+documentation: /guide/routing#dynamic-routes
+---

ko/examples/global-css.md

@@ -0,0 +1,7 @@
+---
+title: 전역 CSS
+description: Nuxt.js를 사용한 전역 CSS 예제
+github: global-css
+livedemo: https://global-css.nuxtjs.org
+documentation: /api/configuration-css
+---

ko/examples/hello-world.md

@@ -0,0 +1,9 @@
+---
+title: Hello World
+description: Nuxt.js를 사용한 Hello World 예제
+github: hello-world
+youtube: https://www.youtube.com/embed/kmf-p-pTi40
+livedemo: https://hello-world.nuxtjs.org
+liveedit: https://gomix.com/#!/project/nuxt-hello-world
+documentation: /guide/installation#starting-from-scratch
+---

ko/examples/i18n.md

@@ -0,0 +1,7 @@
+---
+title: 국제화 (i18n)
+description: Nuxt.js를 사용한 국제화 (i18n) 예제
+github: i18n
+livedemo: https://i18n.nuxtjs.org
+documentation: /guide/routing#middleware
+---

ko/examples/layouts.md

@@ -0,0 +1,8 @@
+---
+title: 레이아웃
+description: Nuxt.js를 사용한 레이아웃 예제
+github: custom-layouts
+livedemo: https://nuxt-custom-layouts.gomix.me/
+liveedit: https://gomix.com/#!/project/nuxt-custom-layouts
+documentation: /guide/views#layouts
+---

ko/examples/menu.json

@@ -0,0 +1,33 @@
+[
+  {
+    "title": "필수",
+    "links": [
+      { "name": "Hello world", "to": "" },
+      { "name": "SEO HTML Head", "to": "/seo-html-head" }
+    ]
+  },
+  {
+    "title": "사용자 정의",
+    "links": [
+      { "name": "캐시된 컴포넌트", "to": "/cached-components" },
+      { "name": "사용자 지정 로딩 컴포넌트", "to": "/custom-loading" },
+      { "name": "사용자 지정 경로", "to": "/custom-routes" },
+      { "name": "전역 CSS", "to": "/global-css" },
+      { "name": "레이아웃", "to": "/layouts" },
+      { "name": "미들웨어", "to": "/middleware" },
+      { "name": "중첩 경로", "to": "/nested-routes" },
+      { "name": "플러그인", "to": "/plugins" },
+      { "name": "경로 전환", "to": "/routes-transitions" }
+    ]
+  },
+  {
+    "title": "고급",
+    "links": [
+      { "name": "비동기 데이터", "to": "/async-data" },
+      { "name": "인증 경로", "to": "/auth-routes" },
+      { "name": "Vuex Store", "to": "/vuex-store" },
+      { "name": "국제화 (i18n)", "to": "/i18n" },
+      { "name": "테스팅", "to": "/testing" }
+    ]
+  }
+]

ko/examples/middleware.md

@@ -0,0 +1,7 @@
+---
+title: 미들웨어
+description: Nuxt.js를 사용한 미들웨어 예제
+github: middleware
+livedemo: https://middleware.nuxtjs.org
+documentation: /guide/routing#middleware
+---

ko/examples/nested-routes.md

@@ -0,0 +1,7 @@
+---
+title: 중첩 경로
+description: Nuxt.js를 사용한 중첩 경로 예제
+github: nested-routes
+livedemo: https://nested-routes.nuxtjs.org
+documentation: /guide/routing#nested-routes
+---

ko/examples/plugins.md

@@ -0,0 +1,7 @@
+---
+title: 플러그인
+description: Nuxt.js와 함께 외부 모듈과 플러그인 사용하기 예제
+github: plugins-vendor
+livedemo: https://plugins-vendor.nuxtjs.org
+documentation: /guide/plugins
+---

ko/examples/routes-transitions.md

@@ -0,0 +1,8 @@
+---
+title: 경로 전환
+description: Nuxt.js를 사용한 경로 전환 예제
+github: routes-transitions
+youtube: https://www.youtube.com/embed/RIXOzJWFfc8
+livedemo: https://routes-transitions.nuxtjs.org
+documentation: /guide/routing#transitions
+---

ko/examples/seo-html-head.md

@@ -0,0 +1,7 @@
+---
+title: SEO HTML Head
+description: Nuxt.js를 사용한 SEO HTML Head 예제
+github: head-elements
+livedemo: https://head-elements.nuxtjs.org
+documentation: /guide/views#html-head
+---

ko/examples/testing.md

@@ -0,0 +1,6 @@
+---
+title: 테스팅
+description: Nuxt.js를 사용한 테스팅 예제
+github: with-ava
+documentation: /guide/development-tools#end-to-end-testing
+---

ko/examples/vuex-store.md

@@ -0,0 +1,7 @@
+---
+title: Vuex Store
+description: Nuxt.js를 사용한 Vuex Store 예제
+github: vuex-store
+livedemo: https://vuex-store.nuxtjs.org
+documentation: /guide/vuex-store
+---