React vs Vue, Quasar, VitePress, naive ui

React VS Vue

리엑트나 뷰 중 어떤걸 배워야 좋을까요? 개인적으로 오랫동안 개발을 해오다 보니 어떤 언어든지 크게 중요하다고 생각하지 않습니다. 특히나 리엑트나 뷰 둘다 자바스크립트를 기반으로 한 언어라 더더욱 그런듯 싶습니다.

 

저 같은 경우 본업이 FE 개발은 아니지만... 회사 업무는 리엑트 아르바이트나 개인 프로젝트는 뷰를 이용하고 있습니다.

이유는 여러가지가 있겠지만, 회사업무에서 리엑트를 사용하는 이유는 대부분의 회사 FE개발팀이 리엑트를 사용하고 있는데 있으며, 개인 프로젝트에 뷰를 사용하는 이유는 가볍게, 빠른 개발을 하기위 함입니다.

 

 

Quasar framework (Vue)

6년전쯤 아르바이트를 하다가 React 스터디 하고 개발을 진행하다가 Vue 의 UI 프레임웍인 vuetify 를 접하게 되고 개발의 편함으로 인해 여러가지 UI 프레임웍을 스터디 하게 됩니다.

 

https://vuetifyjs.com/en/

 

Vuetify — A Vue Component Framework

Vuetify is a no design skills required Open Source UI Component Framework for Vue. It provides you with all of the t...

vuetifyjs.com

 

 

이후 element plus / ant design 를 거쳐 2년 전 부터는 Quasar 를 주로 사용하고 있습니다

 

https://quasar.dev/

 

Quasar Framework - Build high-performance VueJS user interfaces in record time

Developer-oriented, front-end framework with VueJS components for best-in-class high-performance, responsive websites, PWA, SSR, Mobile and Desktop apps, all from the same codebase. Sensible people choose Vue. Productive people choose Quasar. Be both.

quasar.dev

 

 

최근 사용중인 Quasar 의 경우 UI 프레임웍이라기 보단 그냥 프레임웍으로 보는게 맞는것 같습니다.

빌드환경 / 패키지 환경 등 여러가지를 아주 손쉽게 편하게 작성할수 있도록 지원해 줍니다.

 

VuePress / VitePress

최근 github pages 에 과거 진행하였던 프로젝트 정리하던 과정에서 jekyll 테마를 뭘로 할까 아니면 리엑트나 뷰로 직접 개발할까 고민하다가 알게 되었습니다.

 

https://vitepress.dev/

 

VitePress | Vite & Vue Powered Static Site Generator

VitePress Vite & Vue Powered Static Site Generator Markdown to Beautiful Docs in Minutes

vitepress.dev

 

 

naive ui

VitePress 를 커스트마이징 할수 있는 UI 프레임웍이 있을까 고민하다가 찾은 UI 프레임웍입니다.

기본적으로 Vue3 에 UI 프레임웍입니다.

Vue 가 중국쪽에서 많이 쓰이는지 대부분에 UI 프레임웍은 대부분 중국 개발자들이더군요.

특히나 Quasar 는 프로젝트 기본 템플릿이 잘되어있어서 바로 개발을 시작해도 되지만 naive ui 는 컴포넌트 사용예만 있네요.

 

https://www.naiveui.com/en-US/os-theme

 

Naive UI

 

www.naiveui.com

 

 

naive ui 예제

일단 저는 vue3 / vue-router / pinia / vite / eslint / prettier / typescript 를 기본으로 개발환경을 사용중입니다.

그래서 어제 밤에 급하게 예제코드를 작성해봤습니다. 하다보니 역시 이런걸 신경안쓰는 Quasar 편하긴 하네요. 

 

https://github.com/goldtagworks/naive-ui-vite-example

 

GitHub - goldtagworks/naive-ui-vite-example: naive-ui example

naive-ui example. Contribute to goldtagworks/naive-ui-vite-example development by creating an account on GitHub.

github.com

 

그럼에도 naive ui 를 스터디하는 이유는? 

몇몇 컨트롤이 이뻐서...;; 에요. 그리고 앞으로 github 문서는 다 vitepress 로 정리하려고 하는데 그때 쓰려구요.

배우는데 시간이 들뿐이지 돈은 안들잖아요.

 

 

포스팅 이후 github pages 에서 사용가능한 프레임웍을 보니 엄청 많네요.

찾아보니 역시나 리엑트 기반에 프레임웍이 많군요