🎄메리크리스마스🎄

1. Vue란?

Vue는 Facebook의 React, Google의 Angular와 더불어

대표적인 Single Page Application(SPA) 프레임워크다.

다른 프레임워크나 라이브러리에 비해 학습 곡선이 낮아

누구나 쉽고 빠르게 배울 수 있는 프레임워크라고 하지만

뭐... 세상 만물이 그렇듯이 처음 접하면 누구나 어렵기마련 ㅎ

2. 버전

Vue는 Evan You라는 개발자에 의해 2014년 발표되었고, 발표된 이후로 현재까지 꾸준히 릴리즈 되고 있다.

Vue 2.0은 2016년에 Ghost in the Shell이라는 코드명으로, 2.6은 2019년에 Macross라는 코드명으로,

그리고 드디어 3.0은 2020년 9월 19일에 One Piece라는 코드명으로 공개되었다.

현 시점의 최신 버전은 3.2.37이다.

3. 기존 버전에서 달라진 점

Vue 3는 기존 버전보다 성능이 개선되었고 여러가지 기능이 업데이트 되었다.

많은 업데이트들 중에 가장 핵심적인 4가지만 정리했다 🎁

3.1. Compisition API 기본 지원

첫 번째는 Composition API를 기본적으로 지원한다는 점이다.

// Vue 2
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      // login method
    }
  },
  computed: {
    lowerCaseUsername() {
      return this.username.toLowerCase()
    }
  }
}

Vue 2에서는 Component의 옵션을 Data, Methods, Computed, Watch로 구분했다.

각 특징에 따라 구분되어 있어 프로젝트 초반에는 더 직관적으로 쓸 수 있지만

프로젝트 크기가 커질수록, 코드량이 많아질수록 가독성이 떨어지는 단점이 있었다.

// Vue 3
import { reactive } from 'vue';
export default {
  setup() {
    const state = reactive({
      username: '',
      password: '',
      lowerCaseUsername: computed(() => state.username.toLowerCase()),
    })
    const login = () => {
      // login method
    }
    return {
      login,
      state,
    }
  }
}

Composition API는 이러한 문제를 해결하기 위해 등장하였다.

Data, Methods, Computed 등이 각자 분산되어 담당했던 기능들을 Setup 메서드에 하나로 모으는 것이다.

많은 양의 코드들을 서로의 관련성 따라 개발자 스스로 배치하여, 코드를 더 이해하기 쉽게 하는 것이다.

Vue 2에서도 Composition 라이브러리를 적용해서 똑같은 기능을 할 수 있었지만

Vue 3에서는 Composition API가 기본으로 사용되는 점이 큰 차이점이다.

3.2. Lifecycle 변화

두 번째는 Lifecycle의 변화이다.

// Vue 2
export default {
  created() {
    console.log('created')
  },
  mounted() {
    console.log('mounted')
  },
}

Vue 2에서는 Created, Mounted, Updated 등의 메서드를 사용했다.

그런데 이 메서드들이 Composition API의 Setup 메서드 안으로 들어가면서 명칭 등이 바뀌었다.

// Vue 3
import { onMounted } from 'vue';
export default {
  setup() {
    // ..
    onMounted(() => {
      console.log('onMounted')
    })
    // ...
  }
}

Created는 Setup 메서드 안에서 실행하도록 바뀌었고,

Mounted는 onMounted로, Updated는 onUpdated라는 이름으로 바뀌었다.

위치와 이름이 조금 바뀌었을 뿐 기능은 큰 차이 없다고 보면 된다.

이 외에도 BeforeUnmount, Unmounted등의 내용이 바뀌었는데 자세한 내용은 검색!

3.3. 멀티 루트 엘리먼트

세 번째는 템플릿을 생성할 때 루트 엘리먼트를 여러개 가질 수 있다는 점이다.

Vue 2에서는 템플릿 안에 루트 엘리먼트를 하나만 가질 수 있었다.

하지만 Vue 3부터는 템플릿 안에 여러개의 루트 엘리먼트를 만들 수 있다.

<template>
  <h1>Title</h1> <!-- Vue 2에서는 h1과 div 두개 사용 불가능 -->
  <div>Content</div> <!-- Vue 3에서는 가능 -->
</template>

3.4. IE 지원 중단

