NavigationDuplicated 에러는 

Vue router를 사용할 때 생길 수 있는 에러이다.

해결법은

router.go(router.currentRoute);

를 통해 해결할 수 있다.

Navigation gaurd

routes: [
    {
        path: "/home",
        component: Home
        beforeEnter: (to, from, next) => {
            if (localStorage.getItem("key") == null) {
                return next({
                    path: "/login",
                    query: { redirect: to.fullPath }
                });
            }
            next();
        };
    }
]

• 위 예시와 같이 네비게이션 가드를 통해 특정 라우팅에 대해 가드를 설정할 수 있다.
• 쉽게 말해, 특정 컴포넌트로 이동하기 전에 조건 처리를 통해 로그인이 되었는지 등 검증 로직을 수행할 수 있는 방법이다.

캡틴 판교(장기효) 님의  [Vue로 구현하는 PWA] 강의를 듣고 중요 내용을 요약하여 정리합니다.

아래 깃헙블로그에서 가독성 좋게 보실 수 있습니다.

https://nuatmochoi.github.io/notesite/07.html

Deployment with Vue CLI, PWA

Deployment with Vue CLI

Webpack dev server는 Node moudles @vue cli-service에 존재한다.

dist 폴더를 찾다보면 hash값이 포함된 파일을 찾을 수 있는데, Hash값은 브라우저 캐시와 같은 역할을 한다.
새로고침하더라도 기존 상태가 남아있지 않고 최신상태를 반영하기 위함.

Component들이 vue 파일인데, 실제 npm run serve로 올려보면 element로 tag가 생성되어 있다. 즉, app.js에서 webpack을 사용해 받아온다는 것을 확인할 수 있음.

static file server와 webpack dev server의 차이를 잘 알아둬야 한다.

• webpack dev server 포트번호 : 8080
• static file server(npm run serve) 포트번호 : 5000

Continuous Deployment (CD)

지속적으로 배포하는 것. 실시간서비스나 협업 중에 유용하게 사용된다.

Netlify

배포 자동화를 도와준다. 소스변경이 일어났을 때 자동으로 배포시켜준다.

Publish directory는 해당 repository를 배포할 대상 위치를 가리킨다.

배포 자동화를 위해 프론트 배포는 Netlify를, 백엔드 배포는 Elastic Beanstalk을 많이 사용한다.

PWA 실습

기존 프로젝트에 PWA를 추가하는 실습이다. workbox를 사용하여 실습을 진행하였다.

이제는 sw-precache는 구시대 기술이다. 하지만 여전히 기업들은 많이 사용한다고 한다.

1. Public-index.html 에다가 추가

   <link rel="manifest" href="manifest.json">

2. public/manifest.json 생성

manifest 자동 생성 툴을 사용해 manifest.json을 쉽게 생성할 수 있다.

3. npm install workbox-cli -g

4. npm run build

5. workbox wizard

   터미널에 다음과 같은 설정 사항들이 표시될 것이다.

• Wabapp의 root (어디 배포하는지) - dist/
• precache - 필요한 파일들이 선택되었는지 보고 enter
• 서비스 워커 저장 위치 - dist/sw.js
• 설정 파일 - workbox-config.js

6. workbox generateSW workbox-config.js

   서비스 워커가 생성되었음을 확인할 수 있다.

모든 이미지와 js 파일들을 service worker에서 들고 오기 때문에 PWA는 오프라인에서 작동이 가능하다.

Service Worker

• 브라우저의 백그라운드 실행(javascript의 UI thread와 별도의 동작)
• 네트워크 요청 가로채기 (캐시 안에 instance가 없으면 서버에 자원 요청) -> 프록시
• 브라우저 종속 생명주기
• notification 제공

PWA caching

Application tap의 cache storage

• 프리캐싱
  : 웹 애플리케이션 접속 전 미리 캐싱

• 런타임 캐싱
  : 발생하는 요청에 대해 캐시 스토리지 저장 - 정규식 사용하여 어떤 파일 패턴을 받을 것인지, 어떤 것들에 대해서 무조건 캐시로 받을 것인지 등등의 전략이 필요

