반응형 전체 글47 Nuxt3에서 Quasar 사용하기 Quasar는 Vue.js기반의 UI Framework이다. Quasar는 매우 다양한 Components가 있으며, 문서화도 아주 잘 되어있다. Quasar를 사용하게 된 이유와 Nuxt를 기반으로 프로젝트를 만들고 Quasar를 적용하는 방법을 설명하다. Quasar Quasar는 오픈소스 Vue.js 기반의 프레임워크이다. 우리나라에서는 Vue보다는 React의 점유율이 높기 때문에 아마도 Vue기반의 Quasar를 사용하는 케이스가 많지 않을 것이다. 만약 Vue를 사용한다면 Vuetify, BootstrapVue 등 다양한 UI 프레임워크가 있지만, Quasar는 그에 비해 지명도가 약간 떨어지는 느낌이다. 나도 그전에는 거의 못들어봤고 주로 Vuetify를 사용해왔기 때문이다. 하지만 Quas.. 2023. 6. 23. Nuxt 3 에서 더이상 Moment.js 말고 Day.js 사용하자 지금까지 Nuxt 2를 사용하면서 날짜시간을 처리하기 위해 Moment.js를 사용하였다. 하지만 Nuxt 3로 프로젝트를 시작하면서 Nuxt3에서 Moment를 통합가능한 모듈을 찾을 수가 없었고, 대안으로 Day.js를 찾게 되었다. 이에 관련해서 자세한 내용을 정리하였다. Moment.js 개발 종료 충격적이게도 Moment.js가 legacy project 상태로 바뀌었다. 아니 이미 3년전 버전인 2.29.0부터 legacy project 였었다. 그동안 이 사실을 모르고 @nuxtjs/moment 라는 Nuxt 2에서 간단하게 moment를 통합할 수 있는 모듈이 있어서 당연한 듯이 사용했었다. Nuxt 3로 프로젝트를 만들고 Moment.js 모듈을 Nuxt에 통합하기 위해 nuxt-mome.. 2023. 6. 13. Vue.js 강좌 3. 반응성 - 어떻게 자동으로 DOM이 변경될까? Vue의 핵심 기능 중에 하나가 바로 반응성(Reactivity)이다. 반응성이란 상태(State) 변경을 추적하여 DOM을 자동으로 업데이트시켜주는 기능이다. 반응성을 어떻게 활용하는지를 설명하고, 어떤 원리로 이게 가능한지를 설명하겠다. 반응성(Reactivity) 반응성이란 컴포넌트의 상태(State)가 바뀌었을때 자동으로 컴포넌트의 DOM을 변경해주는 것이다. 상태(State)란 쉽게 말해 컴포넌트를 그리는데 연관된 데이터이다. 이 상태 데이터가 변경되면 우리는 컴포넌트의 모습도 바꾸어 줘야 한다. Vue에서는 상태가 바뀔때마다 컴포넌트의 DOM을 우리가 일일이 바꾸어주는 코드를 짤 필요가 없다. Vue가 알아서 자동으로 업데이트를 해주기 때문이다. 이것들 반응성(Reactivity)이라고 하는 .. 2023. 6. 12. Vue Multiple Layout (다중 레이아웃) 적용하기 Nuxt를 사용하면 자동으로 다중 레이아웃이 가능하게 세팅된다. 하지만 Nuxt를 사용안하고 Vue만 사용한다면 이걸 자체적으로 구현해야 한다. 가장 간단하면서도 효율적으로 다중 Layout 구성을 해보는 방법을 Vue 3를 기반으로 설명한다. 우리의 목표는 페이지마다 다른 레이아웃을 선택해서 사용할 수 있도록 하는 것이다. Vue3 기본 프로젝트를 기반으로 여러 개의 레이아웃을 만들고 페이지마다 다른 레이아웃을 어떻게 적용시킬 수 있는지를 코드를 보면서 설명하도록 하겠다. 이해하기 쉽게 최소한의 코드만으로 샘플소스를 만들었다. 프로젝트 구조 기본적으로 Vue 3를 기반으로 프로젝트를 만들었고, 아래와 같이 폴더 구조를 구성하였다. 기본 구조에 layouts, pages 폴더를 추가하였다. 그외에는 Vu.. 2023. 6. 7. 이전 1 2 3 4 5 6 ··· 12 다음 반응형