마지막으로 더 이상 Internet Explorer(IE)를 지원하지 않는다는 점이다.

꼭 지원해야 하는 상황이라면 이전 버전을 사용해야 한다.

1. Delete Todo 코드 작성하기

먼저 데이터를 store에서 관리 중이니까 actions와 mutations를 작성해야 한다.

// src/store/index.js
mutations: {
    mutationsAddTodo(state, todo) {
      state.todos.push(todo);
      console.log(todo);
    },
    mutationsDelTodo(state, id) {
      state.todos = state.todos.filter((todo) => todo.id != id);
    }
  },
  actions: {
    actionsAddTodo({commit}, todo) {
      commit('mutationsAddTodo', todo);
    },
    actionsDelTodo({commit}, id) {
      commit('mutationsDelTodo', id);
    }
  },

actions에 actionsDelTodo 함수를 작성하고, todo의 id를 받는다.

mutations에 mutationsDelTodo에서는 해당 id가 아닌 것만 가져오는 필터 함수를 짠다.

// src/components/TodoItem.vue
export default {
    props: {
        todo: {}
    },
    methods: {
        ...mapActions(['actionsDelTodo'])
    },
}

TodoItem에 mapActions를 작성하여 store actions와 연결해주고

<!-- src/components/TodoItem.vue -->
<v-btn @click="actionsDelTodo(todo.id)" block color="error">Delete</v-btn>

작성해둔 Delete 버튼에 클릭 이벤트를 추가하고 todo의 id를 넣어주면 잘 작동한다 !

2. Edit Todo 코드 작성하기

이제 Add와 Delete까지 가능하니 Edit 기능만 넣으면

기본적인 TodoList App 작성은 끝이 난다 !

// src/components/TodoItem.vue
<script>
import { mapActions } from 'vuex';

export default {
    props: {
        todo: {}
    },
    data() {
        return {
            editing: null
        }
    },
    methods: {
        ...mapActions(['actionsDelTodo'])
    },
}
</script>

TodoItem에 editing이라는 변수를 하나 선언해둔다.

저걸로 EDIT라는 버튼을 눌렀을 때 편집 박스를 켜고 끄는 상태를 관리할 거다.

<!-- src/components/TodoItem.vue -->
<template>
    <v-container fluid>
        <v-row class="mb-3" justify="center" align="center">
            <v-col cols="4">
                <h3 v-if="!editing">{{ todo.title }}</h3>
                <v-text-field
                    label="Edit"
                    outlined
                    dense
                    hide-details
                    v-else
                ></v-text-field>
            </v-col>
            <v-col cols="1">
                <v-btn @click="editing = !editing" block large color="primary">
                    {{ editing ? 'Save' : 'Edit' }}
                </v-btn>
            </v-col>
            <v-col cols="1">
                <v-btn @click="actionsDelTodo(todo.id)" block large color="error">Delete</v-btn>
            </v-col>
        </v-row>
    </v-container>
</template>

그리고 v-if와 v-else를 사용하여 todo.title을 보여줄 건지,

편집 텍스트 필드를 보여줄 건지 작성한다.

🚨 outlined, dense, hide-details는 v-text-field의 style 속성

v-btn에 text도 editing이 true일 때는 Save, false일 때는 Edit가 뜨게 작성하고

클릭 이벤트를 달아서 누를 때마다 true, false가 바뀌게 작성한다.

🚨 삼항연산자 → 조건 ? true : false

state에 저장해놓고 삭제, 수정을 하려면 사용자 입력값을 받아야 하는데

// src/components/TodoItem.vue
data() {
    return {
        todoText: '',
        editing: null
    }
},

script 안에 data에 todoText를 선언해둔다.

<!-- src/components/TodoItem.vue -->
<v-text-field
    v-else
    v-model="todoText"
    label="Edit"
    outlined
    dense
    hide-details
></v-text-field>

위에서 선언한 todoText를 같은 파일 내의 text field에 v-model로 연결시켜둔다.

그러면 입력값이 v-model로 연결해둔 todoText로 들어가게 된다.

<!-- src/components/TodoItem.vue -->
<v-col cols="1">
    <v-btn @click="modTodo(todo)" block large color="primary">
        {{ editing ? 'Save' : 'Edit' }}
    </v-btn>
</v-col>

