ice rabbit programming

본인은 Vue에서 UI 프레임워크로 Vuetify를 애용하고 있다. 물론 본질적으로는 Vue의 컴포넌트, 이벤트 등을 이용하여 구현된 것이기 때문에 타 프레임워크를 사용하거나, 직접 만들어도 원리는 같다. 입력을 위해서 v-text-field 등을 사용하는 경우가 많은데, 유효성 검사를 위해서 rules 속성을 사용하는 경우가 많다. 가장 많이 사용하는 비었는지 여부부터 해서, 정규식을 사용하기도 한다. 흔히 회원 가입 창에서 보는, 맞지 않는 규격일 경우에는 빨간 테두리가 쳐지면서 에러 문구가 아래에 출력되는 것이 디폴트 동작이다. (참고로 rules 속성에는 boolean 함수/변수들을 넣을 수 있으나, async-await(Promise)는 넣을 수 없다. 우회하는 방법이 있으나 이는 추후에 시간이..

이전 글에서 vuetify 설치에 대해 다루었다. vuetify에는 여러 기능이 있는데, 그 중에 theme 적용 및 색상 지정에 대해서 다루려 한다. 공홈 설명은 v2.vuetifyjs.com/en/customization/theme/를 참고하자. Theme — Vuetify.js Setup your application's theme and supplemental colors in a flash. v2.vuetifyjs.com vuetify를 설치한 직후라면 src/plugins/vuetify.js가 단순히 new Vuetify()를 export하는 상태일 것이다. 별도의 설정을 해주지 않아도 light theme가 적용되며, primary, secondary, error, success 등 기본적인..

기본적으로 웹 페이지에서는 CSS를 적용하여 스타일을 입힐 수 있다. 우리가 보는 세련된 페이지들도 궁극적으로는 CSS를 태그에 적용한 것이다. Vue.js에서는 UI 프레임워크를 적용하여 이러한 CSS 적용에 대한 수고를 덜 수 있다. (단, 2020년 12월 현재 기준으로 Vue 3.0 버전에 대하여는 아래 UI 프레임워크가 지원하지 않는다!!!) 여담으로, 필자가 typescript의 공식적인 적용을 위해 Vue 3.0으로 새 프로젝트를 시작하려 했다가, UI 프레임워크들이 지원하지 않아 2.6대로 회귀했다. 프론트엔드 경험이 많은 것도, 디자인에 자신이 있는 것도 아니기에.. UI 프레임워크 많이 쓰는 UI 프레임워크들은 아래와 같은 것들이 있다. - BootstrapVue : bootstrap-..