제 1막

* Spring & Springboot 차이
딱 생각 든 답변은 Spring boot는 Spring에 포함된 개념이다.
스프링부트는 spring boot starter를 통해 pre-packaged를 제공하고, 이는 스프링의 많은 설정 과정을 건너뛰게 해준다. (Spring Boot는 웹 컨테이너를 내장하고있고 최소한의 설정으로 쉽게 웹 어플리케이션을 만들 수 있다.)

쉽게 만든다. 단독적인. 상용화 수준의. Based on Spring.
1. dependency: 짧아졌다. 버전관리도 권장 버전으로 자동 설정.
2. configuration: application.properties(application.yml)
3. embedded server: 내장된 tomcat, jetty, undertow. jar 파일로 간단한 배포! (서버 구동시간이 짧다.. )
-> 개발자들이 개발에만 더 집중할 수 있도록

state : 말 그대로 상태를 나타냄. 

getters : 어떤 컴포넌트에서 쓸 때, 자주 사용되는 상태값에 대한 길이? 혹은 함수들을 만들어서 정의해두고 쓸 수 있다. 

장점 -> 반복을 줄이고, this.$store.state.AllUsers.length이렇게 쓸꺼를 짧게 줄여서 표현가능.

mutations는 동기 역할을 한다(state를 변화 시키는 한줄) 

actions는 비동기 역할을 한다. ( 변화시키기 위한 로직이 들어간다 ) 

( 즉, mutations와 actions는 과정과 결과처리를 분리 시켜놨다고 생각 )

( 어떤 과정이 들어오느냐 에 따라서, 여러 상태로 변화 될 수 있기 때문에 !! ) 

이게 전부다. 2가지 방법.

첫번째, 

 ...mapMutations(['addUsers'])를 등록해두고 this.addUsers(userObj)를 쓴다.

두전째, 

this.$store.commit('addUsers',userObj)만 써서 한번에 접근한다. 

그니까 mutations의 역할이 state 변화 및 관리다. 즉 효율적 관리다. 

mutations는 여러 컴포넌트에서 동작을 하는데 , 이를 비동기로 받아들이면, 같은 값에 대해서 

그 순서를 정확하게 알기 어렵다. 

즉, state를 변화 시키는 것은 mutation에 넣는다.

이를 동작시키는 biz들은 actions에 넣는다. 

mutations = commit 

actions = dispatch 

즉 , 

mutations는 동기 역할을 한다( state를 변화 시키는 한줄 ) 

actions는 비동기 역할을 한다. ( 변화시키기 위한 로직이 들어간다 ) 

store js를 어떻게 사용하는가? 

main.js에서 vue store를 임폴트 해놨다.  그렇기에 프로젝트에서 vuex가 적용되었다고 생각할 수 있다. 
https://www.youtube.com/watch?v=7i0D7OSogYc&list=PLZzSdj89sCN292abcbI3utND8pA1T1OyB&index=2

STORE.JS부분( getters 쓰는 방법  ) 

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: { //data 
    allUsers:[
      {userId: 'hoza123', password: '123', name: 'Hoza', address: 'Seoul', src:'https://goo.gl/oqLfJR'},
      {userId: 'max123', password: '456', name: 'Max', address: 'Berlin', src:'https://goo.gl/Ksk9B9'},
      {userId: 'lego123', password: '789', name: 'Lego', address: 'Busan', src:'https://goo.gl/x7SpCD'}
    ]
  },
  getters:{
    allUsersCount: function(state){
      return state.allUsers.length
    },
    countOfSeoul: state =>{
        let count =0 
        state.allUsers.forEach(user =>{
          if(user.address==='Seoul' || user.address==='seoul')count++
        })
        return count
    },
    percentOfSeoul: (state, getters)=>
    {
       return Math.round(getters.countOfSeoul/getters.allUsersCount *100 ) 
    }
  },
  mutations: {
 
  },
  actions: {

  }
})

// 이렇게 getters를 쓰면, vuex에 접근할 때 중복된 코드를 자꾸 쓴다. 이를 막기 위해서 getters를 쓴다. 
=> computed의 장점인 반복된 코드를 줄여준다???? 이를 그대로 가지고 있다.
=> $store.state.allUsers.length 라고 쓰던거를 줄여서 쓸 수 있다.

=> $store.getters.allUsers 이런식으로 길이를 줄여서 쓸 수 있다. 

=> 길이를 줄여줄 뿐만 아니라, 다른 원하는 함수를 만들어서 쓸 수도 있고, 중복된 코드를 줄여 

쓸 수 있는 장점이 있다. 

allUsers.vue에서 쓰는 방법

<template>
  <div>
    <h1>All Users{{count}}</h1>
      <h1>All Users{{seoul}}</h1>
      <h1>{{percent}}</h1>
    <v-list two-line>
      <v-list-tile 
        v-for="(user, index) in $store.state.allUsers"
        :key="index"
        avatar
      >
        <v-list-tile-avatar color="grey lighten-3">
          <img :src="user.src">
        </v-list-tile-avatar>

        <v-list-tile-content>
          <v-list-tile-title v-html="user.name"></v-list-tile-title>
          <v-list-tile-sub-title>id:#{{index}} / {{user.address}} 거주</v-list-tile-sub-title>
        </v-list-tile-content>
      </v-list-tile>
    </v-list>

  </div>
</template>