아까 만들었던 Save / Edit button에 클릭 이벤트를 modTodo라는 함수에 todo를 넣은 걸로 변경한다.

// src/components/TodoItem.vue
methods: {
    ...mapActions(['actionsDelTodo', 'actionsModTodo']),
    modTodo(todo) {
        this.editing = !this.editing;
        if(this.editing) this.actionsModTodo(todo);
        else todo.title = this.todoText;
    }
},

같은 파일에 mapActions에 actionsModTodo를 추가하고,

modTodo에는 editing을 true, false로 바꿔주는 구문과

if(this.editing)으로 값을 확인하고 actions로 넘어갈 건지,

todo.title을 todoText로만 바꿔줄 건지 비교 작성한다.

// src/store/index.js
mutations: {
  mutationsAddTodo(state, todo) {
    state.todos.push(todo);
    console.log(todo);
  },
  mutationsDelTodo(state, id) {
    state.todos = state.todos.filter((todo) => todo.id != id);
  },
  mutationsModTodo(state, todo) {
    let idx = state.todos.findIndex(x=>x.id == todo.id);
    if(idx > -1) {
      state.todos[idx] = todo;
    }
  }
},
actions: {
  actionsAddTodo({commit}, todo) {
    commit('mutationsAddTodo', todo);
  },
  actionsDelTodo({commit}, id) {
    commit('mutationsDelTodo', id);
  },
  actionsModTodo({commit}, todo) {
    commit('mutationsModTodo', todo);
  }
},

store 내의 actions와 mutations에 Mod관련 함수를 작성한다.

mutationsModTodo에서는 받은 todo의 아이디와 같은 값을 state에서 찾고,

그 Index에 해당하는 todo를 받은 todo로 교체해주면 수정 완료 !

3. 결과

다음은 뭘 만들어볼까 🤔

이전글보기

1. Vuex 추가하기

vue add vuex

서버가 켜져있다면 서버를 종료시키고(VSCode 단축키 : Ctrl + c)

현재 프로젝트에 vuex를 추가한다.

성공적으로 추가되고나면 src 폴더 아래에 store 폴더가 새로 생겨있다.

이제 프로젝트에서 상태관리는 이 store로 하면 된다!

🤔 vuex도 한번 정리해야겠다 🤔

2. Vuex 활용하기

src/store/index.js의 기본 형태는 이렇게 생겼다.

회사에서는 관리해야 할 종류가 많아서 따로 모듈로 빼서

index.js를 통해 관리하는 방식으로 진행중이지만,

지금은 관리 할 데이터 종류가 많지않으니 한곳에서 관리하도록 한다.

// index.js state
state: {
    todos: [
      {
        id: 1,
        title: 'One'
      },
      {
        id: 2,
        title: 'Two'
      },
      {
        id: 3,
        title: 'Three'
      }
    ]
  }

state에 미리 담겨있을 3개의 데이터를 작성하고,

// index.js getters, mutations, actions
getters: {
  allTodos: (state) => state.todos,
},
mutations: {
  mutationsAddTodo(state, todo) {
    state.todos.push(todo);
    console.log(state.todos);
  }
},
actions: {
  actionsAddTodo({commit}, todo) {
    commit('mutationsAddTodo', todo);
  }
}

getters에는 state에 저장된 모든 todos를 가져올 allTodos를 작성했다.

mutations에는 actions에서 넘어온 데이터를 state에 push할 mutationsAddTodo를 작성했다.

actions에는 vue 소스에서 이거 저장시켜!하고 호출될 actionsAddTodo를 작성했다.

commit('mutationsAddTodo', todo)를 실행하면 mutations에 해당 이름의 함수를 실행시킨다.

- mutations에는 순차적인 로직을 작성하고,

  actions에는 비순차적 또는 비동기 처리 로직을 작성한다.

  이 부분도 vuex 정리하면서 다룰 예정!

함수 앞에 mutations와 actions는 알아보기 쉽게 붙여놓은것이므로 생략해도 무방하다.

<!-- src/components/TodoInput.vue -->
<template>
    <v-container fluid>
        <v-row class="mt-6" justify="center">
            <v-col cols="4">
                <v-text-field outlined></v-text-field>
            </v-col>
            <v-col cols="1">
                <v-btn @click="actionsAddTodo('12345')" block x-large color="primary">Add</v-btn>
            </v-col>
        </v-row>
    </v-container>