캐싱 전략

• 캐시만 접근할 것인지
• 캐시만 볼 것인지
• 캐시보다 네트워크를 먼저 요청할 것인지
• Offline Cookbook | Workbox strategies

캡틴 판교(장기효) 님의  [Vue로 구현하는 PWA] 강의를 듣고 중요 내용을 요약하여 정리합니다.

아래 깃헙블로그에서 가독성 좋게 보실 수 있습니다.

https://nuatmochoi.github.io/notesite/06.html#vue-router

Router, PWA

Vue Router

npm install vue-router

페이지 전체 정보가 routes 라는 곳에 들어가게 된다.

// src/router/index.js
{
    path: '/home',
    component: HomePage 
},

이 정도로 path마다 뿌려지는 component 구현으로 충분하지만, tag를 정의하기 위해서 router view를 정의한다.
는 뷰 라이브러리를 썼을 때 제공하는 router 태그이다.

• router-link

a href와의 차이 : to, replace 등의 vue-router에서 제공해주는 기능 제공 여부

url을 바꿨는데도 서버로 가지 않고 js파일로 조작이 어떻게 가능한가? -> window history

• router 구성방법

1. 기본 방식 : 요구사항이 많이 바뀌는 경우에 사용 (단순하게 구성)
2. nested router
3. named view

• SPA(Single Page Application)

예전에는 화면에 바뀌는 것을 수정하기 위해서 전체 파일을 받아오기 위해 서버까지 접근했는데,
요즘에는 바뀌는 부분만 서버에 가서 요청함. 해당 역할을 vue router가 수행

PWA

Workbox가 가장 최신의 라이브러리이다.

• 모바일 앱과 같은 경험을 주는 최신 웹 앱
• 앱 icon, 앱 설치 banner, 모바일 push(notification), offline 경험 제공
• html, css, js로 모바일과 같은 웹앱 구현
• 높은 사용자 경험을 제공하기 위한 웹앱 (페이징 속도를 올리는 등)

https://vuejsdevelopers.com, https://dev.to 와 같은 사이트들이 PWA로 개발이 되었다. 웹 어플리케이션으로 설치가 가능한 것을 확인할 수 있다.

PWA 특징

• App-like
• Discoverable
• Engagable (push 알람이 왔을 때 다시 앱으로 유입)
• Connectivity (오프라인 웹앱 - 인터넷이 끊겨도 웹사이트가 잘 동작함)
• https 위에서만 동작한다.
• 포보스나 익스페디아 등 많은 기업에서 사용한다.
• 일반 웹사이트와 동작이 다르다. PWA는 앱으로 설치하고 실행했을 때, launching image가 있어 모바일 앱 같아 보이고, 위에 url bar가 존재하지 않는 것을 확인할 수 있다.

PWA를 구성하는 기술

1. Web App Manifest (manifest.json)
2. Service Workers (client-side javascript proxy) - 웹앱과 webserver 사이에 존재 (caching)

PWA 지원 브라우저

• 파이어폭스, 오페라, 크롬, 삼성 인터넷, 엣지, 사파리(push 지원X) 등
• 삼성 인터넷과 크롬은 대부분의 기능을 제공한다.

PWA는 실제 앱 마켓에 배포가능하다?

• OS레벨까지 내려왔음
• application 관리 tab으로 존재함
• 플레이스토어에 배포하기 위해서는 mapping 하는 작업이 추가로 필요할 뿐이다.

Web App Manifest

PWA의 설치와 앱 구성정보를 담고 있는 파일 (앱 아이콘, 런쳐 방식, 배경, 시작페이지 등)

<link rel="manifest" href="manifest.json">

아래 것들이 설정될 수 있음.

• start url
• launch image
• display type : 웹앱이 모바일 앱의 느낌을 가질 수 있도록 결정짓는 속성 (전체 모양)
  • Standalone
  • Browser
  • Fullscreen
  • Minimal-ui
