vuetify를 사용하기 위해 vue.js를 알아가는 중

어쨌건 시작을 했으니 익히긴 해야겠는데 아무래도 (개인적으로) 프레임워크부터 발을 들이는 건 아닌 것 같아서 vue 관련 서적을 찾아봤지만, 초급, 입문자용 이외에는 딱히 없었습니다. 소문만큼이나 공식 사이트의 가이드가 상당히 잘 되어있다는 증거일지도 모르겠습니다. 해서 그쪽을 내리읽고 있는 중입니다.

한번 책 읽어 보면서 따라 해 봤다고 다 할 줄 알 정도의 천재가 아닌지라 처음부터 다시 읽기 시작했습니다. 어떤 식으로 움직이는 것인지 맛이라도 보자는 취지에서 읽어봤다면 이번엔 일을 해야 하는 관계로 이런저런 조사를 하면서 좀 더 웹을 참고하며 공부 하고 있는 중입니다.

이미 사용하기로 되어 있는 vuetify라는 프레임워크가 정해져 있지만, 시간은 좀 걸리더라도 우선은 vue.js의 기본문법을 알아두고 시작해야 할 것 같아 기초학습 중입니다.

component, template, mixin, v-model, v-if, v-for...

뭔가 많이 있습니다.

우선 현시점에서 장점이라고 할 경우 떠오르는 건

컴포넌트별로 관리할 수 있는 부분이 될 것 같습니다.

하나의 파일에서 HTML, JAVASCRIPT, STYLE을 관리하고 있기 때문에 수정이 필요한 경우 다른 파일을 신경 쓸 필요가 없을 것 같습니다. scss를 사용할 경우, mixin을 적절히 사용하면 공통으로 사용되는 것도 활용 가능하고...

문득 드는 생각은

마크업 단계에서는 굳이 다른걸 신경 쓸 필요 없이 Componet를 의식한 구조, 예를 들면 Atomic 디자인 방법론을 기초로 마크업을 한다면 상관없을 것 같다는 생각인데요. 1차적으로 마크업이 완성된 상태에서 2차적으로 vue에 맞게끔 v-if, v-for, v-model 등을 적절히 사용하여 최적화시키는 과정을 거쳐도 문제는 없을 것 같다는 생각이 들어서 입니다.

물론, 처음부터 의식해서 만들면 제일 좋겠지만요.

vuetify의 템플릿화 되어있는 문법이랄까, 이미 정해져 있는 v-layout, v-flex, v-list등 치환자를 사용해도 좋겠지만 이럴 경우 태반이 div로 만들어지는 것을 확인할 수 있었습니다. tag="header", tag="section" 같은 이른바 html5에서 정의되어 있는 tag에 대해서는 tag를 div대신 치환시켜주긴 합니다. 역시 기본적으로 vue를 알고 사용해야 이런 부분을 최대한 깔끔하게 정리할 수 있을 것 같다는 생각이 듭니다.

주변에서는 쉽다고들 하지만, 익숙하지 않은 새로운 이 길은 갈길이... 멀게 느껴집니다..