</template>

<script>
import { mapActions } from 'vuex';

export default {
    methods: {
        ...mapActions(['actionsAddTodo'])
    },
}
</script>

TodoInput에 vuex의 actions를 import 시키면 ...mapActions라는 이름으로 호출할 수 있다.

import 시키지 않더라도 this.$store.dispatch('actionsAddTodo')로 호출 가능하다.

vue → store actions 호출 : dispatch
actions → mutations 호출 : commit

Add 버튼을 누르면 actionsAddTodo를 '12345'라는 데이터를 넣어서 실행시킨다.

mutatilnsAddTodo에서 state todos에 push 시키고 state의 todos를 콘솔로 찍어보면

같이 넘겨줬던 12345가 담겨있는것을 확인할 수 있다.

그렇다면 이제 실제로 사용자가 text-field에서 적은 값을 넘겨봅시다 😘

<!-- src/components/TodoInput.vue -->
<script>
import { mapActions } from 'vuex';

export default {
    data() {
        return {
            todoText: ''
        }
    },
    methods: {
        ...mapActions(['actionsAddTodo'])
    },
}
</script>

먼저 TodoInput script에 사용자 입력값을 받을 빈 todoText를 만들어준다.

<!-- src/components/TodoInput.vue -->
<template>
    <v-container fluid>
        <v-row class="mt-6" justify="center">
            <v-col cols="4">
                <v-text-field v-model="todoText" outlined></v-text-field>
            </v-col>
            <v-col cols="1">
                <v-btn @click="actionsAddTodo(todoText)" block x-large color="primary">Add</v-btn>
            </v-col>
        </v-row>
    </v-container>
</template>

그리고 텍스트 필드 태그에 v-model에 todoText를 넣어준다!

그러면 텍스트 필드가 todoText를 바라보게 되고,

그 값을 버튼을 누르고 actionsAddTodo가 실행될때 같이 넘겨준다.

데이터 입력 후 버튼을 누르고 콘솔에 찍힌 값을 확인해보면 잘 넘어온다!

3. UUID로 ID 부여하기

npm i --save uuid

사용자가 입력하는 todoText는 store에서 title로 관리될 것이고,

ID에는 고유한 key값을 넣기 위해서 UUID를 설치한다.

<!-- src/components/TodoInput.vue -->
<template>
    <v-container fluid>
        <v-row class="mt-6" justify="center">
            <v-col cols="4">
                <v-text-field v-model="todoText" outlined></v-text-field>
            </v-col>
            <v-col cols="1">
                <v-btn @click="addTodo" block x-large color="primary">Add</v-btn>
            </v-col>
        </v-row>
    </v-container>
</template>

<script>
import { mapActions } from 'vuex';
import { v1 } from 'uuid';

export default {
    data() {
        return {
            todoText: ''
        }
    },
    methods: {
        ...mapActions(['actionsAddTodo']),
        addTodo() {
            this.actionsAddTodo({
                id: v1(),
                title: this.todoText
            });
        }
    },
}
</script>

uuid를 import 시켜주고, addTodo()라는 함수를 만들어서,

actionsAddTodo를 실행할때 id와 title을 넣어서 보내주게 작성한다.

버튼 클릭시에도 addTodo가 실행되게 수정해준다.

test1이라는 같은 값을 두번 넘겨줬지만 id는 고유하게 부여되기 때문에

매번 다른 id가 넘어가는것을 확인할 수 있다.

4. Text Field 초기화 및 TodoList, TodoItem 수정

기존에는 Add 버튼을 눌러서 데이터가 넘어가지만 텍스트 필드에 데이터가 그대로 남아있는 상태였다.

하지만 Add 버튼을 누르면 store에 저장이 되기때문에, 텍스트 필드에 데이터를 초기화 시켜줄 거다!

<!-- src/components/TodoInput.vue -->
<v-text-field @change="todoTextChg" :value="todoText" outlined></v-text-field>

먼저 TodoInput.vue에 있는 텍스트 필드 속성을 좀 바꿔준다.

@change="todoTextChg" 속성을 추가해서 텍스트 필드의 값이 바뀔때마다 todoTextChg를 실행시키도록 한다.