• display orientation
• App icon
• 배경 색 : background color와 비슷하게 하는 것이 좋다.

Web App Install Banner

PWA가 모바일적인 특징을 가지는 큰 부분

• 기존 앱 개발주기 : 구현 -> SDK 빌드 -> 스토어 배포 -> 검색 -> 앱 다운로드 -> 설치 -> 사용
• PWA 앱 개발주기 : 구현 -> 사이트 배포 -> 검색 -> 사용 (자동설치, 항상 최신상태 유지)

install banner 동작조건

• short name
• name
• icons (including a 192px and a 512px version)
• https

사용자가 30초만 사이트에 머무르면, install banner가 뜬다. (타이밍은 조절 가능)

Service Worker

약자로 sw.js와 같이 많이 쓰임

chrome://inspect/#service-workers
-> 현재 브라우저에서 돌아가고 있는 service worker를 전부 볼 수 있는 개발자도구

주요특징

• Caching
• Offline
• Native features (push 등)

Service worker는 브라우저와 서버 사이의 별도의 js가 돌아가는 것 (미들웨어)

• 실제적으로는 브라우저 뒤에 별도의 쓰레드 (멀티 쓰레드 개념)가 돌아가고 있다. (scope도 다르다)
• 같은 동작을 했음에도 기존 js와 결과가 다르게 나온다.

이전에도 Service worker와 비슷한 개념은 존재했다.

1. AppCache

• 오프라인경험을 제공하기 위한 캐시 제공, HTML 표준
• 페이지가 여러 개 일때 오동작, 파일 변화할 때 문제

2. Shared Workers

• js와 별도의 쓰레드
• 페이지에 비종속적 (페이지가 새로고침되더라도, js파일은 새로고침되지 않음)

이런 것들을 보완하기 위해서 등장한 것이 service worker이다.

참고

// #1 - 서비스 워커 설치(캐싱 파일 생성)
self.addEventListener('install', function(event){ // self : app.js에서의 window와 동일 - 바로 window 객체에 접근할 수 없기 때문에 사용
    console.log('서비스 워커 설치 완료')
    event.waitUntil(
        caches.open(cacheName)
        .then(function(cache){
            console.log('캐시 생성 완료');
            cache.addAll(cacheFilelist);
        })
        .catch(function(error){
            console.log(error);
        })
    );
})

오프라인에서도 돌아가게끔 캐시 작업을 한 것이다.

// #2 - 서비스 워커의 네트워크 요청 가로채기 코드 작성
self.addEventListener('fetch', function(event){
    // localhost:5000/teemo.png 요청
    event.respondWith(
        caches.match(event.request)
        .then(function(response){
            if (response){
                return response;
            }
            return fetch(event.request);
        })
        .catch(function(){
            console.log(error);
        })
    )
})

PWA 적용하는 방법

1. Vue create로 만들 때 PWA Support 옵션으로 생성
2. 이미 만들어진 app에 적용하려면,
   1. public 폴더 밑의 index.html에 link tag로 manifest 연결
   2. manifest.json 생성
   3. main.js에 service worker 등록

캡틴 판교(장기효) 님의  [Vue로 구현하는 PWA] 강의를 듣고 중요 내용을 요약하여 정리합니다.

아래 깃헙 블로그에서 가독성 좋게 보실 수 있습니다.

https://nuatmochoi.github.io/notesite/05.html

Render with life cycle

1. created, 데이터 초기화 (반응성-reactivity 주입)
2. befroeMount, 'template' 속성을 render 함수로 변환

render: function(creteElement) {
    // return createElement('태그 이름', '태그 속성값', '하위 태그 정보')
    return createElement('p', this.str) // reactivity를 반영
}

• render 구현 방식

1. tag에 있었을 때 (outerHTML)
2. template 속성
3. render 함수

참고

life cycle에서는 create, beforeMount, Mounted (window.addEventListener / bus.$on) 이 세 개를 많이 쓰고,
이벤트 해제 할 때에 beforeDestory를 사용 (window.removeEventListener / bus.$off)