<script>
import { EventBus } from '@/main.js'
import {mapState, mapGetters} from 'vuex'
  export default {
    data() {
      return {
        
      }
    },
    computed:{
      ...mapState['allUsers'],
      ...mapGetters({
        count: 'allUsersCount',
        seoul: 'countOfSeoul',
        percent: 'PercentOfSeoul'
      })
        // ...mapGetters['allUsersCount', 'countOfSeoul','PercentOfSeoul']
    },
    mounted() {
      EventBus.$on('signUp', users => {
        this.$store.state.allUsers.push(users)
      })
    }
  }
</script>

즉,

import {mapGetters} from 'vuex' 는 store에서 쓰지 않고 위와 같이 쓰는 곳에서 

정의해준다. 

getters에 있는 것들을 들고 와서 쓸 수 있도록 해준다.

 ...mapGetters({

        count: 'allUsersCount',

        seoul: 'countOfSeoul',

        percent: 'PercentOfSeoul'

      })

        // ...mapGetters['allUsersCount', 'countOfSeoul','PercentOfSeoul']

이러한 명칭을 줄여서 쓸 수도 있다는 점은 참고 !!!

이렇게 폴더를 새롭게 하나 만든다. 

https://www.youtube.com/watch?v=B98iyg_brxQ&list=PLZzSdj89sCN0sLqrTKf2m7lXe_93C19UG&index=9

ㅊ

3.x버전과 4.x 버전은 많은 차이가 있다. 

기존 store.js를 4버전에서는 store/index.js로 바꿔서 쓰고,. 

여러 변화들이 존재한다. 

VUE 개발환경 세팅 
1. vue cli : 뷰 개발환경을 빠르게 구축하도록 해주는 것. 
2. 3대와 2대의 비교,. 
3. 이 후에 설치를 받고 , vue create 프로그램명  

npm_modules ( 부품을 넣어두는 곳 ) 
package.json( 주문서 : 여기에 뭐가 필요한지 넣어두면, 모듈에서 자동으로 생성. )


assets: img 저장소.

src 안에 
App.vue 기본 파일. 
main.js : 구동 시켜주는 파일.
router.js : 라우터 조절
store.js  : 전역 상태 값을 조절. 

<<기본 배경>>
원래는 npm dev를 통해서  실행시켰다면, 
3.대 부터는 npm serve를 통해서 실행 시킨다. 

plugin (플러그인) => vuetify 기본. 
@vue/cli-plugin- 
이걸 쓰면 어떻게 바뀔까? 
부트 스트랩과 같은 역할을 하는데 , 컴포넌트 단위로 돌아간다. 
[기존 explore에서는 제공안함.]

vue-cli-plugin-vuetify // 여기를 통해서 뷰티파이 설치가능. 

npm run build 하는 이유? dist 파일 생성 -> 배포의 목적. 
div- > app
//컴포넌트 단위이기 때문에 , 객체 data:[] 형태가 아닌, 
data(){} , 함수 형태로 쓴다. 
data () {
} 

vue 

eventbus를 쓸 때, 유의 점. 

created를 통해서 이벤트의 변화를 듣는다. 

<받는 곳>
created()
{
	eventBus.$on('보낸신호의 이름', 콜백함수)
}

콜백함수는 ()=>{} 이렇게 쓴다. 

//기본 형태. 
created()
{
	eventBus.$on('받은 신호의 이름', ()=>{})
}
//인자가 있는 경우. 
created()
{
	eventBus.$on('받은 신호의 이름(abce)', (date)=>
    {
    	this.xxx = dae
    })
}


<보내는 곳_ 하나인 경우> 
eventBus.$emit("보낼신호 이름(abce)", new Date())

<중간 다리 main.js_ 하나인 경우>
export const eventBus = new Vue() //라고 써준다. 
//새로운 뷰 인스턴스를 생성해서 값을 내본다는 뜻. 



<보내는 곳.vue_ 여러 곳인 경우>
eventBus.example_function(new Date())

<main.js>
export const eventBus = new Vue({
	methods:{
    	example_function(인자) //보내는 곳의 함수이름
        {
        	this.$emit('이름' , 인자 )
        }
    }
})

https://v1.vuetifyjs.com/en/components/cards#cards

<v-flex xs12 sm6 offset-sm3>
      <v-card> 
        //이미지 넣는거 같음.
        <v-card-media
          src="/static/doc-images/cards/sunshine.jpg"
          height="200px"
        >
        </v-card-media>
        <v-card-title primary-title>
          <div>
            <div class="headline">Top western road trips</div>
            <span class="grey--text">1,000 miles of wonder</span>
          </div>
        </v-card-title>
        <v-card-actions>
          <v-btn flat>Share</v-btn>
          <v-btn flat color="purple">Explore</v-btn>
          <v-spacer></v-spacer>
          <v-btn icon @click.native="show = !show">
            <v-icon>{{ show ? 'keyboard_arrow_down' : 'keyboard_arrow_up' }}</v-icon>
          </v-btn>
        </v-card-actions>
        <v-slide-y-transition>
          <v-card-text v-show="show">
            I'm a thing. But, like most politicians, he promised more than he could deliver. You won't have time for sleeping, soldier, not with all the bed making you'll be doing. Then we'll go with that data file! Hey, you add a one and two zeros to that or we walk! You're going to do his laundry? I've got to find a way to escape.
          </v-card-text>
        </v-slide-y-transition>
      </v-card>
    </v-flex>

v-card-action는 btn등 action이 동작하는 곳인거 같다. 

v-card-text=> 카드에서 텍스트를 넣는 곳인거 같다.

v-card-primary-title은 뭘까?

모르겠으면 직접 치고 CSS를 보면 된다 . 인성이 행님처럼 ..!!! F12를 누르고 보라.