// src/components/TodoInput.vue
methods: {
    ...mapActions(['actionsAddTodo']),
    todoTextChg(e) {
        this.todoText = e;
    },
    addTodo() {
        this.actionsAddTodo({
            id: v1(),
            title: this.todoText
        });
        this.todoText = '';
    }
},

methods에 todoTextChg 함수를 하나 만들고 todoText 값을 e로 바꿔준다.

그리고 addTodo가 실행될때 actionsAddTodo가 실행되고나서 todoText값을 빈값으로 바꿔주면

abcd라는 값을 입력하고 Add 버튼을 누르면

콘솔에 찍힌 데이터에 abcd가 찍혀있고

텍스트 필드는 값이 초기화가 된다.

이제 기존에 TodoList.vue에서 하드코딩으로 넣어놨던 데이터를

store getters allTodos를 통해 가져와서 넣어줄거다.

<!-- src/components/TodoList.vue 변경 전 -->
<template>
    <v-container>
        <TodoItem/>
        <TodoItem/>
        <TodoItem/>
    </v-container>
</template>

<script>
import TodoItem from '@/components/TodoItem';

export default {
    components: {
        TodoItem
    }
}
</script>

<!-- src/components/TodoList.vue 변경 후 -->
<template>
    <v-container>
        <v-row v-for="todo in allTodos"
               :key="todo.id"
        >
            <TodoItem :todo='todo'/>
        </v-row>
    </v-container>
</template>

<script>
import TodoItem from '@/components/TodoItem';
import { mapGetters } from 'vuex';

export default {
    components: {
        TodoItem
    },
    computed: {
        ...mapGetters(['allTodos'])
    },
}
</script>

v-container 안에 v-row를 넣어주고, mapGetters로 불러온 allTodos의 수만큼 for문을 돌린다.

allTodos의 수만큼 TodoItem이 나올거고, 자식 컴포넌트인 TodoItem에 todo를 넣어준다.

<!-- src/components/TodoItem.vue -->
<template>
    <v-container fluid>
        <v-row class="mb-3" justify="center" align="center">
            <v-col cols="4">
                {{ todo.title }}
            </v-col>
            <v-col cols="1">
                <v-btn block color="primary">Edit</v-btn>
            </v-col>
            <v-col cols="1">
                <v-btn block color="error">Delete</v-btn>
            </v-col>
        </v-row>
    </v-container>
</template>

<script>
export default {
    props: {
        todo: {}
    }
}
</script>

TodoItem에 props를 만들어줘서 부모 컴포넌트에서 받은 값인 todo를 선언해둔다.

{{ todo.title }}을 적어두면 부모에게 받은 todo의 title을 출력할 수 있게 된다.

5. 결과 🤣

store index.js에 처음 적어둔 One Two Three가 먼저 나오고,

입력한 Four Five도 잘 Add 된다.

삭제 기능은 다음 글에서 😊

1. Vue.js Project 생성

vue create todoapp

미리 Git Clone 시켜놓고 그 폴더 안에 Vue.js 프로젝트를 생성한다.

(Git Clone : GitHub Code 복사 → VSCode에서 Ctrl + Shift + P → Git: Clone → GitHub Code 붙여 넣기)

cd todoapp
npm run serve

프로젝트를 실행시켜보고 실행이 잘 된다면

Defalut 파일 src/component/HelloWorld.vue 파일을 삭제한다.

src/App.vue에 HelloWorld.vue 관련 내용을 다 지운다. (아래 주석 부분)

<!-- src/App.vue -->
<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    // HelloWorld
  }
}
</script>

2. Components 생성 및 import (TodoInput, TodoList, TodoItem)

src/components 아래에 3개의 vue 파일을 만들어주고,

일단 파일 내용은 <h3> 태그로 파일명만 작성을 해둔다.

<!-- src/App.vue -->
<template>
  <div id="app">
    <TodoInput/>
    <TodoList/>
  </div>
</template>

<script>
import TodoInput from '@/components/TodoInput';
import TodoList from '@/components/TodoList';