Webpack

웹팩 설명 유튜브 영상

여러 파일(모듈)을 묶어서 들고 오는 시간을 절약하는 것이 webpack의 목적

Gulp는 코드를 다 써서 구현하는 반면에

Webpack은 자체적으로 지원해주는 기능이 많고, Gulp보다 생태계가 훨씬 크다는 장점이 있다.
따라서 새로운 프로젝트라면 Webpack을 쓰는 것이 좋다.

Webpack을 쓰지 않았을 때와 썼을 때의 차이를 비교해볼 수 있다.

웹페이지의 필요한 파일들을 static assets으로 바꾼다.

번들링(bundling)이란 합치는 것. Build와 같은 의미로 보아도 좋다.

Webpack 실습

lodash 라는 라이브러리를 웹팩으로 번들링하는 실습이다.

순서 참고

1. npm init -y

2. npm i webpack webpack-cli

3. npm i lodash

   <script src="dist/main.js"></script>

4. import _ from "lodash"; // 상대경로 없이 이름만 쓰면 library

   lodash는 배열을 객체로 변환해주는 라이브러리이다.
   _ === lodash
5. package.json에 아래와 같이 추가

   "scripts": {
    "build": "webpack --mode=none"
   }

6. npm run build

Webpack Basic Concepts

• entry는 시작 field를 의미

• output은 기본으로 ./dist/main.js로 잡혀 있다.

• loader는 비js 파일을 js 파일로 변환시켜준다.

  • module은 돌릴 때에 필요한 속성, rule은 변환할 때 규칙을 정의하는 것

• plugins은 기본으로 지원하지 않는 부가적인 기능을 설정할 수 있다.

• webpack의 추가 옵션들이 많아질 때 -> webpack.config.js로 관리

  • mode는 none / production / deveplopment로, webpack이 업데이트 되기 전에는 plugins으로 설정했으나 최신버전은 해당사항 없음, build를 위해 아래와 같이 설정

    "scripts": {
    "build" : "npm run bundle -- --mode=production"
    }

• webpack 주요 속성

entry, loader, output, plugin

web 주요 속성

Webpack Loader

exports.push([module.i, "p {\r\n\tcolor: blue;\r\n}\r\n", ""]);

• js파일 안에 text로 기존에 들어올 수 없는 것을 추가시켜주는 것이 loader이다.

• 즉, 비js 파일(css, images, fonts...)을 js파일로 변환시켜준다.

• entry (index.js) -> (중간에 loader가 개입) -> output (dist/bundle.js)

• IE 등 ES6 문법이 필요하다면 babel이 필요한데 babel CLI를 설치하면 복잡해지니까 webpack이 해당 작업을 해줄 수 있음.

  {
      test: /\.js$/,
      use: 'babel-loader'
  },
  {
      test: /\.vue$/,
      use: 'vue-loader'
  }

  module -> rule에 위와 같이 추가하면 된다.

• loader는 적용이 오른쪽에서 왼쪽으로 된다.

  use: ['style-loader','css-loader'], // css -> style 순서로 적용이 된다.

Entrypoint main = bundle.js

[0] ./index.js 22 bytes {0} [built]

[1] ./base.css 261 bytes {0} [built]

위처럼 연관 관계 있는 것들을 하나씩 불러온다. dependency graph라고도 부른다.

브라우저의 개발자도구에 network 패널을 보면 DOMContentLoaded와 Load라는 것을 확인할 수 있는데, webpack을 사용하기 전후를 비교해보면 확연하게 시간차이가 나는 것을 알 수 있다.

• DOMContentLoaded : 기본적인 DOM 들만 들고오는 시간
• Load : css 등 다 불러오는 시간

Webpack Plugin

플러그인을 썼을 때 결과물에 추가적인 작업을 할 수 있다. (output뿐만 아니라, loader와 entry 단계에서도 적용 가능하다.)

• html webpack plugin

해당 plugin github

chunk를 모두 html로 script 추가

