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

계속 업데이트 되는 글이다. 제작 후 까먹을까봐 간단히 정리.

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

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

Vue는 러닝커브가 완만하지만 그래도 방대하기 때문에 장황한 내용들 중 클라이언트를 만들면서 내가 필요했던 내용들을 정리해봤다.

  1. vue.js (기본)
    • SPA 개념
    • template, data binding, click event – 기본적인 문법 (if, foreach, loop  등등)
    • components, compute, methods – 템플릿 매핑,
  2. vue-router
    • URI routing and paging – 실제 URI 매핑과 페이지 로딩 방식
    • Parameter (GET) & query (POST)
    • Router guard (to/from/next) – 라우팅 전후/생성/소멸 상태의 관리
    • Children URI (dynamic routing) – 동적 주소 생성
  3. vuex
    • Vuex 선언 및 mapState, mapActions
    • state, mutations, actions – 상태저장, 상태변경, 비즈니스로직
  4. axios
    1. GET/POST 송수신


댓글 남기기

이메일은 공개되지 않습니다.