export default {
  name: 'App',
  components: {
    TodoInput,
    TodoList
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

TodoInput과 TodoList 파일은 App.vue에 import 시켜주고,

<!-- src/components/TodoList.vue -->
<template>
    <div>
        <h3>Todo List</h3>
        <TodoItem/>
        <TodoItem/>
        <TodoItem/>
    </div>
</template>

<script>
import TodoItem from '@/components/TodoItem';

export default {
    components: {
        TodoItem
    }
}
</script>

<style>

</style>

TodoItem은 TodoList에 import 시켜준다.

일단 예시로 TodoItem을 3개 표시해줘 봤다.

저렇게 import 시키고 실행을 하면 이런 화면이 출력될 거다.

3.  Vuetify 추가 후 UI 수정

이제 각자 파일명이 아닌 역할을 주기로 😉

먼저 TodoInput.vue 파일에 <input>과 <button>을 생성한다.

<!-- src/components/TodoInput.vue -->
<template>
    <div>
        <input type="text"/>
        <button>Add</button>
    </div>
</template>
<!-- script, style 그대로 -->

TodoList.vue에는 <h3> 제목 태그를 지워주고 <TodoItem>만 담는다.

<!-- src/components/TodoList.vue -->
<template>
    <div>
        <TodoItem/>
        <TodoItem/>
        <TodoItem/>
    </div>
</template>
<!-- script, style 그대로 -->

TodoItem.vue에는 <button> 두 개와 기타 등등 생성 😋

<!-- src/components/TodoItem.vue -->
<template>
    <div>
        <h5>#1</h5>
        <h3>Todo Title</h3>
        <button>Edit</button>
        <button>Delete</button>
    </div>
</template>
<!-- script, style 그대로 -->

이렇게 나오면 된다.

근데 UI가 마음에 안들어서 이제야 Vuetify 추가... ^^

Vuetify 추가하면서 App.vue가 아예 바뀌어버려서

App.vue에 import 했던 거 다 사라짐!

(vuetify 추가할 거면 미리 하기 🙄)

파일들을 Vuetify Tag로 바꾸고 코드를 다시 수정해보겠습니다 ,,, ^^

<!-- src/App.vue -->
<v-main>
  <TodoInput/>
  <TodoList/>
</v-main>
.
.
.
<script>
import TodoInput from '@/components/TodoInput';
import TodoList from '@/components/TodoList';

export default {
  name: 'App',

  components: {
    TodoInput,
    TodoList
  },

  data: () => ({
    //
  }),
};
</script>

<!-- src/components/TodoInput.vue -->
<template>
    <v-container fluid>
        <v-row class="mt-6" justify="center">
            <v-col cols="4">
                <v-text-field outlined></v-text-field>
            </v-col>
            <v-col cols="1">
                <v-btn block x-large color="primary">Add</v-btn>
            </v-col>
        </v-row>
    </v-container>
</template>

<script>
export default {

}
</script>

<style>

</style>

<!-- src/components/TodoList.vue -->
<template>
    <v-container>
        <TodoItem/>
        <TodoItem/>
        <TodoItem/>
    </v-container>
</template>

<script>
import TodoItem from '@/components/TodoItem';

export default {
    components: {
        TodoItem
    }
}
</script>

<style>

</style>

<!-- src/components/TodoItem.vue -->
<template>
    <v-container fluid>
        <v-row class="mb-3 text-center" justify="center">
            <v-col cols="1">
                #1
            </v-col>
            <v-col cols="2">
                Todo Title
            </v-col>
            <v-col cols="1">
                <v-btn block color="primary">Edit</v-btn>
            </v-col>
            <v-col cols="1">
                <v-btn block color="error">Delete</v-btn>
            </v-col>
        </v-row>
    </v-container>
</template>

<script>
export default {

}
</script>

<style>

</style>

저장 후 실행하면 Vuetify Tag가 적용된 화면을 볼 수 있다.

다른 UI 작업은 하지 않고, 예제라 간단한 Vuetify 속성만 사용했다.

다음 글은 Vuex 연결해서 store 관리까지 😊

1. Vue 설치

npm install -g @vue/cli

위 명령어로 vue 설치되어 있는 상태에서 Vuetify 추가해서 사용해보기!

2. Vuetify 추가

npm install vuetify

node_modules 밑에 vuetify가 생성된다.

이제 vue에 추가해서 사용하면 된다.

3. Vuetify 사용 설정

vue add vuetify

src/main.js 파일의 변경된 부분

src/plugins/vuetify.js 파일 생성

틈틈이 Vue 관련 글도 올려야지 🤩