Get Started. It's Free
or sign up with your email address
Vue? by Mind Map: Vue?

1. vue cli 3

1.1. Overview | Vue CLI 3

1.1.1. 웹 UI 관리자 페이지로 프로젝트 생성 지원

1.1.2. npm install -g @vue/cli

1.1.2.1. Error: Cannot find module 'core-js/modules/es7.object.entries'

1.1.2.1.1. npm install -g core-js

1.1.2.2. Node >=8.9

1.1.2.2.1. nvm 으로 최신버전 10.9.0 설치

1.2. Creating a Project | Vue CLI 3

1.2.1. vue ui

1.2.1.1. http://localhost:8000/project/select

1.2.1.1.1. new project

1.2.1.1.2. support project tasks by ui

1.3. Production Deployment

1.3.1. process.env.NODE_ENV

1.3.1.1. 디폴트 개발모드

1.3.2. Vue CLI Webpack 설정

1.3.2.1. vue.config.js

1.3.3. Vue CLI 환경변수 설정

1.3.3.1. example

1.3.4. Dockerize Vue.js App — Vue.js

2. Nuxt.js

2.1. 소개 - Nuxt.js

2.1.1. 10 reasons to use Nuxt.js for your next web application

2.1.2. What is the difference between Vue.js and Nuxt.js? · Vue.js

2.1.2.1. 모범 사례를 구성하여 SSR를 보다 쉽게 수행

2.1.3. Nuxt.js and vue-cli, great difference?

2.1.4. Getting Started with Server-Side Rendering Using Nuxt.js

2.1.5. Vue.js App Framework

2.1.5.1. Vue 2

2.1.5.2. Vue Router

2.1.5.3. Vuex

2.1.5.3.1. store 옵션 사용시 포함

2.1.5.4. Vue Server Renderer

2.1.5.4.1. mode: 'spa' 사용시 제외

2.1.5.5. vue-meta

2.1.5.6. 코드분할/압축

2.1.5.6.1. vue-loader

2.1.5.6.2. babel-loader

2.1.5.6.3. Webpack

2.1.6. 용량

2.1.6.1. 57kB min+gzip

2.1.6.2. 53kb Vuex 포함시

2.2. npm install -g @vue/cli-init

2.3. vue init nuxt-community/starter-template <project-name>

2.3.1. tyscript?

2.3.1.1. nuxt-community/typescript-template

2.3.1.2. vue init nuxt-community/typescript-template <my-project>

2.4. npm install

2.5. npm run dev

2.6. http://localhost:3000

2.7. 디렉토리 구조

2.7.1. [ .nuxt ]

2.7.1.1. [ components ]

2.7.1.1.1. nuxt.js

2.7.1.2. [ views ]

2.7.1.2.1. app.template.html

2.7.1.2.2. error.html

2.7.1.3. index.js

2.7.1.4. App.js

2.7.2. [ Assets ]

2.7.2.1. LESS, SASS, JS

2.7.3. [ Components ]

2.7.4. [ Layouts ]

2.7.4.1. default.vue

2.7.4.1.1. {{ APP }} 커스터마이징

2.7.4.1.2. <nuxt />

2.7.4.2. error.vue

2.7.4.2.1. 에러페이지 커스터마이징

2.7.4.2.2. 400 or 500 에러 발생시 컴포넌트처럼 작동하는 레이아웃

2.7.4.2.3. sample

2.7.5. [ Middleware ]

2.7.6. [ Pages ]

2.7.6.1. 뷰와 라우트 포함

2.7.6.2. index.vue

2.7.6.2.1. APP 내 뷰 컴포넌트들

2.7.7. [ Plugins ]

2.7.7.1. 루트 vue.js 생성 전 실행할 js

2.7.8. [ Static ]

2.7.9. [ Store ]

2.7.10. nuxt.config.js

2.7.10.1. header, html attr 설정

2.7.11. package.json

2.8. 요약

2.8.1. 장점

2.8.1.1. 최소한의 필수 구성만 깔끔 : 빠르고 가벼운 개발

2.8.1.2. SEO [Search Engine Optimization] 향상

2.8.1.3. 레이아웃 구조를 사용하므로 여러페이지 구성시 반복되는 코드량을 줄일 수 있음 (SPA 서비스가 아닐 경우)

2.8.2. 단점

2.8.2.1. 별도 구성이 추가로 필요

2.8.2.1.1. PWA

2.8.2.1.2. TEST

2.8.2.2. vue cli 3 쪽과의 연동이 미흡: 낮은 버전 버그등