new HtmlWebpackPlugin({
            // index.html 템플릿을 기반으로 빌드 결과물을 추가해줌
            template: 'index.html',
        }),

• MiniCssExtractPlugin

css 파일을 별도의 파일로 분리 (css를 추출하는 플러그인)

개발용 라이브러리와 배포용 라이브러리 구분

• 개발용 (devDependencies)

  npm i webpack webpack-cli --save-dev 

• 배포용 (devDependencies)

  npm I lodash –save 

최종 애플리케이션에 포함되어야하는 라이브러리는 -D로 설치하면 안 된다. eslint, webpack등이 개발용 라이브러리이다.

라이브러리 지울 때는 npm uninstall 명령어를 사용한다.

Webpack Dev Server

• 매번 수정하고 npm run build 하는 것은 굉장히 비효율적인 반복 작업이다. 이 문제를 해결하기 위해, webpack dev server를 사용한다.
• webpack dev server : 파일 입출력을 하지 않고, 해당 dist/bundle.js를 memory 위에만 올려놓고 사용 (local에서 확인할 수 없다)
• npm run serve로 해당 작업을 수행할 수 있다.
• 추가적으로, webpack dev server를 이용하면 html, css, js 파일 뿐만 아니라, vue파일도 코드만 고쳤을 때 live server처럼 동일하게 화면을 갱신시켜줄 수 있다. webpack dev server에서 내부적으로 webpack 빌드를 하고 있다는 차이점이 존재하긴 한다.

Vuex

• component와 달리 트리구조가 아니라 container(store)가 하나 존재하고, 거기에 값을 같이 접근하는 방식 -> 정확하게는 단일 상태 트리를 이용 Vuex State

단방향으로만 흐르는 것을 알 수 있다.

State

• vue에서의 상태 (state) : 여러 컴포넌트간 공유되는 data
• 데이터가 많으면 한 곳에서 관리해야 한다. 상태 또한 component의 event처럼 규칙이 있다.

1.  

   npm i vuex

2. // main.js에서
   import Vuex from 'vuex';
   
   
   Vue.use(Vuex);
   
   const store = new Vuex.Store({
   state: {
   str: 'hi',
   },
   });
   
   

3.  

// app.js에서
<p>{{ $store.state.str }}</p>

Mutations

• state는 data와 비슷하고, mutations는 method와 비슷하다.

• 차이점은 data는 Vue 개발자도구에서 최종 값만 확인할 수 있고, state는 data의 각 시점의 변화(logging)를 볼 수 있다.

  mutations: {
    addStr(state) {
      state.str += '!';
    }

• 다른 컴포넌트에 아래 코드처럼 입력하면, 같은 data를 바라보기 때문에, 한 번의 mutation으로 두 개의 component가 변경된다.

  <div>
    <h1>HelloWorld의 뷰엑스 코드</h1>
    <button @click="$store.commit('addStr')">Vuex버튼</button>
    <p>{{ $store.state.str }}</p>
  </div>

• main.js : 전반적인 library, 프로젝트에 어떤 기능이 있는지 포함이 되어 있어야 한다. store나 router가 많아지면 한 눈에 보기 힘들기 때문에
  src 폴더 밑에 store 폴더를 만들고 index.js에 store와 router를 포함시켜야 한다.

Actions

    fetch('https://jsonplaceholder.typicode.com/users/1')
        .then(response => response.json())
        .then(json => this.user = json); // json 결과를 this.user에 담아 둔다.

위는 브라우저에서 사용되는 HTML request 방식이다.

• 데이터 호출은 vuex에서 mutations이 아닌 actions으로 한다!

• actions에 작성하는 함수는 전부 대문자로 작성 (ex> FETCH_USER)

• mutations와 달리, actions에서 state로 갈 수 있는 길이 없다. mutations을 거쳐야만 가능하다.

• mutations은 devtool로 확인할 수 있기 때문에 debugging도 용이하다.

    setUser(state, user) {
        // 두 번째 인자는 payload로도 많이 씀
        state.user = user;
    },
  },

