2022-02-02-TIL

Today I Learned

Vue Admin Dashboard

관리자 화면(어드민 대시보드)은 표, 검색 필터, 차트, 폼, 사이드 메뉴처럼 반복되는 화면이 대부분이다. 그래서 처음부터 만들기보다 레이아웃과 컴포넌트가 미리 갖춰진 템플릿을 쓰는 경우가 많다. 예를 들어 Vuexy는 Vue 3와 UI 컴포넌트 프레임워크 Vuetify 3 위에 만든 관리자 템플릿이다.

템플릿을 고를 때는 화면이 예쁜지보다 다음을 먼저 보는 편이 낫다.

• 내가 쓸 Vue 버전과 UI 라이브러리(Vuetify, Element 등)를 기반으로 하는지
• 라이선스가 상용 프로젝트에서 쓸 수 있는 조건인지

• 업데이트가 계속되는지

• https://pixinvent.com/demo/vuexy-vuejs-admin-dashboard-template/landing/
• https://vuejsexamples.com/22-best-vuejs-admin-dashboard-templates/
• https://code.tutsplus.com/articles/best-modern-javascript-admin-templates-for-your-react-angular-and-vuejs-apps–cms-32099

---

Vue.js vs React

두 도구 모두 컴포넌트 단위로 UI를 만든다는 점은 같다. 차이는 화면을 기술하는 방식과 상태 변화를 반영하는 방식에서 드러난다.

Vue 공식 소개는 Vue를 표준 HTML, CSS, JavaScript 위에 선언적이고 컴포넌트 기반인 프로그래밍 모델을 얹은 프레임워크로 설명한다. HTML을 확장한 템플릿 문법으로 화면을 쓰고, JavaScript 상태가 바뀌면 Vue가 변화를 자동으로 추적해 DOM을 갱신한다(reactivity). 컴포넌트는 템플릿, 로직, 스타일을 한 파일에 담는 .vue 싱글 파일 컴포넌트로 쓰는 경우가 많고, 로직은 Options API나 Composition API 중 하나의 스타일로 작성한다.

React 문서는 React 앱이 컴포넌트로 이루어지고, 컴포넌트는 마크업을 반환하는 JavaScript 함수라고 설명한다. 마크업은 JSX로 쓰기 때문에 조건 분기나 반복을 템플릿 문법이 아닌 JavaScript 문법 그대로 표현한다.

그래서 Vue는 HTML 템플릿에 익숙하면 읽기 쉽고, React는 화면 로직까지 JavaScript로 다루는 쪽이라 표현이 자유롭다. 어느 쪽이 낫다기보다 팀이 익숙한 방식과 이미 쓰는 생태계를 기준으로 고르는 문제에 가깝다.

• https://blog.naver.com/PostView.nhn?blogId=jhc9639&logNo=221679135008
• https://calvinsnax.com/blog/43842
• https://codingapple.com/unit/why-use-vue-over-react/

참고한 자료외부 출처 3

외부 출처

• VuexyPixInvent
• Introduction - Vue.jsvuejs.org
• Quick StartReact