2.8.2.3. vue cli 만으로 충분하진 않은가?

3. vue.js 2.x

3.1. Vue.js 동영상

3.2. 시작하기 — Vue.js

3.2.1. Vue 2.0 Hello World - JSFiddle

3.2.2. 라이프사이클-다이어그램

3.2.3. 싱글 파일 컴포넌트 — Vue.js

3.2.4. Understanding Vue.js Lifecycle Hooks

3.2.5. 고급

3.2.5.1. 비동기콤포넌트

3.2.5.2. Dynamic and async components

3.2.6. API — Vue.js

3.3. Vuex가 무엇인가요? | Vuex

3.3.1. 상태관리패턴 라이브러리

3.3.1.1. 옵저버패턴

3.3.1.1.1. 상태관리는 store를 통해서만

3.3.2. 단방향 상태관리

3.3.3. 중앙 집중식 저장소

3.3.3.1. 공유된 상태 관리를 처리하는 데 유용

3.3.3.2. 애플리케이션 구조 | Vuex

3.3.3.3. examples

3.3.3.3.1. 장바구니 스토어 예제

3.3.4. Why? Vuex?

3.3.4.1. 여러 뷰는 같은 상태에 의존

3.3.4.2. 서로 다른 뷰의 작업은 동일한 상태를 반영

3.3.4.3. 공유된 상태를 추출하고 이를 전역 싱글톤으로 관리해야 함

3.3.5. with rxjs

3.3.5.1. Rx useful with vuex?

3.3.5.1.1. 이벤트를 원하는 상태로 변환하는 과정에서 비동기 작업을 처리하는 것에는 유용하다는 의견

3.3.5.1.2. vuejs/vuex-observable

3.3.5.1.3. vuejs/vue-rx

3.3.5.2. Reactive programming in Vue.js

3.3.5.2.1. RxJS를 vue.js 어플리케이션에서 사용할 순 있으나 얻는 이점이 적다는 의견

3.4. 소개 · vue-loader

3.4.1. webpack 로더

3.4.2. vue 컴포넌트를 JS 모듈로 변환

3.5. 소개 | Vue Router

3.5.1. 공식 라우터

3.5.2. Vue.js 코어와 긴밀히 통합되어 있음

3.5.3. 중첩된 라우터 children

3.5.3.1. 훅

3.5.4. router.ts

3.5.4.1. 코드 분할 기준 (레이지로드)

3.5.4.1.1. Lazy Loading Routes

3.5.4.1.2. Lazy load in Vue components

3.5.4.2. 프리로드

3.5.4.2.1. webpack 4.6.0 adds support for prefetching (and preloading)

3.5.4.2.2. Prefetching content before link is clicked · Issue #1328 · vuejs/vue-router

3.6. 서버사이드 렌더링 — Vue.js

3.6.1. 고려할 부분

3.6.1.1. node.js 서버 실행환경

3.6.1.2. 서버렌더링된 환경에서 실행되어야 하는 제약

3.6.1.3. 서버측 로드로 인한 cpu 부하 부담

3.6.1.4. SSR이 필요한지 여부

3.6.1.4.1. 지도 서비스 동적렌더링되는 단일 페이지

3.6.2. support

3.6.2.1. Vue SSR Guide | Vue.js Server-Side Rendering Guide

3.6.2.2. Nuxt.js

3.6.2.2.1. How to add Nuxt.js

3.7. 다국어 지원

3.7.1. Vue I18n | Installation

3.7.2. Vue I18n | Getting started

3.7.2.1. https://codeburst.io/dependency-injection-with-vue-js-f6b44a0dae6d

3.8. vue2 dependency injection framework

3.8.1. IoC - Inversion of Control 제어의 흐름 구조가 바뀌는 것을 의미. 즉, 사용할 다른 객체들을 결정하고 제어하는 권한을 스스로 갖지 않고 외부의 다른 객체에게 위임 DI - Dependency Injection 의 약자로 의존성 주입 (IoC의 구현방식)

3.8.1.1. JS IoC의 과거 그리고 현재

3.8.1.1.1. vuec

3.8.1.1.2. vue-inject

3.8.1.1.3. injection-js

3.8.1.1.4. InversifyJS

3.8.1.1.5. dependency-injection-es6

3.8.1.1.6. 중요

3.8.1.2. DI 참고 provide-inject

3.8.1.2.1. [Vue.js] provide/inject 에 대해 알아보기 – Witinweb – Medium

3.8.1.2.2. Dependency injection with Vue.js

3.8.1.2.3. typescript