• context 객체 안에 commit이 포함되어 있다. 참고

  actions: {
        FETCH_USER(context) {
            fetch('https://jsonplaceholder.typicode.com/users/1')
                .then(response => response.json())
                .then(json => {
                    console.log(json);
                    context.commit('setUser', json); // context.commit('mutation name', json)
                });
        },
    },

• actions을 호출할 때는 dispatch를 이용한다. mutations이 commit을 사용하는 것과 구별할 것.

      <button @click="$store.dispatch('FETCH_USER')">get user</button>
      <p>{{ $store.state.user }}</p>

• Vue core library는 화면단의 데이터에 관한 기능을 중점 지원하지만, 프레임워크의 기능인 router, state, testing을 쉽게 할 수 있는 형태로 제공. Vue를 단지 library뿐만이 아닌, progressive framework라고 부르는 이유이다.

캡틴 판교(장기효) 님의  [Vue로 구현하는 PWA] 강의를 듣고 중요 내용을 요약하여 정리합니다.

아래 깃헙 블로그에서 가독성 좋게 보실 수 있습니다.

https://nuatmochoi.github.io/notesite/04.html

component / instance option 순서

권고되는 순서이다.

https://vuejs.org/v2/style-guide/#Component-instance-options-order-recommended

다른 component로 값을 보내는 방법

이벤트 명이 같으면 안된다.

1. event + props

일반적으로는 다른 컴포넌트에 값을 보내줄 때

-> 위쪽 컴포넌트(ex> root)에 값을 올린 후에 다시 내려줘야함

2. event bus

src 밑에 utils 폴더 -> bus.js 생성

export var bus = new Vue(); // export : 다른 곳에서 쓰기 위함

import { bus } from '../utils/bus' // ctrl 클릭하면 그 파일로 갈 수 있다

- this.$emit('...') : 밑에서 위로 올려보낼 때 사용 (이벤트 트리거)

removeAll: function() {
            localStorage.clear();
            this.$emit('remove-all'); // event bus -> 컴포넌트간 data 전달 가능 
            bus.$emit('remove-all');
        },

beforeMount: function() {
        bus.$on('remove-all'); //이벤트를 받기 위함
}

위 방식은 기본 최상위 컴포넌트인 root로 가는 것이 아니라 외부의 root라는 bus를 통해서 data를 전달하는 방식이다.

- 복잡해질수록 나중에 tracking하기가 어렵다. (규칙에 의한 방식이 아니라, 일종의 편법이기 때문)

- 따라서 위 방식을 팀 프로젝트 내에서 쓰려면 코딩 컨벤션을 따라야 한다. 

- 대개는 event로 올리고, props로 내리는 방법을 채택하고, 이 계층이 깊어지면 Vuex를 채택한다.

beforeDestroy: function() { // event를 제거할 때 
        bus.$off('remove-all', this.removeItems)
}

- $on으로 event를 생성한 이후에, event queue에 쌓이기 때문에, $off로 제거하는 것이 필요하다.

vue project 디버깅

1. 디버깅 할때 어떤 컴포넌트인지 확인한다.

(ex>

found in

---> <TodoList> at src/components/TodoList.vue

       <App> at src/App.vue

         <Root>

)

2. 큰따옴표 "" 안에 어떤 item인지 확인한다. (ex> "todoItems")

props 작성 방식

vue의 event bus를 사용할 때에 app에서 data를 내려 보내기 위해 props 사용

1. 

props: ['list']

2.

props: {
    list: Array
}

v-on 이벤트 작성 방식

<todo-footer v-on:clear="todoItems = []"></todo-footer>

이것도 가능하지만, 유지보수를 위해 method로

this.todoItems = [];
localStorage.clear();

이렇게 작성해주는 것이 좋음

vue.js Event Bus에 대해 잘 정리된 글이 있어 공유합니다. https://jsdev.kr/t/vue-js-event-bus/2926

- 리스트의 값이 바뀌고 화면이 바로 바뀌는 것을 reactivity라고 말한다.

자바스크립트 for문 문법

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

