Vue.js 삽질기 (feat Vuetify)

September 28, 2020

배경

최근 SPA(single page application)를 만들어야 하는 일이 생겼다. 전에는 angula를 사용했었는데, 사용한 지 오래되기도 했고 그 동안 버전이 올라갔기 때문에 다시 시작할 엄두가 나지 않았다. 상대적으로 가볍고 쉽다고 하는 vue.js에 관심을 두고 있었는데 이 참에 사용해 보기로 했다.

vue.js가 완전히 처음은 아니었다. 일전에도 이를 사용해 본 경험이 있다. 하지만 이번에는 vue-cli를 이용해 vue 생태계를 적극 사용해 보기로 했다.

vue.js에 대한 강의나 사용법에 대한 컨텐츠는 인터넷에 많은 편이다. 이 글에서는 이번에 vue.js로 SPA를 만들어 deploy 할 때까지 만났던 여러가지 issue들과 그 해결책을 기록해 둔다.

참고로 이번 프로젝트의 결과물은 Every Formula이다.

도움 받은 강의

시작하기 전에 ‘맨땅에 개발하기’의 강의 동영상을 먼저 시청했다. front-end 개발에 대한 기본적인 내용을 안 상태에서 vue.js를 알고자 한다면 나처럼 도움을 받을 수 있다.

아울러 T아카데미에 있는 ‘토크ON 60차. Vue.js 개발 입문’도 보았다. 앞의 강의 보다는 더 초보자를 대상으로 하고 있다. 최근 front-end 상황을 이해하는데 도움을 준다. 관련 자료는 github repo에서 볼 수 있다.

Tech Stack

하나의 app을 만들기 위해서는 생각보다 많은 층차의 기술들이 필요하다. 이번 app 개발에 사용된 것은 아래와 같다.

OS

• Windows WSL1 ubuntu 18.04

IDE

• visual studio code aka VScode ( extension: Vetur, ESLint )

Language

• Nodejs 14.5 with NVM ( nvm으로 node를 설치할 것을 권장함 )
• NPM ( node를 설치하면 자동으로 설치됨 )

Framework

• Vue 2.x
• Vue-cli ( webpack 포함됨 )
• addons
  • Vuetify
  • Vue-router

npm install -g @vue/cli
vue add vuetify
# vue add axios

Server

• Netlify

OS : WSL

WSL에 대해서는 WSL(Windows Subsystem for Linux)에 대하여를 참고하자.

IDE : VSCode

linux 기반의 WSL에서 어떻게 윈도우 프로그램인 vscode를 사용하느냐? MS에서 영리하게도 이런 경우를 상정해 두었다. 윈도우 환경에서 VScode를 설치 했다면, wsl에서 해당 작업 폴더로 이동한 뒤 code .라고 입력해 보자. 알아서 VScode 창이 뜬다. 내부적으로 wsl에서 서버를 돌리고 VScode가 클라이언트 역할을 수행한다. 그래서 이미 설치한 extension의 경우에도 linux용으로 다시 설치해야 할 수 있다. 이 점 참고하시라. 더 상세한 과정이 필요하다면 이 글을 보시라.

Language : Javascript ( Node )

Node, Ruby, Python 등 버전에 따라 의존성이 다른 언어들의 경우, 그냥 설치하면 나중에 후회할 수 있다. 여러 버전을 독립적으로 설치할 수 있는 version manager를 통해 설치하는 편이 좋다. node의 경우, NVM이 있으니 이를 통해 설치하자.

Framework : Vue, Vue-cli

Vue 3.x가 나왔지만 Vue-cli에서는 2.x를 지원하므로 2.x를 사용하였다.

원래 css framework로 bootstrap을 사용해 왔다. 그런데, vue-cli를 사용하다보니 vue에 최적화된 vuetify를 알게 되었다. vue에 최적화 되어 있기 때문에 매우 편리했고 기능도 훌륭했다.

Server : Netlify

static page를 서비스할 때는 무료이면서 github과 연동되는 github-page를 사용해 왔다. 하지만 이번에는 netlify를 알게 되어 사용해 보았다. git repo에서 코드를 가져와 빌드와 배포까지 수행해 주기 때문에 초기에 설정을 해 놓고, code 수정 시에는 git repo에 push 해주기만 하면 된다. private repo에서도 서비스가 가능하다는 점, build 결과를 관리할 필요가 없다는 점이 github-page에서 보다 유리했다.