3.8.1.2.4. 공식문서 권장

3.8.1.2.5. 사용하는 곳에서의 서비스 import 만으로 충분할 수도 있진 않은가? (es6 의 import 는 기본적으로 싱글톤으로 동작함)

3.9. Vue.js with TypeScript

3.9.1. Writing Class-Based Components with Vue.js and TypeScript

3.9.2. vue-class-component

3.9.3. Vue Property Decorator

3.9.3.1. Decorators · TypeScript

3.9.3.1.1. Decorators & metadata reflection in TypeScript: From Novice to Expert (Part I) • Wolk Software Engineering

3.9.4. Microsoft/TypeScript-Vue-Starter

3.10. 마이그레이션 참고

3.10.1. How to Migrate from AngularJS to Vue – DailyJS – Medium

4. OSS

4.1. branch

4.1.1. feature

4.1.1.1. nuxt.js

4.1.1.1.1. init

4.1.1.2. vue-ui

4.1.1.2.1. init

4.1.1.2.2. init-without-e2e

4.1.1.2.3. demo

4.2. https://oss.navercorp.com/Maps/mobile_web_navermap_v5

5. 모웹 개발환경 사전점검

5.1. 앵귤러와 비교

5.1.1. 작은 용량 (angular aot 보다)

5.1.2. 덜 강요적이고 유연한 편

5.1.3. 설정관련 코드가 좀 더 단순하고 직관적

5.1.4. Vue를 좋아하기 시작한 이유

5.1.4.1. 통찰력 있는 좋은 글

5.2. Vue CLI 어느정도를 지원해주는지

5.2.1. UI 관리자 페이지가 얼마나 좋아졌는지

5.2.1.1. UI만으로 얼마큼 어디까지 할 수 있는지

5.2.1.2. 콘솔명령어만으로 하는 것 대비 얼마나 편한지?

5.3. 청크 파일 분할방식과 레이지로딩이 어떤식으로 가능한지

5.3.1. 청크파일 네이밍

5.3.2. 라우터 단위 레이지로딩

5.3.3. 라우터 내 서브컴포넌트 단위 레이지로딩

5.4. 블랙펄의 디렉토리 구조와 얼마나 유사하게 구성이 가능할지

5.5. 타입스크립트를 블랙펄에서 처럼 잘 사용할 수 있는지

5.5.1. 공식문서에 상세한 언급은 하지 않으나 충분히 가능 (ex. Compeont 등의 어노테이션 문법이나 인터페이스등이 조금 다름)

5.5.2. Writing Class-Based Components with Vue.js and TypeScript

5.6. rxjs 사용

5.6.1. vuex store 와 함께 사용관련 논의

5.6.1.1. 이벤트를 원하는 상태로 변환하는 과정에서 비동기 작업을 처리하는 것에는 유용하다는 의견

5.7. 서비스 DI 관련

5.7.1. 설정방식의 의존성 자동주입 VS import 로 싱글톤 객체 직접 주입

5.7.1.1. 컴포넌트에서 import 하는 것이 간단하고 좀 더 직관적

5.7.2. 자동주입이 필요하다면

5.7.2.1. InversifyJS

5.7.2.1.1. TypeScript library for IoC container

5.8. 테스트 환경 접근성

5.8.1. unit

5.8.2. e2e

5.9. 스터디?

5.9.1. 타입스크립트 기반 Vue 컴포넌트 작성

5.9.1.1. Writing Class-Based Components with Vue.js and TypeScript

5.9.1.2. https://kr.vuejs.org/v2/guide/typescript.html#클래스-스타일-Vue-컴포넌트

5.9.1.3. https://codeburst.io/vuex-and-typescript-3427ba78cfa8

5.9.1.4. mapGatter Helper for Typescript

5.9.1.4.1. exam with store and rxjs

5.9.1.4.2. vuejs/vue-rx

5.9.2. 템플릿 문법

5.9.3. 필터

5.9.3.1. Angular Pipe

5.9.4. 컴포넌트 라이프사이클의 이해

5.9.4.1. 플러그인

5.9.5. vuex store

5.9.6. 애니메이션 적용

5.9.7. 비동기컴포넌트

5.9.8. Ant Design Vue

5.9.8.1. UI Framework like angular material

5.9.9. Vue Chrome Dev Tool

5.9.9.1. vuejs/vue-devtools

5.10. Vue 3.0?

5.10.1. Plans for the Next Iteration of Vue.js – The Vue Point – Medium

6. etc

6.1. The online IDE for web applications. Powered by Visual Studio Code. - StackBlitz