VueJS를 시작 하면서 필요한 것들

Vue.js를 이용해 간단한 클라이언트 프론트엔드를 제작하면서 필요했던 것들을 정리해봤다.

서버단의 경우 호출/반환은 flask, 내부 구현은 python으로 미리 제작을 완료하였다. 클라이언트를 평소 익숙했던 php로 간단한 웹페이지로 제작하고자 했으나 차후 데스크탑 어플리케이션 또는 모바일 앱으로 래핑 할 것을 고려해 모두 한 코드에 통합할 수 있는 프레임워크를 찾기 시작했다. 무엇보다 내부 구현이 모두 완료되었기 때문에 빠르게 제작할 수 있는 프레임워크로 Vue로 결정했다. 리엑트를 놓고 고민을 많이 했으나 가장 최신 트랜드를 따르기로 했다. Angular는 내가 프론트엔드 개발자가 아니기 때문에 처음부터 배제했다.

유투브에 한국어로 강의 하는 좋은 컨텐츠가 많기 때문에 접근하는데 문제는 없었다. 부트스트랩은 vue-bootstrap을 사용했다. vue.js를 아무생각 없이 접해보니 이것을 하려면 기본적으로 마크업의 사용법에 능해야 하고 JS 문법을 보는데 문제가 없어야 했다. 또한 서버간 http통신 방식을 이해해야만 vue.js 강의를 진행하는데 지장이 없었다.

Vue는 러닝 커브가 완만하지만 그래도 이해하는데 적은 시간이 걸리는 것은 아니다. 장황한 내용들 중 클라이언트를 만들면서 공통적으로 말이 나오는 기술들에 대해 정리해봤다.

1. vue.js (기본)
   1. SPA 개념.
   2. template, data binding, click event – VueJS의 기본적인 문법.
   3. components, compute, methods – 템플릿 매핑, 페이지 단위 비즈니스로직.
2. vue-router
   1. URI routing – URI 매핑.
   2. Router guard (to/from/next) – 라우팅 전후/생성/소멸 상태의 관리.
   3. Children URI (dynamic routing) – 동적 주소 생성.
3. vuex
   1. state, mutations, actions – 상태저장, 상태변경, 비즈니스로직.
   2. mapState, mapActions – 각 페이지에 vuex을 바인딩.
4. axios
   1. GET/POST 송수신
   2. Async/await과 promise
5. vue-cli
   1. 프로젝트 생성 및 빌드
6. JS와 Node.js 생태계에 대한 마음으로 하는 이해와 넓은 관용도를 가진 아량
7. 프로젝트를 생성하고 최종 빌드를 하여 패키징까지 반드시 확인 해보는 자세

4월 5일 기준으로 2월 말부터 시작된 미니 프로젝트는 사전에 설계한 핵심 로직이 작동하는 알파 버전을 런칭했다. 여러 라이브러리를 엮어야 하는 중추역할을 하는 백엔드 서버는 거의 2주만에 완성하였으나 단순히 데이터를 받아 표시만 해주면 되는 프론트엔드는 구현에 무려 한 달이 넘게 걸렸다.

이를 기념하여 VueJS를 이용한 데스크탑 어플리케이션 개발 후기를 빠른시일 내에 남겨보겠다.