새로운 강의는 이제 https://memi.dev 에서 진행합니다.
memi가 Vue & Firebase로 직접 만든 새로운 사이트를 소개합니다.
NEMVV 0 vuetify로의 전환
이 강좌는 종료되었습니다.
새로운 강좌로 시작하세요~
모던웹(NEMV) 제작 강좌
새로운 css framework인 vuetify를 도입했습니다.
그래서 NEMBV(Node Express Mongo Bootstrap Vue) -> NEMVV(Node Express Mongo Vue Vuetify) 로 이전하며 깃헙 리포를 추가했습니다.
개요
bootstrap3(이하 bs)버전을 오랫동안 쓰며 너무나도 익숙해져버렸습니다.
왠만한 클래스명과 태그는 어느 순간 부터는 외워버렸는지 그냥 술술 써지는 정도가 되었습니다.
작년만해도 bootstrap4는 계속 알파 단계였고 사용자들은 느릿한 버전업이 원망스러웠지만 딱히 갈곳이 없어서 bs3를 사용할 수 밖에 없었던 것 같습니다.
비로소 bs4가 나왔고 불편하다 생각했던 기능들이 많이 개선되었습니다.
마침 vue 스터디중에 bs+vue 가 있길래 덥썩 물어버렸죠..
bs4의 문제점
아쉬웠던 것들은 bs3를 의존했던 몇몇 필수 라이브러리들 인데요..
그 중 DatetimePicker는 너무도 잘 사용하는 라이브러리인데 jquery에 bs3 기반이라 사용하기가 어려워졌습니다.
그 이유중 가장 큰 것은 bs4가 내장 icon을 빼버려서인데.. DatetimePicker에서 아이콘만 뺀 버전으로 사용은 가능했으나 역시 찜찜한 느낌이었습니다.
그 외에도 사이드바(어드민 패널류에 대부분 좌측사이드에 붙어 있는 숨김/비숨김 메뉴)를 구하기가 어려워서..
상용 어드민 패널을 구매할지 직접 구현할지를 고민할 지경에 이르렀습니다..
직접 구현해보니 sass니 css니 너무 많은 스터디와 이해도가 필요했습니다…
꾸역꾸역 구현은 했으나 모바일 버그도 좀 있고.. 답답했습니다.
물론 시간이 지나면서 npm에는 좋은 애드온들이 속속 나오겠죠..
bs4는 분명 훌륭한 프레임워크입니다.
하지만 저처럼 풀스택을 다 진행해야하는 입장에서는 아이콘조차 기본 내장하지 않은 bs4가 조금 불친절할 수 있습니다.
vuetify의 발견
여기저기 찾아보던중 vuejs-korea에서 어느날 vuetify라는 것을 알게 되었고..
들어가보니….
원하던 모든 것이 여기있었습니다.
bs의 grid시스템, modal form등이 상당히 진보된 형태로 구현되어 있었습니다.
meterial 구성의 화면으로 아이콘부터 원하던 피커에 사이드바 까지 전부 있는데다가.. 100%는 아니지만무려 한글 레퍼런스..사이트였습니다.
vuetify 제작자님, 그리고 paul님 감사드립니다.
업무적으로 이미 많은 강을 bs로 건너버렸지만..
역시 vuetify를 배우는데는 생각보다 어렵지 않았습니다.
문제라고는 디자인 감각이 떨어지는 자신의 문제 뿐..
새프로젝트를 시작해버렸습니다.
과정
기존 프로젝트를 vuetify로 마이그래이팅해서 우선 게시판을 다시 구현했습니다.
그리고 NEMVV 구현 과정을 다시 포스팅하려 합니다.
다시 첨부터 백엔드 부터 써야하지만.. 프론트 말고는 내용이 다 비슷하니 가급적 NEMBV 과정에서 백엔드 과정(api/db등)을 이해하고 오셔야합니다.
기존 nembv 과정: https://fkkmemi.github.io/nembv/nembv-00-intro/
설치
vuetify 의존 요소와 함께 설치.. 아래 링크로 대신합니다.
저의 경우 전부 엔터.. 엔터로 기본 설치 해서 시작했습니다.
vuetify+webpack 설치: https://github.com/vuetifyjs/webpack
인증 구현
지난번 단순히 토큰 인증만 했는데 이번에는 유효기간이 만료 임박 했을 때 재인증 토큰 전송 및 버그 픽스를 했습니다.
기존 nembv 인증: https://fkkmemi.github.io/nembv/nembv-20-authorization-token/
게시판 구현
vuetify를 이용해 게시판을 구현하고 인증된 회원만 글쓰기가 가능하게 만들었습니다.
학습과 구현을 위해 대충 붙힌 ui들이니 적절한 것으로 바꾸시는 게 좋을 것 같습니다.
소스
https://github.com/fkkmemi/nemvv.git
시연영상
로드 되는 과정을 보기 위해 느린 데이터베이스로 테스트 해봤습니다.
테스트 사이트
커뮤니티 공개
클리앙 팁과강좌
댓글남기기