From 1b63aee3ad5d5a83de727a503028f60ee3322c51 Mon Sep 17 00:00:00 2001 From: DiyLecko Date: Thu, 20 Apr 2017 20:57:38 +0900 Subject: [PATCH 001/106] Update README.md --- README.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/README.md b/README.md index adda6e9d6..13a7c5d07 100644 --- a/README.md +++ b/README.md @@ -39,6 +39,14 @@ Japanese translation is maintained by INOUE Takuya. * Primary maintainer - [INOUE Takuya](http://blog.inouetakuya.info/) * Primary translator - [INOUE Takuya](https://github.com/inouetakuya) +### Korean + +Korean translation is maintained by Taewoong La. + +* Translation Repo — [/DiyLecko/ko.docs.nuxtjs](https://github.com/DiyLecko/ko.docs.nuxtjs) +* Primary maintainer - [Taewoong La](http://blog.naver.com/diy_lecko) +* Primary translator - [Taewoong La](https://github.com/DiyLecko) + ### Want to help with the translation? If you feel okay with translating sorta alone, just fork the repo, create a "work-in-progress" pull request (mark it with [WIP], see [Russian translation](https://github.com/nuxt/docs/pull/3) if you need an example) — and just go on. From 0fa530cd280062afbbc36d4b02d3fc947e0a13e2 Mon Sep 17 00:00:00 2001 From: DiyLecko Date: Thu, 20 Apr 2017 21:15:28 +0900 Subject: [PATCH 002/106] Translate lang.json --- ko/lang.json | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) create mode 100644 ko/lang.json diff --git a/ko/lang.json b/ko/lang.json new file mode 100644 index 000000000..e3f0c4544 --- /dev/null +++ b/ko/lang.json @@ -0,0 +1,50 @@ +{ + "iso": "ko", + "links": { + "api": "API", + "blog": "블로그", + "chat": "채팅", + "documentation": "문서", + "download": "다운로드", + "examples": "예제", + "ecosystem": "생태계", + "faq": "FAQ", + "get_started": "시작하기", + "github": "GitHub", + "guide": "가이드", + "homepage": "홈페이지", + "live_demo": "라이브 데모", + "live_edit": "라이브 수정", + "twitter": "트위터", + "vuejs": "Vue.js", + "vue_jobs": "Vue 구인/구직" + }, + "text": { + "an_error_occured": "에러가 발생했습니다.", + "api_page_not_found": "API 페이지를 찾을 수 없습니다.", + "example_file": "예제 파일", + "please_wait": "잠시만 기다려주세요...", + "please_define_title": "front matter에 title을 정의해주세요.", + "please_define_description": "front matter에 description을 정의해주세요.", + "search": "검색", + "version": "버전" + }, + "homepage": { + "title": "범용 Vue.js 어플리케이션", + "meta": { + "title": "Nuxt.js - 범용 Vue.js 어플리케이션", + "description": "Nuxt.js은 서버 사이드 렌더링, 코드 분리, 핫 리로딩, 정적 생성기 등과 함께 Vue.js 어플리케이션을 만들기 위한 최소한의 프레임워크입니다!" + } + }, + "footer": { + "authors": "Made by Chopin Brothers" + }, + "guide": { + "release_notes": "릴리즈 노트", + "contribute": "잘못된 부분이 있거나 이 문서에 기여하고 싶으신가요?", + "edit_on_github": "GitHub에서 이 페이지를 수정해주세요!" + }, + "examples": { + "source_code": "소스 코드" + } +} From e6eb2234ec9b82756d67a85c56b9d00ff705789b Mon Sep 17 00:00:00 2001 From: DiyLecko Date: Thu, 20 Apr 2017 21:27:46 +0900 Subject: [PATCH 003/106] guide/menu.json --- ko/guide/menu.json | 109 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 109 insertions(+) create mode 100644 ko/guide/menu.json diff --git a/ko/guide/menu.json b/ko/guide/menu.json new file mode 100644 index 000000000..106f92780 --- /dev/null +++ b/ko/guide/menu.json @@ -0,0 +1,109 @@ +[ + { + "title": "Prologue", + "links": [ + { + "to": "", "name": "소개", + "contents": [ + { "to": "#what-is-nuxt-js-", "name": "Nuxt.js란 무엇인가?" }, + { "to": "#how-it-works", "name": "어떻게 동작합니까?" }, + { "to": "#features", "name": "특징" }, + { "to": "#schema", "name": "스키마" }, + { "to": "#server-rendered", "name": "서버에서 렌더링하기" }, + { "to": "#static-generated", "name": "정적 파일로 생성하기" } + ] + }, + { "to": "/contribution-guide", "name": "Contribution 가이드" }, + { "to": "/release-notes", "name": "릴리즈 노트" } + ] + }, + { + "title": "시작하기", + "links": [ + { + "to": "/installation", "name": "설치", + "contents": [ + { "to": "#using-nuxt-js-starter-template", "name": "Nuxt.js starter 템플릿 사용하기" }, + { "to": "#starting-from-scratch", "name": "처음부터 시작하기" } + ] + }, + { + "to": "/directory-structure", "name": "디렉토리 구조", + "contents": [ + { "to": "#directories", "name": "디렉토리" }, + { "to": "#aliases", "name": "Aliases" } + ] + }, + { "to": "/configuration", "name": "환경 설정" }, + { + "to": "/routing", "name": "라우팅", + "contents": [ + { "to": "#basic-routes", "name": "기본 라우트" }, + { "to": "#dynamic-routes", "name": "동적 라우트" }, + { "to": "#nested-routes", "name": "중첩 라우트" }, + { "to": "#dynamic-nested-routes", "name": "동적 중첩 라우트" }, + { "to": "#transitions", "name": "트랜지션" }, + { "to": "#middleware", "name": "미들웨어" } + ] + }, + { + "to": "/views", "name": "뷰", + "contents": [ + { "to": "#document", "name": "도큐먼트" }, + { "to": "#layouts", "name": "레이아웃" }, + { "to": "#pages", "name": "페이지" }, + { "to": "#html-head", "name": "HTML Head" } + ] + }, + { + "to": "/async-data", "name": "비동기 데이터", + "contents": [ + { "to": "#the-data-method", "name": "asyncData 메소드" }, + { "to": "#the-context", "name": "Context" }, + { "to": "#handling-errors", "name": "에러 핸들링" } + ] + }, + { + "to": "/assets", "name": "애셋", + "contents": [ + { "to": "#webpacked", "name": "Webpack 사용" }, + { "to": "#static", "name": "정적 파일 사용" } + ] + }, + { + "to": "/plugins", "name": "플러그인", + "contents": [ + { "to": "#external-packages", "name": "외부 패키지" }, + { "to": "#vue-plugins", "name": "Vue 플러그인" }, + { "to": "#inject-in-root-amp-context", "name": "$root 와 context 합치기" }, + { "to": "#client-side-only", "name": "클라이언트에서만 사용하기" } + ] + }, + { + "to": "/vuex-store", "name": "Vuex Store", + "contents": [ + { "to": "#activate-the-store", "name": "store 활성화" }, + { "to": "#classic-mode", "name": "클래식 모드" }, + { "to": "#modules-mode", "name": "모듈 모드" }, + { "to": "#the-fetch-method", "name": "fetch 메소드" }, + { "to": "#the-nuxtserverinit-action", "name": "nuxtServerInit 액션" } + ] + }, + { + "to": "/commands", "name": "명령어", + "contents": [ + { "to": "#list-of-commands", "name": "명령어 목록" }, + { "to": "#development-environment", "name": "개발 환경" }, + { "to": "#production-deployment", "name": "제품 출시" } + ] + }, + { + "to": "/development-tools", "name": "개발 툴", + "contents": [ + { "to": "#end-to-end-testing", "name": "전체 테스팅" }, + { "to": "#eslint", "name": "ESLint" } + ] + } + ] + } +] From bc4024f2933a1395f26c1dad52db4b100b079e45 Mon Sep 17 00:00:00 2001 From: DiyLecko Date: Thu, 20 Apr 2017 22:16:38 +0900 Subject: [PATCH 004/106] Update guide/menu.json --- ko/guide/menu.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ko/guide/menu.json b/ko/guide/menu.json index 106f92780..2c3641553 100644 --- a/ko/guide/menu.json +++ b/ko/guide/menu.json @@ -8,7 +8,7 @@ { "to": "#what-is-nuxt-js-", "name": "Nuxt.js란 무엇인가?" }, { "to": "#how-it-works", "name": "어떻게 동작합니까?" }, { "to": "#features", "name": "특징" }, - { "to": "#schema", "name": "스키마" }, + { "to": "#schema", "name": "구조" }, { "to": "#server-rendered", "name": "서버에서 렌더링하기" }, { "to": "#static-generated", "name": "정적 파일로 생성하기" } ] From 1e6592799dbd4b0845d142bf100a2b36b9fe23d7 Mon Sep 17 00:00:00 2001 From: DiyLecko Date: Thu, 20 Apr 2017 22:16:54 +0900 Subject: [PATCH 005/106] guide/index.md --- ko/guide/index.md | 100 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 100 insertions(+) create mode 100644 ko/guide/index.md diff --git a/ko/guide/index.md b/ko/guide/index.md new file mode 100644 index 000000000..f8ccc1470 --- /dev/null +++ b/ko/guide/index.md @@ -0,0 +1,100 @@ +--- +title: 소개 +description: "2016년 10월 25일, zeit.co의 개발팀은 서버사이드 렌더링 React 애플리케이션을 위한 프레임워크인 Next.js 프레임워크를 발표했습니다. 발표 몇 시간 뒤, Next.js처럼 서버사이드 렌더링 Vue.js 애플리케이션을 위한 프레임워크를 만들자는 생각이 들었고, 그렇게 Nuxt.js가 탄생했습니다." +--- + +> 2016년 10월 25일, [zeit.co](https://zeit.co/)의 개발팀은 서버사이드 렌더링 React 애플리케이션을 위한 프레임워크인 [Next.js](https://zeit.co/blog/next) 프레임워크를 발표했습니다. 발표 몇 시간 뒤, Next.js처럼 서버사이드 렌더링 [Vue.js](https://vuejs.org) 애플리케이션을 위한 프레임워크를 만들자는 생각이 들었고, 그렇게 **Nuxt.js** 가 탄생했습니다. + +## Nuxt.js란 무엇인가? + +Nuxt.js는 범용 Vue.js 애플리케이션을 만들기 위한 프레임워크로, 주요 범위는 클라이언트/서버 배포를 추상화하면서 **UI 렌더링** 을 하는 것입니다. + +우리의 목표는 Nuxt.js를 기반 프로젝트로 하거나 Node.js 기반의 프로젝트에 추가해서 사용할 수 있도록 충분히 유연한 프레임워크를 만드는 것입니다. + +Nuxt.js는 더 즐거운 **서버 사이드 렌더링** Vue.js 애플리케이션 개발을 위해 필요한 모든 설정들이 미리 준비되어있습니다. + +또한 우리는 *nuxt generate* 라고 부르는 배포 옵션을 제공하며, 이는 Vue.js 애플리케이션을 **정적으로 생성** 하는 옵션입니다. +이 옵션이 마이크로 서비스를 지향하는 웹 애플리케이션 개발의 다음 단계가 될 수 있다고 생각합니다. + +Nuxt.js 프레임워크는 비동기 데이터, 미들웨어, 레이아웃 등과 같이 클라이언트 측과 서버 측 사이에서 개발하는데 도움되는 많은 기능을 제공합니다. + +## 어떻게 동작합니까? + +![Vue with Webpack and Babel](https://i.imgur.com/avEUftE.png) + +Nuxt.js는 훌륭한 웹 애플리케이션을 만들기 위해 아래의 기능들을 포함합니다.: +- [Vue 2](https://github.com/vuejs/vue) +- [Vue-Router](https://github.com/vuejs/vue-router) +- [Vuex](https://github.com/vuejs/vuex) ([store 옵션](/guide/vuex-store)을 사용할 때만 포함됩니다.) +- [Vue-Meta](https://github.com/declandewet/vue-meta) + +총 용량은 **28kb min+gzip** 밖에 되지 않습니다. (vuex를 포함하면 31kb입니다.) + +[vue-loader](https://github.com/vuejs/vue-loader)와 [babel-loader](https://github.com/babel/babel-loader)와 함께 [Webpack](https://github.com/webpack/webpack)을 사용해서 코드를 묶고, 분할하며, 압축합니다. + +## 특징 + +- Vue 파일 작성 +- 코드 분할 자동화 +- 서버 사이드 렌더링 +- 비동기 데이터 기반의 강력한 라우팅 시스템 +- 정적 파일 전송 +- ES6/ES7 지원 +- JS & CSS 코드 번들링 및 압축 +- HTML head 태그 관리 +- 개발 단계에서 핫 리로딩 사용하기 +- 전 처리기 지원: SASS, LESS, Stylus 등 + +## 구조 + +아래의 구조는 ``를 서버가 호출하거나 이를 통해 사용자가 이동한 경우, nuxt.js가 어떻게 동작하는지를 보여줍니다.: + +![nuxt-schema](/nuxt-schema.png) + +## 서버에서 렌더링하기 + +여러분은 nuxt.js로 프로젝트의 모든 UI 렌더링을 처리할 수 있습니다. + +`nuxt`가 실행될 때, nuxt는 핫 리로딩과 애플리케이션이 자동으로 서버 사이드 렌더링되도록 하는 vue-server-renderer가 포함된 개발 서버를 실행합니다. + +이에 대한 자세한 내용을 [명령어](/guide/commands)에서 확인합니다. + +만약 이미 서버가 있다면, nuxt.js를 미들웨어로 사용할 수 있지만 제약이 많을 경우 [Nuxt.js를 프로그램적으로 사용하기](/api/nuxt) 가이드를 참고합니다. + +## 정적 파일로 생성하기 + +nuxt.js에서 가장 큰 혁신은 아마 `nuxt generate` 명령어 가 될 것입니다. + +이는 애플리케이션을 빌드할 때 모든 라우트를 HTML로 생성하는 명령어 입니다. + +예를 들어: + +```bash +-| pages/ +----| about.vue +----| index.vue +``` + +위의 라우트는 아래와 같이 생성될 것입니다: +``` +-| dist/ +----| about/ +------| index.html +----| index.html +``` + +이는 여러분이 어느 정적 파일 호스팅에서든 웹 애플리케이션을 호스팅할 수 있다는 뜻입니다! + +가장 좋은 예는 이 웹사이트로, GitHub 페이지에 호스팅 및 생성되었습니다. +- [소스 코드](https://github.com/nuxt/nuxtjs.org) +- [생성된 코드](https://github.com/nuxt/nuxtjs.org/tree/gh-pages) + +우리는 [docs repository](https://github.com/nuxt/docs)가 업데이트될 때마다 수동으로 애플리케이션을 매번 생성하고 싶지 않았고, 그래서 매번 push를 하면 아래의 AWS Lambda를 호출하도록 했습니다.: +1. [nuxtjs.org repository](https://github.com/nuxt/nuxtjs.org)를 clone 합니다. +2. `npm install`을 통해 디펜던시를 설치합니다. +3. `nuxt generate`를 실행합니다. +4. `dist` 폴더를 `gh-pages` 브랜치에 push 합니다. + +이제 우리는 **서버가 없는 정적 웹 애플리케이션** 을 가지게 되었습니다! + +우리는 재고나 있거나 없는 경우 항상 웹앱을 `nuxt generate`로 재생성하고 CDN에 호스팅하는 방식의 e-commerce 웹 애플리케이션을 생각해볼 수 있습니다. 만약 사용자가 그동안 웹앱을 탐색한다면, e-commerce API를 호출하면 최신 정보가 제공될 것입니다. 서버의 다중 인스턴스와 캐싱을 더 이상 고민할 필요가 없습니다! From 13ce0b3730df5c6a201f077037cb425edd404644 Mon Sep 17 00:00:00 2001 From: DiyLecko Date: Thu, 20 Apr 2017 22:46:46 +0900 Subject: [PATCH 006/106] guide/contribution-guide.md --- ko/guide/contribution-guide.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 ko/guide/contribution-guide.md diff --git a/ko/guide/contribution-guide.md b/ko/guide/contribution-guide.md new file mode 100644 index 000000000..69a63813e --- /dev/null +++ b/ko/guide/contribution-guide.md @@ -0,0 +1,19 @@ +--- +title: Contribution 가이드 +description: Contribution은 모두 환영합니다! +--- + +> Contribution은 모두 환영합니다! + +## 이슈 보고하기 + +프로젝트에 기여하는 가장 좋은 방법은 문제가 생겼을 때 자세한 정보을 보내는 것이며 잘 쓰여진 버그 리포트에 대해 항상 감사하게 생각하고 있습니다. 리포트를 보내기 전에 먼저 문서를 자세히 읽어보시고 이미 존재하는 이슈인지 검색해주세요.: https://github.com/nuxt/nuxt.js/issues + +## 풀 리퀘스트 + +우리는 단순한 문자열 수정이라도 여러분의 풀 리퀘스트를 보는 것을 정말 좋아합니다. 모든 중요한 개선 사항은 누구든 시작하기 전에 [GitHub 이슈](https://github.com/nuxt/nuxt.js/issues)를 등록해야 합니다. + +### 컨벤션 + +- 수정에 대한 브랜치 이름은 `fix-XXX`의 형식이어야 하며, XXX에는 이슈 번호 혹은 무엇을 수정했는지에 대해 적으면 됩니다. +- 새로운 기능에 대한 브랜치 이름은 `feature-XXX`의 형식이어야 하며, XXX에는 이슈 번호를 적습니다. From 62c2fb368ea1cfacc81e5934bafafd8972fef719 Mon Sep 17 00:00:00 2001 From: jicjjang Date: Thu, 20 Apr 2017 23:18:38 +0900 Subject: [PATCH 007/106] add ko/guide/configuration.md --- ko/guide/configuration.md | 84 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 84 insertions(+) create mode 100644 ko/guide/configuration.md diff --git a/ko/guide/configuration.md b/ko/guide/configuration.md new file mode 100644 index 000000000..99e2a9e3f --- /dev/null +++ b/ko/guide/configuration.md @@ -0,0 +1,84 @@ +--- +title: 설정 +description: Nuxt.js 기본 설정은 대부분의 기능을 사용할 수 있도록 되어있지만, nuxt.config.js 파일로 덮어 쓸 수 있습니다. +--- + +> Nuxt.js 기본 설정은 대부분의 기능을 사용할 수 있도록 되어있지만, nuxt.config.js 파일로 덮어 쓸 수 있습니다. + +### build + +이 옵션을 사용하면 생성 된 vendor.bundle.js 파일에 모듈을 추가하여 앱 번들의 크기를 줄일 수 있습니다. 외부 모듈을 사용할 때 정말 유용합니다. + +[build 옵션에 대한 문서](/api/configuration-build) + +### cache + +이 옵션을 사용하면 캐시된 컴포넌트를 사용하여 렌더링 성능을 향상시킬 수 있습니다. + +[cache 옵션에 대한 문서](/api/configuration-cache) + +### css + +이 옵션을 사용하면 모든 페이지에서 전역으로 사용할 CSS파일 / 모듈 / 라이브러리 파일을 설정할 수 있습니다. + +[css 옵션에 대한 문서](/api/configuration-css) + +### dev + +이 옵션을 사용하면 nuxt.js의 개발 및 프로덕션 모드를 정의 할 수 있습니다. + +[dev 옵션에 대한 문서](/api/configuration-dev) + +### env + +이 옵션을 사용하면 클라이언트 및 서버에서 사용 가능한 환경 변수를 정의 할 수 있습니다. + +[env 옵션에 대한 문서](/api/configuration-env) + +### generate + +이 옵션을 사용하면 어플리케이션에서 Nuxt.js가 HTML 파일로 변환할 모든 동적인 경로에 대한 각각의 params 값을 정의 할 수 있습니다 + +[generate 옵션에 대한 문서](/api/configuration-generate) + +### head + +이 옵션을 사용하면 애플리케이션의 모든 기본 메타를 정의 할 수 있습니다. + +[head 옵션에 대한 문서](/api/configuration-head) + +### loading + +이 옵션을 사용하면 Nuxt.js를 사용하여 기본적으로 불러올 컴포넌트를 사용자 정의 할 수 있습니다. + +[loading 옵션에 대한 문서](/api/configuration-loading) + +### plugins + +이 옵션을 사용하면 루트 vue.js 어플리케이션을 인스턴스화 하기 전에 실행할 Javascript 플러그인을 정의 할 수 있습니다. + +[plugins 옵션에 대한 문서](/api/configuration-plugins) + +### rootDir + +이 옵션을 사용하면 nuxt.js 어플리케이션의 위치를 정의 할 수 있습니다. + +[rootDir 옵션에 대한 문서](/api/configuration-rootdir) + +### router + +이 옵션을 사용하면 vue-router의 기본적인 Nuxt.js 구성을 덮어 쓸 수 있습니다. + +[router 옵션에 대한 문서](/api/configuration-router) + +### srcDir + +이 옵션을 사용하면 nuxt.js 어플리케이션의 src 디렉토리를 정의 할 수 있습니다. + +[srcDir 옵션에 대한 문서](/api/configuration-srcdir) + +### transition + +이 옵션을 사용하면 페이지 transition 기능의 기본 속성을 정의 할 수 있습니다. + +[transition 옵션에 대한 문서](/api/configuration-transition) From 88ea199621dbaaa0d9c7ff11f8d3e3229526ca3a Mon Sep 17 00:00:00 2001 From: DiyLecko Date: Thu, 20 Apr 2017 23:37:34 +0900 Subject: [PATCH 008/106] guide/installation.md #2 --- ko/guide/installation.md | 92 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 92 insertions(+) create mode 100644 ko/guide/installation.md diff --git a/ko/guide/installation.md b/ko/guide/installation.md new file mode 100644 index 000000000..f5eb27439 --- /dev/null +++ b/ko/guide/installation.md @@ -0,0 +1,92 @@ +--- +title: 설치 +description: Nuxt.js는 시작하기 정말 쉽습니다. 간단한 프로젝트는 딱 `nuxt` 디펜던시만 있으면 됩니다. +--- + +> Nuxt.js는 시작하기 정말 쉽습니다. 간단한 프로젝트는 딱 `nuxt` 디펜던시만 있으면 됩니다. + +## Nuxt.js starter 템플릿 사용하기 + +빠르게 시작하기 위해서 Nuxt.js 팀은 [starter 템플릿](https://github.com/nuxt/starter)을 만들어뒀습니다. + +starter 템플릿을 [.zip로 다운로드](https://github.com/nuxt/starter/archive/source.zip)하거나 vue-cli로 설치할 수 있습니다.: + +```bash +$ vue init nuxt/starter +``` + +> 만약 [vue-cli](https://github.com/vuejs/vue-cli)가 설치되지 않았다면, `npm install -g vue-cli` 명령어로 설치할 수 있습니다. + +디펜던시를 설치하고: + +```bash +$ cd +$ npm install +``` + +프로젝트를 실행합니다.: +```bash +$ npm run dev +``` +애플리케이션이 이제 http://localhost:3000 로 실행되었습니다. + +

Nuxt.js는 `pages` 디렉토리를 감시하면서 새로운 페이지가 추가되어도 애플리케이션을 다시 시작할 필요가 없습니다.

+ +프로젝트의 디렉토리 구조에 대해 자세히 알고싶다면 [디렉토리 구조 문서](/guide/directory-structure)에서 확인할 수 있습니다. + +## 처음부터 시작하기 + +Nuxt.js 애플리케이션을 처음부터 만드는 것 또한 정말 쉽습니다. *1개의 파일과 1개의 디렉토리* 만 있으면 됩니다. 자, 애플리케이션 개발을 시작하기 위해 빈 디렉토리부터 만들어 보겠습니다. + +```bash +$ mkdir +$ cd +``` + +*Info: project-name은 프로젝트 이름으로 바꿔주세요.* + +### package.json + +프로젝트는 `nuxt`를 어떻게 실행할 것인지를 명시한 `package.json` 파일이 필요합니다.: +```json +{ + "name": "my-app", + "scripts": { + "dev": "nuxt" + } +} +``` +`scripts`는 `npm run dev` 명령어를 통해 Nuxt.js를 실행할 것입니다.. + +### `nuxt` 설치하기 + +처음 `package.json`가 만들어지면, `nuxt`를 npm을 사용해 프로젝트에 추가합니다.: +```bash +npm install --save nuxt +``` + +### `pages` 폴더 + +Nuxt.js는 `pages` 디렉토리 내의 모든 `*.vue` 파일을 애플리케이션의 라우트로 변환합니다. + +`pages` 디렉토리를 생성합니다.: +```bash +$ mkdir pages +``` + +이제 `pages/index.vue`에 첫 번째 페이지를 만들겠습니다.: +```html + +``` + +프로젝트를 실행합니다.: +```bash +$ npm run dev +``` +애플리케이션이 이제 http://localhost:3000 로 실행되었습니다. + +

Nuxt.js는 `pages` 디렉토리를 감시하면서 새로운 페이지가 추가되어도 애플리케이션을 다시 시작할 필요가 없습니다.

+ +프로젝트의 디렉토리 구조에 대해 자세히 알고싶다면 [디렉토리 구조 문서](/guide/directory-structure)에서 확인할 수 있습니다. From f83842e7b488ff08f2490d87ef0538a8ff2a6805 Mon Sep 17 00:00:00 2001 From: DiyLecko Date: Thu, 20 Apr 2017 23:37:34 +0900 Subject: [PATCH 009/106] guide/installation.md #2 --- ko/guide/installation.md | 92 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 92 insertions(+) create mode 100644 ko/guide/installation.md diff --git a/ko/guide/installation.md b/ko/guide/installation.md new file mode 100644 index 000000000..f5eb27439 --- /dev/null +++ b/ko/guide/installation.md @@ -0,0 +1,92 @@ +--- +title: 설치 +description: Nuxt.js는 시작하기 정말 쉽습니다. 간단한 프로젝트는 딱 `nuxt` 디펜던시만 있으면 됩니다. +--- + +> Nuxt.js는 시작하기 정말 쉽습니다. 간단한 프로젝트는 딱 `nuxt` 디펜던시만 있으면 됩니다. + +## Nuxt.js starter 템플릿 사용하기 + +빠르게 시작하기 위해서 Nuxt.js 팀은 [starter 템플릿](https://github.com/nuxt/starter)을 만들어뒀습니다. + +starter 템플릿을 [.zip로 다운로드](https://github.com/nuxt/starter/archive/source.zip)하거나 vue-cli로 설치할 수 있습니다.: + +```bash +$ vue init nuxt/starter +``` + +> 만약 [vue-cli](https://github.com/vuejs/vue-cli)가 설치되지 않았다면, `npm install -g vue-cli` 명령어로 설치할 수 있습니다. + +디펜던시를 설치하고: + +```bash +$ cd +$ npm install +``` + +프로젝트를 실행합니다.: +```bash +$ npm run dev +``` +애플리케이션이 이제 http://localhost:3000 로 실행되었습니다. + +

Nuxt.js는 `pages` 디렉토리를 감시하면서 새로운 페이지가 추가되어도 애플리케이션을 다시 시작할 필요가 없습니다.

+ +프로젝트의 디렉토리 구조에 대해 자세히 알고싶다면 [디렉토리 구조 문서](/guide/directory-structure)에서 확인할 수 있습니다. + +## 처음부터 시작하기 + +Nuxt.js 애플리케이션을 처음부터 만드는 것 또한 정말 쉽습니다. *1개의 파일과 1개의 디렉토리* 만 있으면 됩니다. 자, 애플리케이션 개발을 시작하기 위해 빈 디렉토리부터 만들어 보겠습니다. + +```bash +$ mkdir +$ cd +``` + +*Info: project-name은 프로젝트 이름으로 바꿔주세요.* + +### package.json + +프로젝트는 `nuxt`를 어떻게 실행할 것인지를 명시한 `package.json` 파일이 필요합니다.: +```json +{ + "name": "my-app", + "scripts": { + "dev": "nuxt" + } +} +``` +`scripts`는 `npm run dev` 명령어를 통해 Nuxt.js를 실행할 것입니다.. + +### `nuxt` 설치하기 + +처음 `package.json`가 만들어지면, `nuxt`를 npm을 사용해 프로젝트에 추가합니다.: +```bash +npm install --save nuxt +``` + +### `pages` 폴더 + +Nuxt.js는 `pages` 디렉토리 내의 모든 `*.vue` 파일을 애플리케이션의 라우트로 변환합니다. + +`pages` 디렉토리를 생성합니다.: +```bash +$ mkdir pages +``` + +이제 `pages/index.vue`에 첫 번째 페이지를 만들겠습니다.: +```html + +``` + +프로젝트를 실행합니다.: +```bash +$ npm run dev +``` +애플리케이션이 이제 http://localhost:3000 로 실행되었습니다. + +

Nuxt.js는 `pages` 디렉토리를 감시하면서 새로운 페이지가 추가되어도 애플리케이션을 다시 시작할 필요가 없습니다.

+ +프로젝트의 디렉토리 구조에 대해 자세히 알고싶다면 [디렉토리 구조 문서](/guide/directory-structure)에서 확인할 수 있습니다. From 53d5b1553201d708a2e87baeb88732eea2764927 Mon Sep 17 00:00:00 2001 From: jicjjang Date: Fri, 21 Apr 2017 01:18:43 +0900 Subject: [PATCH 010/106] add ko/examples/async-data.md --- ko/examples/async-data.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 ko/examples/async-data.md diff --git a/ko/examples/async-data.md b/ko/examples/async-data.md new file mode 100644 index 000000000..f71492d5f --- /dev/null +++ b/ko/examples/async-data.md @@ -0,0 +1,6 @@ +--- +title: 비동기 데이터 +description: Nuxt.js를 사용한 비동기 데이터 예제 +github: async-data +documentation: /guide/async-data +--- From 34db7c76432ab254f1af9ed166a8f5ca51c2e8cd Mon Sep 17 00:00:00 2001 From: jicjjang Date: Fri, 21 Apr 2017 01:19:00 +0900 Subject: [PATCH 011/106] add ko/examples/auth-routes.md --- ko/examples/auth-routes.md | 216 +++++++++++++++++++++++++++++++++++++ 1 file changed, 216 insertions(+) create mode 100644 ko/examples/auth-routes.md diff --git a/ko/examples/auth-routes.md b/ko/examples/auth-routes.md new file mode 100644 index 000000000..82ba62f32 --- /dev/null +++ b/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 + + + +``` + +`fetch` 메소드에서 사용자가 연결되어있지 않을 때, `redirect('/')`를 호출하는 것을 볼 수 있습니다. From 462c912df4f1d52c6ac2198a9bc41f0a206cfce0 Mon Sep 17 00:00:00 2001 From: jicjjang Date: Fri, 21 Apr 2017 01:19:16 +0900 Subject: [PATCH 012/106] add ko/examples/cached-components.md --- ko/examples/cached-components.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 ko/examples/cached-components.md diff --git a/ko/examples/cached-components.md b/ko/examples/cached-components.md new file mode 100644 index 000000000..9a97979dc --- /dev/null +++ b/ko/examples/cached-components.md @@ -0,0 +1,6 @@ +--- +title: 캐시된 컴포넌트 +description: Nuxt.js를 사용하여 캐시된 컴포넌트 예제 +github: cached-components +documentation: /api/configuration-cache +--- From 6b0929390380a167b6dcca67dc12740871224ad2 Mon Sep 17 00:00:00 2001 From: jicjjang Date: Fri, 21 Apr 2017 01:30:46 +0900 Subject: [PATCH 013/106] modified ko/examples/auth-routes.md --- ko/examples/auth-routes.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/ko/examples/auth-routes.md b/ko/examples/auth-routes.md index 82ba62f32..cae10d612 100644 --- a/ko/examples/auth-routes.md +++ b/ko/examples/auth-routes.md @@ -8,7 +8,7 @@ liveedit: https://gomix.com/#!/project/nuxt-auth-routes # 문서 -> Nuxt.js로 인증된 경로를 쉽게 만들 수 있습니다. +> Nuxt.js로 인증 경로를 쉽게 만들 수 있습니다. ## Using Express and Sessions @@ -19,7 +19,7 @@ Nuxt.js를 사용하면서 어플리케이션에 세션 기능을 추가할 때 yarn add express express-session body-parser whatwg-fetch ``` -*`whatwg-fetch`에 대해서는 추후에 말씀드리겠습니다.* +*`whatwg-fetch`에 대해서는 뒤에 말씀드리겠습니다.* `server.js`를 만듭니다.: ```js @@ -39,7 +39,7 @@ app.use(session({ cookie: { maxAge: 60000 } })) -// POST /api/login 로 로그인하여 req.session.authUser 에 추가. +// 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' } @@ -48,7 +48,7 @@ app.post('/api/login', function (req, res) { res.status(401).json({ error: 'Bad credentials' }) }) -// POST /api/logout 로 로그아웃하여 req.session.authUser 에서 제거. +// POST /api/logout 로 로그아웃하여 req.session.authUser에서 제거. app.post('/api/logout', function (req, res) { delete req.session.authUser res.json({ ok: true }) From c91cce983666d69c425e726bec2874b15a3f6719 Mon Sep 17 00:00:00 2001 From: jicjjang Date: Fri, 21 Apr 2017 02:04:56 +0900 Subject: [PATCH 014/106] add ko/examples/custom-loading.md --- ko/examples/custom-loading.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 ko/examples/custom-loading.md diff --git a/ko/examples/custom-loading.md b/ko/examples/custom-loading.md new file mode 100644 index 000000000..91d6e1e7d --- /dev/null +++ b/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 +--- From 69ae531bba6a8fff8574b4930b5b209f4aed2da5 Mon Sep 17 00:00:00 2001 From: jicjjang Date: Fri, 21 Apr 2017 02:08:18 +0900 Subject: [PATCH 015/106] add ko/examples/custom-routes.md --- ko/examples/custom-routes.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 ko/examples/custom-routes.md diff --git a/ko/examples/custom-routes.md b/ko/examples/custom-routes.md new file mode 100644 index 000000000..cb1697348 --- /dev/null +++ b/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 +--- From 0a9ef595481ce3e9060ec8c8f10a66d86084d5c0 Mon Sep 17 00:00:00 2001 From: INOUE Takuya Date: Tue, 18 Apr 2017 22:38:59 +0900 Subject: [PATCH 016/106] =?UTF-8?q?Reflect=20"update=20middleware=20alias?= =?UTF-8?q?=20=C2=B7=20nuxt/docs@be36811"=20to=20Japanese=20translation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- jp/guide/directory-structure.md | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/jp/guide/directory-structure.md b/jp/guide/directory-structure.md index bf7357410..98448a770 100644 --- a/jp/guide/directory-structure.md +++ b/jp/guide/directory-structure.md @@ -54,7 +54,13 @@ _このディレクトリ名は変更できません。_ ### middleware ディレクトリ -_Coming soon_ + + +`middleware` ディレクトリにはアプリケーションのミドルウェアを入れます。ミドルウェアを使って、ページやページグループ（レイアウト）をレンダリングするよりも前に実行されるカスタム関数を定義できます。 + + + +ミドルウェアについてより深く理解するには [ミドルウェアに関するドキュメント](/guide/routing#ミドルウェア) を参照してください。 @@ -157,6 +163,7 @@ _このファイル名は変更できません。_ + @@ -166,6 +173,7 @@ _このファイル名は変更できません。_ | ~ | / | | ~assets | /assets | | ~components | /components | +| ~middleware | /middleware | | ~pages | /pages | | ~plugins | /plugins | | ~static | /static | From ceed459cd65c2d3024f1746de24d24d2ccced6ca Mon Sep 17 00:00:00 2001 From: INOUE Takuya Date: Tue, 18 Apr 2017 22:46:36 +0900 Subject: [PATCH 017/106] =?UTF-8?q?Reflect=20"add=20layout=20as=20function?= =?UTF-8?q?=20=C2=B7=20nuxt/docs@2bfb234"=20to=20Japanese=20translation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- jp/api/pages-layout.md | 20 +++++++++++++++++--- jp/guide/routing.md | 4 ++-- 2 files changed, 19 insertions(+), 5 deletions(-) diff --git a/jp/api/pages-layout.md b/jp/api/pages-layout.md index 41d8eb90b..2e5697ba7 100644 --- a/jp/api/pages-layout.md +++ b/jp/api/pages-layout.md @@ -14,17 +14,31 @@ description: layouts ディレクトリの（第一階層の）ファイルは > layouts ディレクトリの（第一階層の）ファイルはカスタムレイアウトになります。これらはページコンポーネントの layout プロパティで指定して利用できます。 - + -- **タイプ:** `文字列`（デフォルト: `'default'`） +- **タイプ:** `文字列` または `関数`（デフォルト: `'default'`） どのレイアウトを使うか指定するために、ページコンポーネントで `layout` キーを使ってください: + + + + + + + + + + ```js export default { - layout: 'blog' + layout: 'blog', + // または + layout (context) { + return 'blog' + } } ``` diff --git a/jp/guide/routing.md b/jp/guide/routing.md index a4b94c548..ca5e05040 100644 --- a/jp/guide/routing.md +++ b/jp/guide/routing.md @@ -155,9 +155,9 @@ export default { Nuxt.js では vue-router の子ルートを使ってルートをネストさせることができます。 - + -ネストされたルートを定義するには、子ビューを含む **ディレクトリと同じ名前** の Vue ファイルを作成する必要があります。 +ネストされたルートの親コンポーネントを定義するには、子ビューを含む **ディレクトリと同じ名前** の Vue ファイルを作成する必要があります。 From 1dd9f464fc68fc99179b513dca41f1ddcd785d3e Mon Sep 17 00:00:00 2001 From: INOUE Takuya Date: Tue, 18 Apr 2017 23:48:50 +0900 Subject: [PATCH 018/106] =?UTF-8?q?Reflect=20"Update=20doc=20for=200.10=20?= =?UTF-8?q?=C2=B7=20nuxt/docs@11d0be2"=20to=20Japanese=20translation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- jp/api/configuration-build.md | 41 ++++++++++++++++++++++++++------ jp/api/configuration-cache.md | 4 ++-- jp/api/configuration-css.md | 8 +++---- jp/api/configuration-generate.md | 4 ++-- jp/api/configuration-head.md | 4 ++-- jp/api/configuration-plugins.md | 13 ++++++++-- jp/api/configuration-router.md | 28 ++++++++++++++++++++++ jp/api/menu.json | 3 +++ jp/api/pages-transition.md | 6 +++-- jp/faq/google-analytics.md | 40 ++++++++++++------------------- jp/guide/plugins.md | 24 +++++++++++++------ jp/guide/views.md | 14 ++++++----- 12 files changed, 130 insertions(+), 59 deletions(-) diff --git a/jp/api/configuration-build.md b/jp/api/configuration-build.md index dac8a5871..66b4f26c3 100644 --- a/jp/api/configuration-build.md +++ b/jp/api/configuration-build.md @@ -179,7 +179,6 @@ module.exports = { module.exports = { build: { filenames: { - css: 'app.[hash].css', vendor: 'vendor.[hash].js', app: 'app.[chunkhash].js' } @@ -281,9 +280,9 @@ module.exports = { ## postcss - + -- **タイプ:** `配列` +- タイプ: `配列` @@ -320,17 +319,45 @@ module.exports = { } ``` +## publicPath + + + + +- タイプ: `文字列` +- デフォルト: `'/_nuxt/'` + + + +> 最高のパフォーマンスを発揮させるために dist ディレクトリ内のファイルを CDN へアップロードできます。そのためには単に `publicPath` に利用する CDN をセットするだけです。 + + + +例（`nuxt.config.js`）: + +```js +module.exports = { + build: { + publicPath: 'https://cdn.nuxtjs.org' + } +} +``` + + + +設定すると、`nuxt build` を実行したタイミングで `.nuxt/dist/` ディレクトリの内容が CDN にアップロードされます！ + ## vendor > Nuxt.js では `vendor.bundle.js` ファイル内にモジュールを追加できます。このファイルは app バンドルファイルのサイズを小さくするために生成します。外部モジュール（例えば `axios` など）を使うときにとても便利です。 - - + + -- **タイプ:** `配列` - - **要素:** `文字列` +- タイプ: `配列` + - 要素: `文字列` diff --git a/jp/api/configuration-cache.md b/jp/api/configuration-cache.md index cdcdce5ee..2f0faa888 100644 --- a/jp/api/configuration-cache.md +++ b/jp/api/configuration-cache.md @@ -16,9 +16,9 @@ description: Nuxt.js はレンダリングのパフォーマンス向上を目 ## 使い方 - + -- **タイプ:** `ブーリアン` または `オブジェクト`（デフォルト: `false`） +- タイプ: `ブーリアン` または `オブジェクト`（デフォルト: `false`） diff --git a/jp/api/configuration-css.md b/jp/api/configuration-css.md index b2a979418..f19ebb51f 100644 --- a/jp/api/configuration-css.md +++ b/jp/api/configuration-css.md @@ -14,11 +14,11 @@ description: Nuxt.js ではグローバルに適用したい（すべてのペ > Nuxt.js ではグローバルに適用したい（すべてのページにインクルードしたい）CSS ファイル/モジュール/ライブラリを設定できます。 - - + + -- **タイプ:** `配列` - - **要素:** `文字列` または `オブジェクト` +- タイプ: `配列` + - 要素: `文字列` または `オブジェクト` diff --git a/jp/api/configuration-generate.md b/jp/api/configuration-generate.md index 2f93593d7..59c534a2e 100644 --- a/jp/api/configuration-generate.md +++ b/jp/api/configuration-generate.md @@ -140,10 +140,10 @@ nuxt:generate HTML Files generated in 7.6s +6ms いいですね。しかし、もし **動的なパラメータ** が必要な場合はどうでしょう？ - + 1. `Promise` を返す `関数` を使う -2. コールバックと一緒に `関数` を使う +2. `コールバック` と一緒に `関数` を使う diff --git a/jp/api/configuration-head.md b/jp/api/configuration-head.md index 04cb4adf8..93e7ce5a1 100644 --- a/jp/api/configuration-head.md +++ b/jp/api/configuration-head.md @@ -14,9 +14,9 @@ description: Nuxt.js では nuxt.config.js 内にアプリケーションのデ Nuxt.js では `nuxt.config.js` 内にアプリケーションのデフォルトのメタ情報を定義できます。それには `head` プロパティを使います: - + -- **タイプ:** `オブジェクト` +- タイプ: `オブジェクト` ```js module.exports = { diff --git a/jp/api/configuration-plugins.md b/jp/api/configuration-plugins.md index eb520cc78..25d1c4205 100644 --- a/jp/api/configuration-plugins.md +++ b/jp/api/configuration-plugins.md @@ -11,10 +11,19 @@ description: Nuxt.js の plugins オプションで Vue.js プラグインを使 # plugins プロパティ - + - タイプ: `配列` - - 要素: `文字列` + - 要素: `文字列` または `オブジェクト` + + + + + +オブジェクトの場合にはプロパティは次のとおり: + +- src: `文字列`（ファイルパス） +- ssr: `ブーリアン`（デフォルトは `true`）*false のときは、クライアントサイドでのみファイルがインクルードされます* diff --git a/jp/api/configuration-router.md b/jp/api/configuration-router.md index 8c4dcef83..2590fb5d2 100644 --- a/jp/api/configuration-router.md +++ b/jp/api/configuration-router.md @@ -46,6 +46,34 @@ module.exports = { > このオプションは vue-router の [Router コンストラクタ](https://router.vuejs.org/en/api/options.html) に直接付与されます。 +## mode + + + + +- タイプ: `文字列` +- デフォルト: `'history'` + + + +ルーティングのモードを設定します。サーバーサイドレンダリングのため、この設定を変更することは非推奨です。 + + + +例（`nuxt.config.js`）: + +```js +module.exports = { + router: { + mode: 'hash' + } +} +``` + + + +> このオプションは直接 vue-router の [Router コンストラクタ](https://router.vuejs.org/en/api/options.html) に渡されます。 + ## linkActiveClass diff --git a/jp/api/menu.json b/jp/api/menu.json index f8fd13ca6..9aff69b4d 100644 --- a/jp/api/menu.json +++ b/jp/api/menu.json @@ -41,6 +41,7 @@ { "name": "loaders", "to": "#loaders" }, { "name": "plugins", "to": "#plugins" }, { "name": "postcss", "to": "#postcss" }, + { "name": "publicPath", "to": "#publicpath" }, { "name": "vendor", "to": "#vendor" } ] }, @@ -53,6 +54,7 @@ "to": "/configuration-generate", "contents": [ { "name": "dir", "to": "#dir" }, + { "name": "minify", "to": "#minify" }, { "name": "routes", "to": "#routes" } ] }, @@ -81,6 +83,7 @@ "to": "/configuration-router", "contents": [ { "name": "base", "to": "#base" }, + { "name": "mode", "to": "#mode" }, { "name": "linkActiveClass", "to": "#linkactiveclass" }, { "name": "scrollBehavior", "to": "#scrollbehavior" }, { "name": "middleware", "to": "#middleware" }, diff --git a/jp/api/pages-transition.md b/jp/api/pages-transition.md index 689cdd8cc..cf376f3fc 100644 --- a/jp/api/pages-transition.md +++ b/jp/api/pages-transition.md @@ -99,7 +99,8 @@ export default { - + + @@ -112,7 +113,8 @@ export default { |------|------|---------|-----------| | `name` | 文字列 | `"page"` | すべてのトランジション時に適用されるトランジション名 | | `mode` | 文字列 | `"out-in"` | すべてのトランジション時に適用されるトランジションモード。詳細は [Vue.js のドキュメント](http://vuejs.org/v2/guide/transitions.html#Transition-Modes) 参照 | -| `css` | ブーリアン | `true` | CSS トランジションクラスを適用するか否か。デフォルトは true です。false を設定すると、コンポーネントのイベントで登録された JavaScript フックのみがトリガーになります | +| `css` | ブーリアン | `true` | CSS トランジションクラスを適用するか否か。デフォルトは `true` です。false を設定すると、コンポーネントのイベントで登録された JavaScript フックのみがトリガーになります | +| `duration` | 整数 | `n/a` | トランジションが適用される時間（ミリ秒）です。詳細は [Vue.js のドキュメント](https://vuejs.org/v2/guide/transitions.html#Explicit-Transition-Durations) 参照 | | `type` | 文字列 | `n/a` | トランジション終了のタイミングを判定するために待ち受けるトランジションのイベントタイプを指定します。"transition" または "animation" を指定できます。デフォルトでは、より時間がかかるほうのタイプが自動的に選ばれます | | `enterClass` | 文字列 | `n/a` | トランジション開始時の状態のクラスです。詳細は [Vue.js のドキュメント](https://vuejs.org/v2/guide/transitions.html#Custom-Transition-Classes) 参照 | | `enterToClass` | 文字列 | `n/a` | トランジション終了時の状態のクラスです。詳細は [Vue.js のドキュメント](https://vuejs.org/v2/guide/transitions.html#Custom-Transition-Classes) 参照 | diff --git a/jp/faq/google-analytics.md b/jp/faq/google-analytics.md index 69726f47d..5f5f04b0d 100644 --- a/jp/faq/google-analytics.md +++ b/jp/faq/google-analytics.md @@ -15,10 +15,11 @@ description: Google アナリティクスを使うには？ Nuxt.js アプリケーションで [Google アナリティクス](https://analytics.google.com/analytics/web/) を使うには `plugins/ga.js` というファイルを作成することを推奨します: + - + @@ -30,30 +31,25 @@ Nuxt.js アプリケーションで [Google アナリティクス](https://analy - - + - + - + - - - - - - - + + ```js +import router from '~router' /* ** クライアントサイドかつプロダクションモードでのみ実行 */ -if (process.BROWSER_BUILD && process.env.NODE_ENV === 'production') { +if (process.env.NODE_ENV === 'production') { /* ** Google アナリティクスのスクリプトをインクルード */ @@ -65,21 +61,15 @@ if (process.BROWSER_BUILD && process.env.NODE_ENV === 'production') { ** 現在のページをセット */ ga('create', 'UA-XXXXXXXX-X', 'auto') - ga('send', 'pageview') /* - ** アプリケーションがマウントしたとき + ** ルートが変更されるたびに毎回実行（初期化も実行される） */ - window.onNuxtReady((app) => { + router.afterEach((to, from) => { /* - ** ルートが変更されるたびに + ** Google アナリティクスにページビューが追加されたことを伝える */ - app.$nuxt.$on('routeChanged', (to, from) => { - /* - ** Google アナリティクスにページビューが追加されたことを伝える - */ - ga('set', 'page', to.fullPath) - ga('send', 'pageview') - }) + ga('set', 'page', to.fullPath) + ga('send', 'pageview') }) } ``` @@ -97,7 +87,7 @@ if (process.BROWSER_BUILD && process.env.NODE_ENV === 'production') { ```js module.exports = { plugins: [ - '~plugins/ga.js' + { src: '~plugins/ga.js', ssr: false } ] } ``` diff --git a/jp/guide/plugins.md b/jp/guide/plugins.md index 9310ca9ae..b066752c9 100644 --- a/jp/guide/plugins.md +++ b/jp/guide/plugins.md @@ -121,23 +121,33 @@ module.exports = { ## クライアントサイド限定のプラグイン利用 - + -プラグインのいくつかは **ブラウザでのみ** 動かしたいとします。その場合は `process.BROWSER_BUILD` 変数を使って、あるプラグインをクライアントサイドで動作させることが可能です。 +プラグインのいくつかは **ブラウザでのみ** 動かしたいとします。その場合は `plugins` 内の `ssr: false` オプションを使うと、プラグインをクライアントサイドでのみ実行させるが可能です。 例: +`nuxt.config.js`: + +```js +module.exports = { + plugins: [ + { src: '~plugins/vue-notifications', ssr: false } + ] +} +``` + +`plugins/vue-notifications.js`: + ```js import Vue from 'vue' import VueNotifications from 'vue-notifications' -if (process.BROWSER_BUILD) { - Vue.use(VueNotifications) -} +Vue.use(VueNotifications) ``` - + -逆に、サーバーサイドでのみライブラリを読み込む必要がある場合は、`process.SERVER_BUILD` 変数を使うことができます。これは Webpack が `server.bundle.js` ファイルを作成するタイミングで `true` がセットされる変数です。 +逆に、サーバーサイドでのみライブラリを読み込む必要がある場合は、`process.server` 変数を使うことができます。これは Webpack が `server.bundle.js` ファイルを作成するタイミングで `true` がセットされる変数です。 diff --git a/jp/guide/views.md b/jp/guide/views.md index 17ea17310..5ab621f29 100644 --- a/jp/guide/views.md +++ b/jp/guide/views.md @@ -118,7 +118,8 @@ Nuxt.js ではメインレイアウトを拡張したり、カスタムレイア - + + @@ -134,7 +135,8 @@ Nuxt.js ではメインレイアウトを拡張したり、カスタムレイア ``` @@ -300,8 +302,8 @@ Nuxt.js では下記のオプションで `vue-meta` を設定します: - - + + @@ -309,8 +311,8 @@ Nuxt.js では下記のオプションで `vue-meta` を設定します: ```js { keyName: 'head', // vue-meta がメタ情報を探すためのコンポーネントオプションの名前 - attribute: 'n-head', // vue-meta がタグを監視するためにタグに追加する属性名 - ssrAttribute: 'n-head-ssr', // メタ情報が既にサーバーサイドでレンダリングされていることを vue-meta に知らせるための属性名 + attribute: 'data-n-head', // vue-meta がタグを監視するためにタグに追加する属性名 + ssrAttribute: 'data-n-head-ssr', // メタ情報が既にサーバーサイドでレンダリングされていることを vue-meta に知らせるための属性名 tagIDKeyName: 'hid' // vue-meta がタグを上書きすべきかタグを追加すべきか判断するために用いるプロパティ名 } ``` From 10ffd1fc228a0419f0b98fbd2b23fef30180273d Mon Sep 17 00:00:00 2001 From: rspt Date: Sun, 16 Apr 2017 20:21:31 +0200 Subject: [PATCH 019/106] Update transition example to match Vue one --- en/guide/routing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/guide/routing.md b/en/guide/routing.md index 628af2979..273ed38f9 100644 --- a/en/guide/routing.md +++ b/en/guide/routing.md @@ -224,7 +224,7 @@ Our global css in `assets/main.css`: .page-enter-active, .page-leave-active { transition: opacity .5s; } -.page-enter, .page-leave-active { +.page-enter, .page-leave-to { opacity: 0; } ``` From b5166b444e152c513e9d7c487b47a797ec439bfb Mon Sep 17 00:00:00 2001 From: DiyLecko Date: Thu, 20 Apr 2017 20:57:38 +0900 Subject: [PATCH 020/106] Update README.md --- README.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/README.md b/README.md index adda6e9d6..13a7c5d07 100644 --- a/README.md +++ b/README.md @@ -39,6 +39,14 @@ Japanese translation is maintained by INOUE Takuya. * Primary maintainer - [INOUE Takuya](http://blog.inouetakuya.info/) * Primary translator - [INOUE Takuya](https://github.com/inouetakuya) +### Korean + +Korean translation is maintained by Taewoong La. + +* Translation Repo — [/DiyLecko/ko.docs.nuxtjs](https://github.com/DiyLecko/ko.docs.nuxtjs) +* Primary maintainer - [Taewoong La](http://blog.naver.com/diy_lecko) +* Primary translator - [Taewoong La](https://github.com/DiyLecko) + ### Want to help with the translation? If you feel okay with translating sorta alone, just fork the repo, create a "work-in-progress" pull request (mark it with [WIP], see [Russian translation](https://github.com/nuxt/docs/pull/3) if you need an example) — and just go on. From bb6272e86efe357214180d88bfdbc7cd694cf8c6 Mon Sep 17 00:00:00 2001 From: DiyLecko Date: Thu, 20 Apr 2017 21:15:28 +0900 Subject: [PATCH 021/106] Translate lang.json --- ko/lang.json | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) create mode 100644 ko/lang.json diff --git a/ko/lang.json b/ko/lang.json new file mode 100644 index 000000000..e3f0c4544 --- /dev/null +++ b/ko/lang.json @@ -0,0 +1,50 @@ +{ + "iso": "ko", + "links": { + "api": "API", + "blog": "블로그", + "chat": "채팅", + "documentation": "문서", + "download": "다운로드", + "examples": "예제", + "ecosystem": "생태계", + "faq": "FAQ", + "get_started": "시작하기", + "github": "GitHub", + "guide": "가이드", + "homepage": "홈페이지", + "live_demo": "라이브 데모", + "live_edit": "라이브 수정", + "twitter": "트위터", + "vuejs": "Vue.js", + "vue_jobs": "Vue 구인/구직" + }, + "text": { + "an_error_occured": "에러가 발생했습니다.", + "api_page_not_found": "API 페이지를 찾을 수 없습니다.", + "example_file": "예제 파일", + "please_wait": "잠시만 기다려주세요...", + "please_define_title": "front matter에 title을 정의해주세요.", + "please_define_description": "front matter에 description을 정의해주세요.", + "search": "검색", + "version": "버전" + }, + "homepage": { + "title": "범용 Vue.js 어플리케이션", + "meta": { + "title": "Nuxt.js - 범용 Vue.js 어플리케이션", + "description": "Nuxt.js은 서버 사이드 렌더링, 코드 분리, 핫 리로딩, 정적 생성기 등과 함께 Vue.js 어플리케이션을 만들기 위한 최소한의 프레임워크입니다!" + } + }, + "footer": { + "authors": "Made by Chopin Brothers" + }, + "guide": { + "release_notes": "릴리즈 노트", + "contribute": "잘못된 부분이 있거나 이 문서에 기여하고 싶으신가요?", + "edit_on_github": "GitHub에서 이 페이지를 수정해주세요!" + }, + "examples": { + "source_code": "소스 코드" + } +} From b911ab710366fbcfbb16e2a882f3952948455999 Mon Sep 17 00:00:00 2001 From: DiyLecko Date: Thu, 20 Apr 2017 21:27:46 +0900 Subject: [PATCH 022/106] guide/menu.json --- ko/guide/menu.json | 109 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 109 insertions(+) create mode 100644 ko/guide/menu.json diff --git a/ko/guide/menu.json b/ko/guide/menu.json new file mode 100644 index 000000000..106f92780 --- /dev/null +++ b/ko/guide/menu.json @@ -0,0 +1,109 @@ +[ + { + "title": "Prologue", + "links": [ + { + "to": "", "name": "소개", + "contents": [ + { "to": "#what-is-nuxt-js-", "name": "Nuxt.js란 무엇인가?" }, + { "to": "#how-it-works", "name": "어떻게 동작합니까?" }, + { "to": "#features", "name": "특징" }, + { "to": "#schema", "name": "스키마" }, + { "to": "#server-rendered", "name": "서버에서 렌더링하기" }, + { "to": "#static-generated", "name": "정적 파일로 생성하기" } + ] + }, + { "to": "/contribution-guide", "name": "Contribution 가이드" }, + { "to": "/release-notes", "name": "릴리즈 노트" } + ] + }, + { + "title": "시작하기", + "links": [ + { + "to": "/installation", "name": "설치", + "contents": [ + { "to": "#using-nuxt-js-starter-template", "name": "Nuxt.js starter 템플릿 사용하기" }, + { "to": "#starting-from-scratch", "name": "처음부터 시작하기" } + ] + }, + { + "to": "/directory-structure", "name": "디렉토리 구조", + "contents": [ + { "to": "#directories", "name": "디렉토리" }, + { "to": "#aliases", "name": "Aliases" } + ] + }, + { "to": "/configuration", "name": "환경 설정" }, + { + "to": "/routing", "name": "라우팅", + "contents": [ + { "to": "#basic-routes", "name": "기본 라우트" }, + { "to": "#dynamic-routes", "name": "동적 라우트" }, + { "to": "#nested-routes", "name": "중첩 라우트" }, + { "to": "#dynamic-nested-routes", "name": "동적 중첩 라우트" }, + { "to": "#transitions", "name": "트랜지션" }, + { "to": "#middleware", "name": "미들웨어" } + ] + }, + { + "to": "/views", "name": "뷰", + "contents": [ + { "to": "#document", "name": "도큐먼트" }, + { "to": "#layouts", "name": "레이아웃" }, + { "to": "#pages", "name": "페이지" }, + { "to": "#html-head", "name": "HTML Head" } + ] + }, + { + "to": "/async-data", "name": "비동기 데이터", + "contents": [ + { "to": "#the-data-method", "name": "asyncData 메소드" }, + { "to": "#the-context", "name": "Context" }, + { "to": "#handling-errors", "name": "에러 핸들링" } + ] + }, + { + "to": "/assets", "name": "애셋", + "contents": [ + { "to": "#webpacked", "name": "Webpack 사용" }, + { "to": "#static", "name": "정적 파일 사용" } + ] + }, + { + "to": "/plugins", "name": "플러그인", + "contents": [ + { "to": "#external-packages", "name": "외부 패키지" }, + { "to": "#vue-plugins", "name": "Vue 플러그인" }, + { "to": "#inject-in-root-amp-context", "name": "$root 와 context 합치기" }, + { "to": "#client-side-only", "name": "클라이언트에서만 사용하기" } + ] + }, + { + "to": "/vuex-store", "name": "Vuex Store", + "contents": [ + { "to": "#activate-the-store", "name": "store 활성화" }, + { "to": "#classic-mode", "name": "클래식 모드" }, + { "to": "#modules-mode", "name": "모듈 모드" }, + { "to": "#the-fetch-method", "name": "fetch 메소드" }, + { "to": "#the-nuxtserverinit-action", "name": "nuxtServerInit 액션" } + ] + }, + { + "to": "/commands", "name": "명령어", + "contents": [ + { "to": "#list-of-commands", "name": "명령어 목록" }, + { "to": "#development-environment", "name": "개발 환경" }, + { "to": "#production-deployment", "name": "제품 출시" } + ] + }, + { + "to": "/development-tools", "name": "개발 툴", + "contents": [ + { "to": "#end-to-end-testing", "name": "전체 테스팅" }, + { "to": "#eslint", "name": "ESLint" } + ] + } + ] + } +] From 02d47ff85869ce925356e13629231ab0fec1b578 Mon Sep 17 00:00:00 2001 From: DiyLecko Date: Thu, 20 Apr 2017 22:16:38 +0900 Subject: [PATCH 023/106] Update guide/menu.json --- ko/guide/menu.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ko/guide/menu.json b/ko/guide/menu.json index 106f92780..2c3641553 100644 --- a/ko/guide/menu.json +++ b/ko/guide/menu.json @@ -8,7 +8,7 @@ { "to": "#what-is-nuxt-js-", "name": "Nuxt.js란 무엇인가?" }, { "to": "#how-it-works", "name": "어떻게 동작합니까?" }, { "to": "#features", "name": "특징" }, - { "to": "#schema", "name": "스키마" }, + { "to": "#schema", "name": "구조" }, { "to": "#server-rendered", "name": "서버에서 렌더링하기" }, { "to": "#static-generated", "name": "정적 파일로 생성하기" } ] From 0b5779c026b47bc21273a0f56905c7506f85c2e6 Mon Sep 17 00:00:00 2001 From: DiyLecko Date: Thu, 20 Apr 2017 22:16:54 +0900 Subject: [PATCH 024/106] guide/index.md --- ko/guide/index.md | 100 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 100 insertions(+) create mode 100644 ko/guide/index.md diff --git a/ko/guide/index.md b/ko/guide/index.md new file mode 100644 index 000000000..f8ccc1470 --- /dev/null +++ b/ko/guide/index.md @@ -0,0 +1,100 @@ +--- +title: 소개 +description: "2016년 10월 25일, zeit.co의 개발팀은 서버사이드 렌더링 React 애플리케이션을 위한 프레임워크인 Next.js 프레임워크를 발표했습니다. 발표 몇 시간 뒤, Next.js처럼 서버사이드 렌더링 Vue.js 애플리케이션을 위한 프레임워크를 만들자는 생각이 들었고, 그렇게 Nuxt.js가 탄생했습니다." +--- + +> 2016년 10월 25일, [zeit.co](https://zeit.co/)의 개발팀은 서버사이드 렌더링 React 애플리케이션을 위한 프레임워크인 [Next.js](https://zeit.co/blog/next) 프레임워크를 발표했습니다. 발표 몇 시간 뒤, Next.js처럼 서버사이드 렌더링 [Vue.js](https://vuejs.org) 애플리케이션을 위한 프레임워크를 만들자는 생각이 들었고, 그렇게 **Nuxt.js** 가 탄생했습니다. + +## Nuxt.js란 무엇인가? + +Nuxt.js는 범용 Vue.js 애플리케이션을 만들기 위한 프레임워크로, 주요 범위는 클라이언트/서버 배포를 추상화하면서 **UI 렌더링** 을 하는 것입니다. + +우리의 목표는 Nuxt.js를 기반 프로젝트로 하거나 Node.js 기반의 프로젝트에 추가해서 사용할 수 있도록 충분히 유연한 프레임워크를 만드는 것입니다. + +Nuxt.js는 더 즐거운 **서버 사이드 렌더링** Vue.js 애플리케이션 개발을 위해 필요한 모든 설정들이 미리 준비되어있습니다. + +또한 우리는 *nuxt generate* 라고 부르는 배포 옵션을 제공하며, 이는 Vue.js 애플리케이션을 **정적으로 생성** 하는 옵션입니다. +이 옵션이 마이크로 서비스를 지향하는 웹 애플리케이션 개발의 다음 단계가 될 수 있다고 생각합니다. + +Nuxt.js 프레임워크는 비동기 데이터, 미들웨어, 레이아웃 등과 같이 클라이언트 측과 서버 측 사이에서 개발하는데 도움되는 많은 기능을 제공합니다. + +## 어떻게 동작합니까? + +![Vue with Webpack and Babel](https://i.imgur.com/avEUftE.png) + +Nuxt.js는 훌륭한 웹 애플리케이션을 만들기 위해 아래의 기능들을 포함합니다.: +- [Vue 2](https://github.com/vuejs/vue) +- [Vue-Router](https://github.com/vuejs/vue-router) +- [Vuex](https://github.com/vuejs/vuex) ([store 옵션](/guide/vuex-store)을 사용할 때만 포함됩니다.) +- [Vue-Meta](https://github.com/declandewet/vue-meta) + +총 용량은 **28kb min+gzip** 밖에 되지 않습니다. (vuex를 포함하면 31kb입니다.) + +[vue-loader](https://github.com/vuejs/vue-loader)와 [babel-loader](https://github.com/babel/babel-loader)와 함께 [Webpack](https://github.com/webpack/webpack)을 사용해서 코드를 묶고, 분할하며, 압축합니다. + +## 특징 + +- Vue 파일 작성 +- 코드 분할 자동화 +- 서버 사이드 렌더링 +- 비동기 데이터 기반의 강력한 라우팅 시스템 +- 정적 파일 전송 +- ES6/ES7 지원 +- JS & CSS 코드 번들링 및 압축 +- HTML head 태그 관리 +- 개발 단계에서 핫 리로딩 사용하기 +- 전 처리기 지원: SASS, LESS, Stylus 등 + +## 구조 + +아래의 구조는 ``를 서버가 호출하거나 이를 통해 사용자가 이동한 경우, nuxt.js가 어떻게 동작하는지를 보여줍니다.: + +![nuxt-schema](/nuxt-schema.png) + +## 서버에서 렌더링하기 + +여러분은 nuxt.js로 프로젝트의 모든 UI 렌더링을 처리할 수 있습니다. + +`nuxt`가 실행될 때, nuxt는 핫 리로딩과 애플리케이션이 자동으로 서버 사이드 렌더링되도록 하는 vue-server-renderer가 포함된 개발 서버를 실행합니다. + +이에 대한 자세한 내용을 [명령어](/guide/commands)에서 확인합니다. + +만약 이미 서버가 있다면, nuxt.js를 미들웨어로 사용할 수 있지만 제약이 많을 경우 [Nuxt.js를 프로그램적으로 사용하기](/api/nuxt) 가이드를 참고합니다. + +## 정적 파일로 생성하기 + +nuxt.js에서 가장 큰 혁신은 아마 `nuxt generate` 명령어 가 될 것입니다. + +이는 애플리케이션을 빌드할 때 모든 라우트를 HTML로 생성하는 명령어 입니다. + +예를 들어: + +```bash +-| pages/ +----| about.vue +----| index.vue +``` + +위의 라우트는 아래와 같이 생성될 것입니다: +``` +-| dist/ +----| about/ +------| index.html +----| index.html +``` + +이는 여러분이 어느 정적 파일 호스팅에서든 웹 애플리케이션을 호스팅할 수 있다는 뜻입니다! + +가장 좋은 예는 이 웹사이트로, GitHub 페이지에 호스팅 및 생성되었습니다. +- [소스 코드](https://github.com/nuxt/nuxtjs.org) +- [생성된 코드](https://github.com/nuxt/nuxtjs.org/tree/gh-pages) + +우리는 [docs repository](https://github.com/nuxt/docs)가 업데이트될 때마다 수동으로 애플리케이션을 매번 생성하고 싶지 않았고, 그래서 매번 push를 하면 아래의 AWS Lambda를 호출하도록 했습니다.: +1. [nuxtjs.org repository](https://github.com/nuxt/nuxtjs.org)를 clone 합니다. +2. `npm install`을 통해 디펜던시를 설치합니다. +3. `nuxt generate`를 실행합니다. +4. `dist` 폴더를 `gh-pages` 브랜치에 push 합니다. + +이제 우리는 **서버가 없는 정적 웹 애플리케이션** 을 가지게 되었습니다! + +우리는 재고나 있거나 없는 경우 항상 웹앱을 `nuxt generate`로 재생성하고 CDN에 호스팅하는 방식의 e-commerce 웹 애플리케이션을 생각해볼 수 있습니다. 만약 사용자가 그동안 웹앱을 탐색한다면, e-commerce API를 호출하면 최신 정보가 제공될 것입니다. 서버의 다중 인스턴스와 캐싱을 더 이상 고민할 필요가 없습니다! From 5d9b19fb4a83bea30e1476e6ce74550671683a35 Mon Sep 17 00:00:00 2001 From: DiyLecko Date: Thu, 20 Apr 2017 22:46:46 +0900 Subject: [PATCH 025/106] guide/contribution-guide.md --- ko/guide/contribution-guide.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 ko/guide/contribution-guide.md diff --git a/ko/guide/contribution-guide.md b/ko/guide/contribution-guide.md new file mode 100644 index 000000000..69a63813e --- /dev/null +++ b/ko/guide/contribution-guide.md @@ -0,0 +1,19 @@ +--- +title: Contribution 가이드 +description: Contribution은 모두 환영합니다! +--- + +> Contribution은 모두 환영합니다! + +## 이슈 보고하기 + +프로젝트에 기여하는 가장 좋은 방법은 문제가 생겼을 때 자세한 정보을 보내는 것이며 잘 쓰여진 버그 리포트에 대해 항상 감사하게 생각하고 있습니다. 리포트를 보내기 전에 먼저 문서를 자세히 읽어보시고 이미 존재하는 이슈인지 검색해주세요.: https://github.com/nuxt/nuxt.js/issues + +## 풀 리퀘스트 + +우리는 단순한 문자열 수정이라도 여러분의 풀 리퀘스트를 보는 것을 정말 좋아합니다. 모든 중요한 개선 사항은 누구든 시작하기 전에 [GitHub 이슈](https://github.com/nuxt/nuxt.js/issues)를 등록해야 합니다. + +### 컨벤션 + +- 수정에 대한 브랜치 이름은 `fix-XXX`의 형식이어야 하며, XXX에는 이슈 번호 혹은 무엇을 수정했는지에 대해 적으면 됩니다. +- 새로운 기능에 대한 브랜치 이름은 `feature-XXX`의 형식이어야 하며, XXX에는 이슈 번호를 적습니다. From 07fd6262b3874199b3626e95e8f99b0d64e9b963 Mon Sep 17 00:00:00 2001 From: jicjjang Date: Thu, 20 Apr 2017 23:18:38 +0900 Subject: [PATCH 026/106] add ko/guide/configuration.md --- ko/guide/configuration.md | 84 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 84 insertions(+) create mode 100644 ko/guide/configuration.md diff --git a/ko/guide/configuration.md b/ko/guide/configuration.md new file mode 100644 index 000000000..99e2a9e3f --- /dev/null +++ b/ko/guide/configuration.md @@ -0,0 +1,84 @@ +--- +title: 설정 +description: Nuxt.js 기본 설정은 대부분의 기능을 사용할 수 있도록 되어있지만, nuxt.config.js 파일로 덮어 쓸 수 있습니다. +--- + +> Nuxt.js 기본 설정은 대부분의 기능을 사용할 수 있도록 되어있지만, nuxt.config.js 파일로 덮어 쓸 수 있습니다. + +### build + +이 옵션을 사용하면 생성 된 vendor.bundle.js 파일에 모듈을 추가하여 앱 번들의 크기를 줄일 수 있습니다. 외부 모듈을 사용할 때 정말 유용합니다. + +[build 옵션에 대한 문서](/api/configuration-build) + +### cache + +이 옵션을 사용하면 캐시된 컴포넌트를 사용하여 렌더링 성능을 향상시킬 수 있습니다. + +[cache 옵션에 대한 문서](/api/configuration-cache) + +### css + +이 옵션을 사용하면 모든 페이지에서 전역으로 사용할 CSS파일 / 모듈 / 라이브러리 파일을 설정할 수 있습니다. + +[css 옵션에 대한 문서](/api/configuration-css) + +### dev + +이 옵션을 사용하면 nuxt.js의 개발 및 프로덕션 모드를 정의 할 수 있습니다. + +[dev 옵션에 대한 문서](/api/configuration-dev) + +### env + +이 옵션을 사용하면 클라이언트 및 서버에서 사용 가능한 환경 변수를 정의 할 수 있습니다. + +[env 옵션에 대한 문서](/api/configuration-env) + +### generate + +이 옵션을 사용하면 어플리케이션에서 Nuxt.js가 HTML 파일로 변환할 모든 동적인 경로에 대한 각각의 params 값을 정의 할 수 있습니다 + +[generate 옵션에 대한 문서](/api/configuration-generate) + +### head + +이 옵션을 사용하면 애플리케이션의 모든 기본 메타를 정의 할 수 있습니다. + +[head 옵션에 대한 문서](/api/configuration-head) + +### loading + +이 옵션을 사용하면 Nuxt.js를 사용하여 기본적으로 불러올 컴포넌트를 사용자 정의 할 수 있습니다. + +[loading 옵션에 대한 문서](/api/configuration-loading) + +### plugins + +이 옵션을 사용하면 루트 vue.js 어플리케이션을 인스턴스화 하기 전에 실행할 Javascript 플러그인을 정의 할 수 있습니다. + +[plugins 옵션에 대한 문서](/api/configuration-plugins) + +### rootDir + +이 옵션을 사용하면 nuxt.js 어플리케이션의 위치를 정의 할 수 있습니다. + +[rootDir 옵션에 대한 문서](/api/configuration-rootdir) + +### router + +이 옵션을 사용하면 vue-router의 기본적인 Nuxt.js 구성을 덮어 쓸 수 있습니다. + +[router 옵션에 대한 문서](/api/configuration-router) + +### srcDir + +이 옵션을 사용하면 nuxt.js 어플리케이션의 src 디렉토리를 정의 할 수 있습니다. + +[srcDir 옵션에 대한 문서](/api/configuration-srcdir) + +### transition + +이 옵션을 사용하면 페이지 transition 기능의 기본 속성을 정의 할 수 있습니다. + +[transition 옵션에 대한 문서](/api/configuration-transition) From 40b3a47e1ec0ea7faecce384e1f53c0b6a8ec9eb Mon Sep 17 00:00:00 2001 From: jicjjang Date: Fri, 21 Apr 2017 01:18:43 +0900 Subject: [PATCH 027/106] add ko/examples/async-data.md --- ko/examples/async-data.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 ko/examples/async-data.md diff --git a/ko/examples/async-data.md b/ko/examples/async-data.md new file mode 100644 index 000000000..f71492d5f --- /dev/null +++ b/ko/examples/async-data.md @@ -0,0 +1,6 @@ +--- +title: 비동기 데이터 +description: Nuxt.js를 사용한 비동기 데이터 예제 +github: async-data +documentation: /guide/async-data +--- From 2f4fc152dc94e189c2dc3b8a772ad08be691c4db Mon Sep 17 00:00:00 2001 From: jicjjang Date: Fri, 21 Apr 2017 01:19:00 +0900 Subject: [PATCH 028/106] add ko/examples/auth-routes.md --- ko/examples/auth-routes.md | 216 +++++++++++++++++++++++++++++++++++++ 1 file changed, 216 insertions(+) create mode 100644 ko/examples/auth-routes.md diff --git a/ko/examples/auth-routes.md b/ko/examples/auth-routes.md new file mode 100644 index 000000000..82ba62f32 --- /dev/null +++ b/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 + + + +``` + +`fetch` 메소드에서 사용자가 연결되어있지 않을 때, `redirect('/')`를 호출하는 것을 볼 수 있습니다. From e644036d9cd261683feafcf0d918e2317c69bacb Mon Sep 17 00:00:00 2001 From: jicjjang Date: Fri, 21 Apr 2017 01:19:16 +0900 Subject: [PATCH 029/106] add ko/examples/cached-components.md --- ko/examples/cached-components.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 ko/examples/cached-components.md diff --git a/ko/examples/cached-components.md b/ko/examples/cached-components.md new file mode 100644 index 000000000..9a97979dc --- /dev/null +++ b/ko/examples/cached-components.md @@ -0,0 +1,6 @@ +--- +title: 캐시된 컴포넌트 +description: Nuxt.js를 사용하여 캐시된 컴포넌트 예제 +github: cached-components +documentation: /api/configuration-cache +--- From 95fd61e79e8fc8a46e1850ac8493ea19aa71751a Mon Sep 17 00:00:00 2001 From: jicjjang Date: Fri, 21 Apr 2017 01:30:46 +0900 Subject: [PATCH 030/106] modified ko/examples/auth-routes.md --- ko/examples/auth-routes.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/ko/examples/auth-routes.md b/ko/examples/auth-routes.md index 82ba62f32..cae10d612 100644 --- a/ko/examples/auth-routes.md +++ b/ko/examples/auth-routes.md @@ -8,7 +8,7 @@ liveedit: https://gomix.com/#!/project/nuxt-auth-routes # 문서 -> Nuxt.js로 인증된 경로를 쉽게 만들 수 있습니다. +> Nuxt.js로 인증 경로를 쉽게 만들 수 있습니다. ## Using Express and Sessions @@ -19,7 +19,7 @@ Nuxt.js를 사용하면서 어플리케이션에 세션 기능을 추가할 때 yarn add express express-session body-parser whatwg-fetch ``` -*`whatwg-fetch`에 대해서는 추후에 말씀드리겠습니다.* +*`whatwg-fetch`에 대해서는 뒤에 말씀드리겠습니다.* `server.js`를 만듭니다.: ```js @@ -39,7 +39,7 @@ app.use(session({ cookie: { maxAge: 60000 } })) -// POST /api/login 로 로그인하여 req.session.authUser 에 추가. +// 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' } @@ -48,7 +48,7 @@ app.post('/api/login', function (req, res) { res.status(401).json({ error: 'Bad credentials' }) }) -// POST /api/logout 로 로그아웃하여 req.session.authUser 에서 제거. +// POST /api/logout 로 로그아웃하여 req.session.authUser에서 제거. app.post('/api/logout', function (req, res) { delete req.session.authUser res.json({ ok: true }) From 544d6c830be9ca4c413bc4a3ddeb6c9330851f1a Mon Sep 17 00:00:00 2001 From: jicjjang Date: Fri, 21 Apr 2017 02:04:56 +0900 Subject: [PATCH 031/106] add ko/examples/custom-loading.md --- ko/examples/custom-loading.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 ko/examples/custom-loading.md diff --git a/ko/examples/custom-loading.md b/ko/examples/custom-loading.md new file mode 100644 index 000000000..91d6e1e7d --- /dev/null +++ b/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 +--- From 903d179e0afee9d0220b4ba8414a83acdc4117db Mon Sep 17 00:00:00 2001 From: jicjjang Date: Fri, 21 Apr 2017 02:08:18 +0900 Subject: [PATCH 032/106] add ko/examples/custom-routes.md --- ko/examples/custom-routes.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 ko/examples/custom-routes.md diff --git a/ko/examples/custom-routes.md b/ko/examples/custom-routes.md new file mode 100644 index 000000000..cb1697348 --- /dev/null +++ b/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 +--- From 857a9271b7051e3eb7c50d8e68b83ee747dde567 Mon Sep 17 00:00:00 2001 From: jicjjang Date: Fri, 21 Apr 2017 02:15:17 +0900 Subject: [PATCH 033/106] add ko/examples/global-css.md --- ko/examples/global-css.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 ko/examples/global-css.md diff --git a/ko/examples/global-css.md b/ko/examples/global-css.md new file mode 100644 index 000000000..014d7f6a4 --- /dev/null +++ b/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 +--- From b4c5806ef76a3eeb914fa87feb5f7d4ab5119229 Mon Sep 17 00:00:00 2001 From: jicjjang Date: Fri, 21 Apr 2017 02:39:49 +0900 Subject: [PATCH 034/106] add ko/examples/hello-world.md --- ko/examples/hello-world.md | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 ko/examples/hello-world.md diff --git a/ko/examples/hello-world.md b/ko/examples/hello-world.md new file mode 100644 index 000000000..26e376722 --- /dev/null +++ b/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 +--- From eb2c8f58b0aee259e1f4a5500a8d6ea74d1da974 Mon Sep 17 00:00:00 2001 From: jicjjang Date: Fri, 21 Apr 2017 02:39:57 +0900 Subject: [PATCH 035/106] add ko/examples/i18n.md --- ko/examples/i18n.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 ko/examples/i18n.md diff --git a/ko/examples/i18n.md b/ko/examples/i18n.md new file mode 100644 index 000000000..17cc5b675 --- /dev/null +++ b/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 +--- From 28089b384527efeb976c1a4206f10c2fed156e1d Mon Sep 17 00:00:00 2001 From: jicjjang Date: Fri, 21 Apr 2017 02:40:04 +0900 Subject: [PATCH 036/106] add ko/examples/layouts.md --- ko/examples/layouts.md | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 ko/examples/layouts.md diff --git a/ko/examples/layouts.md b/ko/examples/layouts.md new file mode 100644 index 000000000..d5b01c7fd --- /dev/null +++ b/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 +--- From 7276e86bd24320a4f0610dc780e58605ccd25c68 Mon Sep 17 00:00:00 2001 From: jicjjang Date: Fri, 21 Apr 2017 02:40:14 +0900 Subject: [PATCH 037/106] add ko/examples/menu.json --- ko/examples/menu.json | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 ko/examples/menu.json diff --git a/ko/examples/menu.json b/ko/examples/menu.json new file mode 100644 index 000000000..4fa3bf76c --- /dev/null +++ b/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" } + ] + } +] From 18d2af43c23859ea1bad3f71d17f070ad01ece55 Mon Sep 17 00:00:00 2001 From: jicjjang Date: Fri, 21 Apr 2017 02:40:23 +0900 Subject: [PATCH 038/106] add ko/examples/middleware.md --- ko/examples/middleware.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 ko/examples/middleware.md diff --git a/ko/examples/middleware.md b/ko/examples/middleware.md new file mode 100644 index 000000000..5927e00a7 --- /dev/null +++ b/ko/examples/middleware.md @@ -0,0 +1,7 @@ +--- +title: 미들웨어 +description: Nuxt.js를 사용한 미들웨어 예제 +github: middleware +livedemo: https://middleware.nuxtjs.org +documentation: /guide/routing#middleware +--- From 405c22d122d75bdc6832268afcf350e35d415738 Mon Sep 17 00:00:00 2001 From: jicjjang Date: Fri, 21 Apr 2017 02:40:34 +0900 Subject: [PATCH 039/106] add ko/examples/nested-routes.md --- ko/examples/nested-routes.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 ko/examples/nested-routes.md diff --git a/ko/examples/nested-routes.md b/ko/examples/nested-routes.md new file mode 100644 index 000000000..6e56c5250 --- /dev/null +++ b/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 +--- From 40cc602aa053e300e5c5c1470467c38956e81830 Mon Sep 17 00:00:00 2001 From: jicjjang Date: Fri, 21 Apr 2017 02:40:43 +0900 Subject: [PATCH 040/106] add ko/examples/plugins.md --- ko/examples/plugins.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 ko/examples/plugins.md diff --git a/ko/examples/plugins.md b/ko/examples/plugins.md new file mode 100644 index 000000000..5f5c783b7 --- /dev/null +++ b/ko/examples/plugins.md @@ -0,0 +1,7 @@ +--- +title: 플러그인 +description: Nuxt.js와 함께 외부 모듈과 플러그인 사용하기 예제 +github: plugins-vendor +livedemo: https://plugins-vendor.nuxtjs.org +documentation: /guide/plugins +--- From c17fd8f6f16f8aaef16ca680ca9a9753a79d3d47 Mon Sep 17 00:00:00 2001 From: jicjjang Date: Fri, 21 Apr 2017 02:40:55 +0900 Subject: [PATCH 041/106] add ko/examples/routes-transitions.md --- ko/examples/routes-transitions.md | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 ko/examples/routes-transitions.md diff --git a/ko/examples/routes-transitions.md b/ko/examples/routes-transitions.md new file mode 100644 index 000000000..a8cd4f6a5 --- /dev/null +++ b/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 +--- From 6ab0a21a3065c902afdd16dfb9c51a528b2a889e Mon Sep 17 00:00:00 2001 From: jicjjang Date: Fri, 21 Apr 2017 02:41:02 +0900 Subject: [PATCH 042/106] add ko/examples/seo-html-head.md --- ko/examples/seo-html-head.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 ko/examples/seo-html-head.md diff --git a/ko/examples/seo-html-head.md b/ko/examples/seo-html-head.md new file mode 100644 index 000000000..31d09d456 --- /dev/null +++ b/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 +--- From aebc1227e17476011d94ff7ff45a0be623bd1ec8 Mon Sep 17 00:00:00 2001 From: jicjjang Date: Fri, 21 Apr 2017 02:41:12 +0900 Subject: [PATCH 043/106] add ko/examples/testing.md --- ko/examples/testing.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 ko/examples/testing.md diff --git a/ko/examples/testing.md b/ko/examples/testing.md new file mode 100644 index 000000000..9876e431f --- /dev/null +++ b/ko/examples/testing.md @@ -0,0 +1,6 @@ +--- +title: 테스팅 +description: Nuxt.js를 사용한 테스팅 예제 +github: with-ava +documentation: /guide/development-tools#end-to-end-testing +--- From 8c31c2feeb0eb65c4e5e2fbca1b4329359536f87 Mon Sep 17 00:00:00 2001 From: jicjjang Date: Fri, 21 Apr 2017 02:41:21 +0900 Subject: [PATCH 044/106] add ko/examples/vuex-store.md --- ko/examples/vuex-store.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 ko/examples/vuex-store.md diff --git a/ko/examples/vuex-store.md b/ko/examples/vuex-store.md new file mode 100644 index 000000000..fd0e808e6 --- /dev/null +++ b/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 +--- From 366e2bb9e1811ba9a27a8827a52f7c0054c84b5d Mon Sep 17 00:00:00 2001 From: DiyLecko Date: Fri, 21 Apr 2017 14:05:03 +0900 Subject: [PATCH 045/106] add guide/directory-structure.md --- ko/guide/directory-structure.md | 97 +++++++++++++++++++++++++++++++++ 1 file changed, 97 insertions(+) create mode 100644 ko/guide/directory-structure.md diff --git a/ko/guide/directory-structure.md b/ko/guide/directory-structure.md new file mode 100644 index 000000000..386ce0799 --- /dev/null +++ b/ko/guide/directory-structure.md @@ -0,0 +1,97 @@ +--- +title: 디렉토리 구조 +description: Nuxt.js 어플리케이션의 기본 구조는 작고 큰 어플리케이션 모두를 위해 고안되었습니다. +--- + +> Nuxt.js 어플리케이션의 기본 구조는 작고 큰 어플리케이션 모두를 위해 고안되었습니다. 그렇지만 당연히 자유롭게 구성할 수도 있습니다. + +## 디렉토리 + +### Assets 디렉토리 + +`assets` 디렉토리는 LESS, SASS, Javascript 같은 컴파일되지 않은 에셋들을 포함하는 디렉토리 입니다. + +[Assets의 동작에 대한 문서](/guide/assets) + +### Components 디렉토리 + +`components` 디렉토리는 Vue.js 컴포넌트를 포함하는 디렉토리 입니다. Nuxt.js는 이러한 컴포넌트에 데이터 메소드를 크게 신경쓰지 않습니다. + +### Layouts 디렉토리 + +`layouts` 디렉토리는 애플리케이션의 레이아웃을 포함하는 디렉토리 입니다. + +_이 디렉토리 이름은 변경할 수 없습니다._ + +[Layouts의 동작에 대한 문서](/guide/views#layouts) + +### Middleware 디렉토리 + +`middleware` 디렉토리는 애플리케이션의 미들웨어를 포함하는 디렉토리 입니다. 미들웨어는 페이지나 레이아웃이 렌더링되기 전에 실행할 사용자 정의 함수를 정의할 수 있습니다. + +[Middleware의 동작에 대한 문서](/guide/routing#middleware) + +### Pages 디렉토리 + +`pages` 디렉토리는 애플리케이션의 뷰와 라우트를 포함하는 디렉토리 입니다. Nuxt.js는 모든 `.vue` 파일을 읽고 애플리케이션의 라우터를 생성합니다. + +_이 디렉토리 이름은 변경할 수 없습니다._ + +[Pages의 동작에 대한 문서 ](/guide/views) + +### Plugins 디렉토리 + +`plugins` 디렉토리는 루트 vue.js 애플리케이션이 생성되기 전 실행하고 싶은 자바스크립트 플러그인을 포함하는 디렉토리 입니다. + +[Plugins의 동작에 대한 문서](/guide/plugins) + +### The Static Directory + +`static` 디렉토리는 정적 파일들을 포함하는 디렉토리 입니다. 이 디렉토리의 파일들은 /에 연결됩니다. + +**예를 들어,:** /static/robots.txt 은 /robots.txt 로 연결됩니다. + +_이 디렉토리 이름은 변경할 수 없습니다._ + +[Static의 동작에 대한 문서](/guide/assets#static) + +### Store 디렉토리 + +`store` 디렉토리는 [Vuex Store](http://vuex.vuejs.org) 파일을 포함하는 디렉토리 입니다. Vuex Store 옵션은 Nuxt.js 프레임워크에 의해 실행되며, `index.js` 파일을 생성하면 프레임워크가 자동으로 옵션을 활성화합니다. + +_이 디렉토리 이름은 변경할 수 없습니다._ + +[Store의 동작에 대한 문서](/guide/vuex-store) + +### nuxt.config.js 파일 + +`nuxt.config.js` 파일은 Nuxt.js의 사용자 정의 설정을 포함하는 파일 입니다. + +_이 디렉토리 이름은 변경할 수 없습니다._ + +[nuxt.config.js의 동작에 대한 문서](/guide/configuration) + +### package.json 파일 + +`package.json` 애플리케이션의 의존성과 스크립트를 포함하는 파일 입니다. + +_이 디렉토리 이름은 변경할 수 없습니다._ + +## Aliases + +| Alias | 디렉토리 | +|-----|------| +| ~ | / | +| ~assets | /assets | +| ~components | /components | +| ~middleware | /middleware | +| ~pages | /pages | +| ~plugins | /plugins | +| ~static | /static | + +파일에 링크되는 Aliases: + +| Alias | Usage | Description | +|-------|------|--------------| +| ~store | `const store = require('~store')` | `vuex` store 인스턴스를 불러옵니다. | +| ~router | `const router = require('~router')`| `vue-router` 인스턴스를 불러옵니다. | From 79641384091e27ae4279990de4b7b58b7326655d Mon Sep 17 00:00:00 2001 From: Wany Bae Date: Fri, 21 Apr 2017 14:23:33 +0900 Subject: [PATCH 046/106] =?UTF-8?q?=ED=95=9C=EA=B8=80=ED=99=94=20=EC=99=84?= =?UTF-8?q?=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- kr/guide/development-tools.md | 275 ++++++++++++++++++++++++++++++++++ kr/lang.json | 0 2 files changed, 275 insertions(+) create mode 100644 kr/guide/development-tools.md create mode 100644 kr/lang.json diff --git a/kr/guide/development-tools.md b/kr/guide/development-tools.md new file mode 100644 index 000000000..b0f738eeb --- /dev/null +++ b/kr/guide/development-tools.md @@ -0,0 +1,275 @@ +--- +title: 개발 툴 +description: Nuxt.js는 개발을 보다 재미있게 할 수 있도록 도와줍니다. +--- + + + + + + +> 어플리케이션을 테스트하는 것은 웹개발의 일부분입니다. Nuxt.js는 가능한한 간단하게 테스트가 가능하도록 도와줍니다. + + + +## 엔드 투 엔드 테스트 + + + +[Ava](https://github.com/avajs/ava)는 [jsdom](https://github.com/tmpvar/jsdom)과 같이 사용할 수 있는 JavaScript의 강력한 테스트 프레임워크입니다. 엔드 투 엔드 테스트를 쉽게 하기 위해서 이 두가지를 사용합니다. + + + +우선은, ava와 jsdom을 개발디펜던시에 추가해야 합니다. + +```bash +npm install --save-dev ava jsdom +``` + + + +그리고 `package.json` 에 test 스크립트를 추가하고 테스트를 import할 화일을 컴파일 하기 위해 ava를 설정합니다. + +```javascript +"scripts": { + "test": "ava", +}, +"ava": { + "require": [ + "babel-register" + ] +}, +"babel": { + "presets": [ + "es2015" + ] +} +``` + + + +`test` 폴더 안에 테스트를 작성해 나가는 걸로 하겠습니다: + +```bash +mkdir test +``` + + + +`pages/index.vue` 에 페이지가 있습니다. + +```html + + + + + +``` + + + +`npm run dev` 로 어플리케이션을 기동하고 [http://localhost:3000](http://localhost:3000) 으로 접근하면 `Hello world!` 타이틀이 표시가 됩니다. + + + +`test/index.test.js` 테스트 화일을 추가합니다: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +```js +import test from 'ava' +import Nuxt from 'nuxt' +import { resolve } from 'path' + +// nuxt 와 server 인스턴스를 여기에 확보해둡니다 +// 그러면 테스트가 종료하였을 때 이것들을 close할 수 있습니다. +let nuxt = null +let server = null + +// Nuxt.js 를 초기화하고 localhost:4000 에서 리스닝하는 서버를 작성합니다. +test.before('Init Nuxt.js', async t => { + const rootDir = resolve(__dirname, '..') + let config = {} + try { config = require(resolve(rootDir, 'nuxt.config.js')) } catch (e) {} + config.rootDir = rootDir // project folder + config.dev = false // production build + nuxt = new Nuxt(config) + await nuxt.build() + server = new nuxt.Server(nuxt) + server.listen(4000, 'localhost') +}) + +// 생성된 HTML 만을 테스트하는 예제 +test('Route / exits and render HTML', async t => { + let context = {} + const { html } = await nuxt.renderRoute('/', context) + t.true(html.includes('

Hello world!

')) +}) + +// DOM 을 경유하여 체크하는 테스트 예제 +test('Route / exits and render HTML with CSS applied', async t => { + const window = await nuxt.renderAndGetWindow('http://localhost:4000/') + const element = window.document.querySelector('.red') + t.not(element, null) + t.is(element.textContent, 'Hello world!') + t.is(element.className, 'red') + t.is(window.getComputedStyle(element).color, 'red') +}) + +// 서버를 닫고 nuxt 에 화일갱신 리스닝을 중지시킨다 +test.after('Closing server and nuxt.js', t => { + server.close() + nuxt.close() +}) +``` + + + +이제 테스트를 실행할 수 있게 되었습니다: + +```bash +npm test +``` + + + +jsdom 은 브라우저를 사용하지 않기 때문에 제약점이 몇가지 있지만, 대부분의 테스트는 커버할 수 있습니다. 혹시 어플리케이션을 테스트하기 위해서 브라우저를 사용하고 싶을 경우에는 [Nightwatch.js](http://nightwatchjs.org) 를 체크해 보시면 될 것 같습니다. + +## ESLint + + + +> ESLint 는 깔끔한 코드를 유지할 수 있도록 해주는 멋지 툴입니다. + + + +매우 간단하게 [ESLint](http://eslint.org) 를 Nuxt.js 와 같이 사용할 수 있습니다. 우선 npm 디펜던시를 추가해야 합니다.: + +```bash +npm install --save-dev babel-eslint eslint eslint-config-standard eslint-plugin-html eslint-plugin-promise eslint-plugin-standard +``` + + + +그리고 `.eslintrc.js` 화일을 프로젝트의 루트 디렉토리에 두고 ESLint 를 설정합니다: + + + + + + + + + + + + + + + + + + + + +```js +module.exports = { + root: true, + parser: 'babel-eslint', + env: { + browser: true, + node: true + }, + extends: 'standard', + // *.vue 화일을 lint 하기위해서 필요함 + plugins: [ + 'html' + ], + // 여기에 커스텀룰을 추가합니다. + rules: {}, + globals: {} +} +``` + + + +그리고나서 `lint` 스크립트를 `package.json` 안에 추가합니다: + +```js +"scripts": { + "lint": "eslint --ext .js,.vue --ignore-path .gitignore ." +} +``` + + + +이제 lint 를 실행할 수 있습니다: + +```bash +npm run lint +``` + + + +ESLint 는 `.gitignore` 에 정의되어 있는 화일을 무시하고, 그 외의 모든 JavaScript 와 Vue 화일을 lint 합니다。 + + + +

`"precommit": "npm run lint"` 를 package.json 에 추가하여 코드를 커밋하기 전에 자동적으로 lint 가 돌도록 하는 것은 아주 좋은 예일것 같습니다.

diff --git a/kr/lang.json b/kr/lang.json new file mode 100644 index 000000000..e69de29bb From 48d09afdeb552a5dfdc836a0d301f190a150b234 Mon Sep 17 00:00:00 2001 From: Wany Bae Date: Fri, 21 Apr 2017 14:25:42 +0900 Subject: [PATCH 047/106] Delete lang.json --- kr/lang.json | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 kr/lang.json diff --git a/kr/lang.json b/kr/lang.json deleted file mode 100644 index e69de29bb..000000000 From 1423313fd5910fcf1d20ab17ea21b964b93766ed Mon Sep 17 00:00:00 2001 From: Wany Bae Date: Fri, 21 Apr 2017 16:15:44 +0900 Subject: [PATCH 048/106] =?UTF-8?q?menu.json=20=ED=95=9C=EA=B8=80=ED=99=94?= =?UTF-8?q?=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ko/faq/menu.json | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 ko/faq/menu.json diff --git a/ko/faq/menu.json b/ko/faq/menu.json new file mode 100644 index 000000000..c5a8d0594 --- /dev/null +++ b/ko/faq/menu.json @@ -0,0 +1,33 @@ +[ + { + "title": "설정", + "links": [ + { "name": "외부 리소스를 사용하려면?", "to": "" }, + { "name": "프리프로세서를 사용하려면?", "to": "/pre-processors" }, + { "name": "JSX 를 사용하려면?", "to": "/jsx" }, + { "name": "PostCSS 플러그인을 추가하려면?", "to": "/postcss-plugins" }, + { "name": "Webpack 설정을 확장하려면?", "to": "/extend-webpack" }, + { "name": "Webpack 플러그인을 추가하려면?", "to": "/webpack-plugins" }, + { "name": "host 와 port 번호를 변경하려면?", "to": "/host-port" }, + { "name": "Google 애널리틱스를 사용하려면?", "to": "/google-analytics" } + ] + }, + { + "title": "개발", + "links": [ + { "name": "window 또는 document 가 undefined 의 경우에는?", "to": "/window-document-undefined" }, + { "name": "왜 CSS Flash 가 보이는지?", "to": "/css-flash" }, + { "name": "컴포넌트 안에 비동기 데이터를 다루려면?", "to": "/async-data-components" }, + { "name": "메타태그가 중복된 경우에는?", "to": "/duplicated-meta-tags" } + ] + }, + { + "title": "배포", + "links": [ + { "name": "Heroku 에 배포하려면?", "to": "/heroku-deployment" }, + { "name": "Now 를 사용하여 배포하려면?", "to": "/now-deployment" }, + { "name": "Surge.sh 에 배포하려면?", "to": "/surge-deployment" }, + { "name": "GitHub Pages 에 배포하려면?", "to": "/github-pages" } + ] + } +] From 72d02ce5d7d68309b446c6099df1d74d45a098ac Mon Sep 17 00:00:00 2001 From: Wany Bae Date: Fri, 21 Apr 2017 16:21:46 +0900 Subject: [PATCH 049/106] =?UTF-8?q?external-resources.md=20=ED=95=9C?= =?UTF-8?q?=EA=B8=80=ED=99=94=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ko/faq/external-resources.md | 59 ++++++++++++++++++++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 ko/faq/external-resources.md diff --git a/ko/faq/external-resources.md b/ko/faq/external-resources.md new file mode 100644 index 000000000..a499debae --- /dev/null +++ b/ko/faq/external-resources.md @@ -0,0 +1,59 @@ +--- +title: 외부 리소스 +description: Nuxt.js 에서 외부 리소스를 사용하려면? +--- + + + + + + +# 외부 리소스를 사용하려면? + + + +## 글로벌 설정 + + + +`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' } + ] + } +} +``` + + + +## 로컬 설정 + + + +pages 디렉토리의 .vue 화일 안에서 리소스를 include합니다: + +```html + + + +``` From 01400f3a3977181e25f703577eef80e90100edf5 Mon Sep 17 00:00:00 2001 From: Wany Bae Date: Fri, 21 Apr 2017 17:23:59 +0900 Subject: [PATCH 050/106] =?UTF-8?q?pre-processors.md=20=ED=95=9C=EA=B8=80?= =?UTF-8?q?=ED=99=94=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ko/faq/pre-processors.md | 43 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 ko/faq/pre-processors.md diff --git a/ko/faq/pre-processors.md b/ko/faq/pre-processors.md new file mode 100644 index 000000000..5c382620e --- /dev/null +++ b/ko/faq/pre-processors.md @@ -0,0 +1,43 @@ +--- +title: 프리프로세서 +description: Nuxt.js 에서 프리프로세서를 사용하려면? +--- + + + + + + +# 프리프로세서를 사용하려면? + + + +[vue-loader](http://vue-loader.vuejs.org/en/configurations/pre-processors.html) 덕뿐에 그냥 `lang` 속성을 사용하는 것만으로 `