[VUE] vuetify를 사용하며 기억하고 싶은것들.

2020. 8. 26. 09:20

~~fullstack이지만 backend를 주로 다루는 frondend 초보입니다.~~

vue는 굉장히 쉽다.

react 또한 실무에서 잠시 사용해 보았지만, 변수등을 가지고 놀다보면 vue가 확실히 직관적이고 쉽다.

react를 쓸때 뭔가 신박하고 좋다고 생각했던 jsx는 vue를 쓰다보니 그걸 굳이 왜 그렇게 썻더라...라며 잊게 되었고,

항상 신경쓰며 주의했던 state는 vue를 쓰며 자연히 잊혀져 갔다.

vuetify는 알면 알 수록 편해져가는 중이다.

문서 또한 너무 좋아서 어느정도 vue를 사용만 할 줄알면 아래 문서로 북치고 장구까지 칠 수 있다.

Grid system — Vuetify.js

Vuetify supports the 12 point Material Design grid for laying out and controlling breakpoints for your application.

vuetifyjs.com

** vuetify의 기본은 아래 세 페이지 인것 같다. 개인적으로 기본도 없이 무작정 짜면서 공부하는거 별로 안좋아하는데, 실무를 하면서 새로운 기술을 사용하게 되면 좀 어쩔 수 없이 하게 된다.

그러면 역시나 기본기 부족으로 인해 아래 같은 기본중의 기본이 컴포넌트들이 쌓여가며 개판이 되고, 커질 수록 하위 컴포넌트를 수정하며 해당 컴포넌트를 사용하는 모든 페이지를 수정해줘야하는 일들이 생긴다.

사실 한번 이렇게 일하는거에 맛들인 사람들은 이미 야매로 해봤던 부분이라고 이후에 제대로 다시 한번 학습할 생각을 안하는 경우가 많은데, 그런 사람들이 구성해놓은 화면을 보면 겉보기엔 이쁜데 끼워만춘 식이라, 뭐 하나만 변경해도 오만가지 이상한 일들이 생긴다.

grid : bootstrap의 영향을 많이 받았다고 공식페이지에서 밝히고 있는 만큼 grid는 화면은 12포인트로 구성된다.

spacing : 이 문서 먼저 안보고 layout구성하면 피본다 진짜. padding, margin등을 굉장히 편리하게 구성 가능하다.

flex : grid의 좌우 상하 정렬이라거나, offset등을 간편하게 처리할 수 있게 해주는 문서

style 동적 바인딩 예제

:style="`width: ${this.widthToScroll}px`"

화면크기변경 대응

v-resize="onResize"

refs이용하기 (신중하게)

// 사용할 component에
id="cont" ref="cont"

// script에
this.$refs.~

기억 저장소