Vue.js 공부하기

vue 공부한 내용을 정리한 게 아니고 공부해야 할 것이나 공부 과정에 대해 기록한 글임

 

Vue 공부

대부분 한글문서가 있어 공부하기 좋다.

vue 한국 사용자 모임

node

https://nodejs.org/ko/

vue를 개발하려면 우선 node를 설치해야 함

node의 npm 명령어를 기반으로 vue의 라이브러리를 설치하는데 npm을 직접 쓰기보단 vue-cli를 통해 사용하게 됨

vue

https://kr.vuejs.org/v2/guide/

vue를 사용하기 위해 공부해야 하는 가장 기본적인 문서

vue cli

https://cli.vuejs.org/

vue로 프로젝트를 만들기 쉽도록 제공되는 라이브러리. npm을 통해 설치함

npm install -g @vue/cli

프로젝트를 만들 때 아래와 같은 명령을 통해 vue 프로젝트의 기본 설정을 제공해줌 (2.x와 명령이 달라졌음)

vue create [프로젝트명]

하지만 vue-cli가 3.x가 되면서 vue ui를 제공하여 커맨드 기반의 명령어를 사용하는 빈도가 많이 줄어들어서 편해짐

vue ui

http://vuejs.kr/vue/vue-cli/vue-cli-ui/2018/06/05/using-vue-cli-ui/

vue-cli 베타 15 이후 제공되는 기능

이걸 사용하면 프로젝트 생성도 편리하고 라이브러리 추가나 버전 관리도 편하게 할 수 있음.

다만 아직 환경 설정을 처리하거나 최초 install 처리는 못해서 일부는 npm 명령어를 사용해야 함.

기본 사용 라이브러리들

vue router

vue router는 싱글 페이지 앱을 구현할 때 주소에 대해 렌더링 할 호출 컴포넌트를 매핑해주는 기능을 함.

https://router.vuejs.org/kr/

vuex

https://vuex.vuejs.org/kr/

vuex는 router를 사용해서 여러 컴포넌트를 호출해서 사용하면서 여러 컴포넌트가 같이 사용하는 상태 값을 관리하기 위해 사용하는 라이브러리임

예를 들어 홈페이지에서 게시판, 방명록처럼 여러 서비스를 제공하면 각 메뉴를 이동하더라도 로그인한 유저의 로그인 정보 표시는 유지가 되어야 하는데 매 호출마다 이 정보를 처리하는 개발을 하는 식으로 개발을 하면 피라미드 형태로 복잡도가 증가하지만 vuex를 통해 공통된 기능에 대해 상태 관리를 위임 처리하면 이런 문제가 손쉽게 해결이 됨

axios

https://www.npmjs.com/package/axios

jquery를 사용하면 jquery에서 제공하는 ajax 명령어를 사용하면 되지만 vue는 view layer 처리만 초점을 맞춰 기능을 제공하고 그 외의 기능들은 외부 라이브러리를 가져다 쓰기 쉽게 하고 있다.

jquery를 섞어 쓸 수도 있지만 여러 라이브러리를 사용하면서 각 라이브러리 별로 변경하면서 개선된 부분을 관리하는 게 좀 더 유지보수 측면에서 좋은 관리일 수 있다.

또한 jquery는 통합 라이브러리여서 vue의 view 사용 부분과 많은 부분 기능이 겹친다.

dom 관리 부분 vue와 jquery를 섞어 쓰면 오히려 vue의 기능에 의도하지 않은 결과를 만들 수도 있다.

따라서 vue를 사용하면 jquery는 버리는 것이 좋다.

axios는 jquery의 ajax의 역할을 하는 라이브러리이다.

Nuxt

ko.nuxtjs.org/

vue router, vuex를 따로 공부하고 설정해서 쓰면서 개념을 익히더라도 결국 자동화 해주는 nuxt를 쓰게 되는 듯 하다.

아니면 아예 처음부터 vue router, vuex 공부는 건너뛰고 nuxt로 익히는 것도 방법인 듯 싶다.

확장해서 사용하는 라이브러리들

ui framework

bootstrap-vue

https://bootstrap-vue.js.org/

bootstrap을 vue에서 사용할 수 있도록 제공하는 ui 라이브러리

이것을 사용할 수도 있고 vuetify 또는 element ui 등등 여러 라이브러리를 선택하여 사용할 수 있다.

https://madewithvuejs.com/blog/the-best-vue-js-frameworks

 

현재 bootstrap-vue를 많이 사용하고 있는 것 같다.

https://stackshare.io/stackups/bootstrap-vs-vuetify

vue-fontawesome

https://github.com/FortAwesome/vue-fontawesome

이모티콘은 여기 무료 버전이 괜찮은 듯

vue-i18n

https://kazupon.github.io/vue-i18n/

다국어 처리를 위한 라이브러리

vue-moment

https://www.npmjs.com/package/vue-moment

날짜 관련 라이브러리인 moment.js (시간 표시 형식, X초전, X분전과 같은 표현을 하기 위해 사용)

작업하면서 확인한 변경점들

vue cli 2.x에서 3.x로 넘어온 경우 기존 프로젝트의 설정이 달라져서 새로 프로젝트 만들고 옮기는 식으로 진행

vue cli 2.x에는 index.html이 src 바깥에 있었으나 3.x에서 안으로 들어감

개발 환경 설정도 달라짐

proxy 설정이 기존엔 config/index.js. 에서 하던 게 루트의 vue.config.js에서 설정하게 변경됨

config 폴더 아래 설정이 삭제됨

vue router도 기존엔 /src/router/index.js 에서 관리하던 게  /src/router.js로 변경됨