구르는 돌에는 이끼가 끼지 않는다

vuex 사용하기

vuex 기능 중 하나는 store.js에 저장된 getters나 state 값을 다른 컴포턴트에서 사용가능하게 한다.

//store.js파일 
state: { 
    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: state => {
      return state.allUsers.length      
    },
    countOfSeoul: state =>{
      let count = 0
      state.allUsers.forEach(user => {
        if(user.address === 'Seoul') count++
      })
      return count
    },
    percentOfSeoul: (state, getters) => {
      return Math.round(getters.countOfSeoul/getters.allUsersCount * 100)
    }
  }

store.js파일을 자식 컴포넌트에서 사용할 수 있도록 하기 위해서는 다음 코드를 추가합니다.

import { mapGetters, mapState } from 'vuex'

export default {
  data() {
    return {
      
    }
  },
  computed:{
    ...mapGetters({
      count : 'allUsersCount', 
      seouls : 'countOfSeoul',
      percent : 'percentOfSeoul'
    }), 
    ...mapState(['allUsers'])
  },
  
  ...

위와 같이 store.js에 있는 getter, state에 정의된 값을 사용하기위해서는 import를 추가합니다. 그리고 computed를 내에 ...mapGetters, ...mapState function을 이용하여 store.js에 정의 된 값을 사용하고, ...mapGetters내에서 해당 값을 key 값으로 새롭게 정의 가능합니다.

  <h1>All Users({{ count }})</h1>
    <h1>Seoul Users : {{ seouls }} ({{ percent }}%)</h1>
    <v-list two-line>
      <v-list-tile 
        v-for="(user, index) in allUsers"
        :key="index"
        avatar
      >

DOM 태그 부분에서는 최종적으로 vuex를 사용해서 가져온 값을 바인딩 시켜줍니다.

[출처]

맨땅에 개발하기

https://www.youtube.com/watch?v=wKMQ0EmpyBo&list=PLZzSdj89sCN292abcbI3utND8pA1T1OyB&index=6

 크롬 개발자도구 색상 변경하기

크롬(Chrome) 으로 작업을 하다보면 개발자도구의 흰 바탕색에 눈이 쉽게 피로해지는 경우가 많으며 또한 시력이 좋지않는 사용자의 경우도 소스를 보기에 부담스러울 때가 있습니다.  그래서 오늘은 크롬(Chrome)  개발자도구의 색상반전 설정을 알아보도록 하겠습니다.

1. 크롬을 열어 키보드의 F12키 또는 오른쪽 마우스>검사 를 실행합니다.

2. 개발자도구의 맞춤설정 및 제어(옵션)을 선택 후 settings를 실행합니다.

3. 메뉴가 나타나면 Appearance의 Theme를 Dark로 변경합니다.

4. 이미지와 같이 화면이 반전되어 나타납니다.

하얀색 바탕을 원하신다면 모든 과장을 다시 실행하시고 'Dark'를 'light'로 변경하시면 이전 상태로 돌아옵니다.

[출처]https://accessibility.tistory.com/3