다만 무료 plan에서는 페이지 접속 속도가 느린 편이다. 경험상 1MB 이상의 데이터를 전송해야 하는 경우라면 페이지가 로딩되는 데 매우 많은 시간이 걸린다. 전송량이 많은 app을 서비스 하기 위해서는 데이터 파일을 다른 서버에서 받든지 유료 플랜을 써야 할 듯하다.

배포까지의 Issue와 해결책

프로젝트 생성 및 관리 ( feat vue-cli )

프로젝트를 처음 기획할 때 이렇게 생각했다.

Vue, bootstrap, webpack 이런 tech stack들을 어떻게 잘 정리해서 프로젝트를 관리해야 하지?

각각의 tech를 설명하는 문서들은 많지만 현업에서 이를 어떻게 조화롭게 사용하는가에 대한 설명은 막상 찾아보기 쉽지 않다. 하지만 걱정하지 말자. 그냥 Vue-cli를 사용하면 된다. Vue-cli가 webpack 뿐만 아니라 필요한 여러가지 작업들을 편리하게 해준다. 그러므로 그냥 Vue-cli를 사용하자.

Vue-cli 초기 설정을 변경해야 할 경우

Vue-cli로 프로젝트를 생성할 때 여러가지 옵션을 묻는다. 이 때 잘 답변하지 않으면 나중에 피곤해 질 수 있다. 만약 몇 가지 plugin 설치를 빼먹었다면 어떻게 해야 할까. 추후에 vue-cli나 npm을 이용하여 추가할 수 있다.

vue-router의 경우에는 아래와 같다. 더 자세한 것은 공식문서를 보자. 주의사항! 이렇게 하면 App.vue가 갱신되므로 먼저 이를 백업 해 두어야 한다.

vue add router

환경 변수 설정

환경변수를 잘 사용하면 보안을 유지하거나 개발 과정의 편리하게 하는데 도움이 된다. 개발 환경에 필요한 상수값과 배포 환경에 필요한 상수값이 다른 경우 이를 사용하면 편리하다. project root folder에 .evn, .env.development, .env.production과 같이 파일을 만들고 그 안에 key-value 형태로 값을 선언해 두면 된다. 자세한 것은 vue-cli 공식문서에 잘 설명되어 있다.

Vue component 사이의 data 및 event의 전달

내용이 길기 때문에 따로 정리 했다. Vue component 사이의 data 및 event의 전달

Vuetify의 소소한 문제들

Vuetify는 Vue를 전제로 한 style library이다. vue를 위한 bootstrap이라고 할 수 있다. autocomplete, lazy loading과 같이 직접 구현하려면 어렵지만 꼭 필요한 좋은 기능이 많이 구현되어 있었다. 문서가 잘 되어 있지만, 정확하게 어떤 의미인지 이해하기 어려운 부분도 있었다. 부딪혔던 몇가지 문제와 해결책을 적어 본다.

내용이 길어 Vuetify의 소소한 문제들로 따로 정리했다.

배포하기 (feat Netlify)

Netlify 삽질기에 따로 정리했다.

배포 이후의 Issue와 해결책

SPA(single page application)는 front-end의 로딩이 큰 만큼 페이지 로딩이나 렌더링, 사용자와의 상호작용에서 지연이 있을 수 있다. 따라서 이런 경우에는 다음과 같은 문제를 살펴보자.

lazy-loading

vue router를 사용하는 경우, 첫페이지에서 모든 router 정보를 모두 불러들이게 된다. 따라서 각 route 정보 로딩을 route가 호출 되었을 때로 미루면 첫페이지 로딩 속도를 단축시킬 수 있다. 자세한 것은 Vue Router 공식문서를 보라.

요약하면 다음과 같다.

// src/router/index.js
const Foo = () => import(/* webpackChunkName: "group-foo" */ "./Foo.vue")
const Bar = () => import(/* webpackChunkName: "group-foo" */ "./Bar.vue")
const Baz = () => import(/* webpackChunkName: "group-foo" */ "./Baz.vue")

const router = new VueRouter({
    routes: [
        { path: "/foo", name: "Foo", component: Foo },
        { path: "/bar", name: "Bar", component: Bar },
        { path: "/baz", name: "Baz", component: Baz },
    ],
})

Big Data의 처리

Vue project에서 많은 양의 데이터를 가져와 다루어야 할 경우, 메모리 사용량이 크게 증가하여 브라우저 속도를 저하시킬 수 있다. 이에 대해서는 Vue에서 대용량 데이터 다루기에 따로 정리하였다.