https://medium.com/@js_tut/map-filter-and-reduce-animated-7fe391a35a47

1.

for (var i =0 ; i < arr.length ; i ++){
	console.log(arr[i]);
}

2.

arr.forEach(function(value,index){
	console.log(value, indexedDB);
});

3.

for (var key in arr) {
	console.log(key, arr[key]);
}

+ Vue에서는 이렇게 쓴다.

<li v-for="(item, index) in list" :key="index">

- key는 unique한 값 (key는 id나 index값을 주로 사용함)

event, emit, payload

1.

this.$emit('add:todo', value); // 동작: 대상

2.

payload : 인자

this.$emit('remove-each', item, index); // payload의 순서대로 들어감

vue 파일에서 style 적용

<template>
  <h1>Todo App</h1>
</template>

<style scoped>
h1 {
  color: blue;
}
</style>

- style에 scoped 속성 추가하면 그 component의 file에만 적용되는 스타일이 된다.

Mounted

template이 string에서 tag로 변경되는 시점이다.

export default {
  //vcrea
  created() { // document 생성 x
    var h1 = document.querySelector('h1');
    console.log('created', h1);
  },
  //vbm
  beforeMount() { // document 생성 x 
    var h1 = document.querySelector('h1');
    console.log('before mount', h1);
  },
  //vm
  mounted() { // template가 실제 dom에 있지 않고 string 상태에서, mounted가 되어야 tag로 변환된다.
    var h1 = document.querySelector('h1');
    console.log('mounted', h1);
  },
};
</script>

form tag

form 태그는 submit 되면 새로고침이 되는 특징이 있다.

-> 이것을 막기 위해서

event.preventDefault();

혹은

<form v-on:submit.prevent="submitForm">

이런 처리들을 해줘야한다.

이와 비슷한 event modifiers에는 prevent를 포함해 6가지 종류가 있다.

https://vuejs.org/v2/guide/events.html#Event-Modifiers

Babel

최신 JS 문법(ES6 이상)이 여러 브라우저에서 돌아갈 수 있게 해주는 것이 Babel이다.

https://babeljs.io/

자바스크립트 최신문법 (ES6)

1. destructuring

var {name, id} = data;

2. 변수 선언

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures

let a = 2 // 한 번 선언한 것은 다시 선언 할 수 없다.

const c = 20 // const도 마찬가지

3. for문

JS는 ES6 이전에 var 선언으로 마지막 값에 접근이 가능한 타 언어 개발자들이 기겁할만한 문제가 있었지만,

let을 통해서 해당 문제를 해결하였음.

화살표 함수

arr.forEach((value, index) => {
    console.log(value, index);
});

만약에 인자가 하나라면 괄호를 없애도 된다.

var sum = (a, b) => {
    return a + b;
};

 var vm = this;
    return axios
      .get('https://jsonplaceholder.typicode.com/posts/1')
      .then(data => {
        this.post = data.post; // 화살표 함수를 쓰면 vm이 아닌 this를 사용해도 된다.
      })

인스턴스 option 속성에는 화살표를 쓰면 안된다. 

-> 왜냐하면 바로 위의 this의 범위가 달라지기 때문이다.

fetchItems() { 
	… 
} 

-> 대신에 이런 식으로 작성이 가능하다.

Enhanced Object Literal

향상된 객체 리터럴(표기법): key와 value가 같아질 때 사용한다.

var obj = {
    num, // num: num,
};

-> vue의 component 정의에서도 예를 들어 TodoInput이 html에서는 todo-input으로 바뀌기 때문에 사용 가능하다. (대소문자 구별을 하지 않기 때문임)

import, export

- 값이나 변수가 나가는 곳에서 export var a

- 받는 곳에서 import {값 or 함수} from '가져오는 위치'

export default

-> 해당 파일에서 무조건 하나만 들고 오겠다면 default를 붙인다.

-> 이때는 무조건 하나만 들고 오기 때문에, import sum from '...' 처럼 { } 없이 들고 올 수 있다.