Vue.js를 사용하기 위해 기본적으로 필요한 모듈들 사이트와 역할 및 링크 모음

막상 프로젝트를 시작하려니 필요한 모듈들이 생각보다 되게 많았다. 여기에 정리해서 하나하나 써가면서 익혀보도록 하겠다. 일단 express+node.js에 익숙한 상황이기 때문에 거기에 맞춰서 이해하면서 정리해 보았다.

1. Vue cli

 

Vue Cli는 간단하게 프로젝트를 만들어 줄 수 있는 프레임워크다. express와 비슷한 개념인것 같다.

https://cli.vuejs.org/guide/creating-a-project.html#vue-create

Creating a Project | Vue CLI

2. Vuetify

 

Vuetify

Vuetify 를 쓰면 부트스트랩처럼 사용하여 깔끔하게 만들 수 있다.

https://vuetifyjs.com/ko/

Vue Material Design 컴포넌트 프레임워크 — Vuetify.js

 

3. material design icons

 

기본 템플릿 vuetify의 기본 템플릿에 있던 아이콘 파일이다. 여기서 아이콘을 고를 수 있었다.  fontawesome 같은 아이콘을 제공하는 곳이다.

https://materialdesignicons.com/

Material Design Icons

아이콘을 찾은 후

                    <v-icon>{{ item.icon }}</v-icon>
안에 있는 icon 을

mdi-bank-transfer로 바꾸어 주면 아이콘이 바뀐다.

 

 

4. Vuex

vuex는 마치 전역변수와 같은 역할을 해주는 것으로 vuex가 없으면 매번 모든것을 컴포넌트부터 시작해서 호출해 와야 한다. 내가 이해할 때는 DBconfig나 블록체인 접속정보와 같이 공통적으로 담아두고 쓸 부분으로 이해했는데 실제로는 그것보다 더 유용하게 많이 쓰일것 같다. vuex는 필수적으로 쓰는게 좋을것 같다.

 

https://vuex.vuejs.org/kr/

Vuex가 무엇인가요? | Vuex

5. vue Router

페이지를 이동할때 a 태그를 써서 이동할 수도 있지만 vue Router를 사용하여 하게 되면 페이지가 새로 로드되지 않고 기존 데이터를 가져오게 된다. vue의 경우에는 결국 vue 객체안에 모든것이 담겨 있으므로 router로 페이지를 이동하지 않으면 매번 모든 자료가 초기화 되는 문제가 있기 때문에 로그아웃 링크가 아닌 이상 router로 이동시키는것이  나을것 같다.

 

https://router.vuejs.org/kr/installation.html

설치 | Vue Router

 

PS. 이번 프로젝트가 끝나면 vue에 대해서도 유튜브에 올릴 예정이니 2020년 10월 이후에 이 포스팅을 보는 분들은 아래에 가면 영상으로 보실 수도 있을 겁니다 ㅎㅎㅎㅎ

https://www.youtube.com/channel/UCHsRy47P2KlE749oAAjb0Yg?view_as=subscriber

타임해커