Vue.js를 사용하며 느낀 것

시작하며

공식문서에서 배우기 쉬운 프레임워크를 강조하기도 하고 시작 문서도 상당히 간결하다.

vue-cli로 개발환경 설정하기

vue-cli를 설치하면 간단한 커맨드로 webpack1.0이 설치 된 vue 프로젝트를 만들어 준다. 큰 노력 들이지 않고도 Vue.js 모듈 시스템과 웹팩 환경을 만들어 주니 진입장벽이 정말 낮다.

와 정말 쉽다

Vue.js는 .vue 파일로 컴포넌트들을 관리한다. 물론 .vue파일을 만들지 않고 할 수도 있지만 vue-cli는 기본적으로 모듈시스템을 만들어주고 .vue파일을 관리한다.

이 .vue파일(컴포넌트)에는 html 템플릿과 vue 로직, css가 한꺼번에 들어간다. 정말 충격적으로 배우기 쉽고 간결하다. 인라인 마크업을 할 수도 있고 따로 파일로 분리한 뒤 컴포넌트에 불러올 수도 있다.

컴포넌트로 분리한 .vue파일에는 작은 단위의 뷰 코드가 들어가므로 스파게티 코드가 될 가능성도 줄여주고, html 템플릿에서는 v- 접두어로 시작하는 조건부 렌더링이나 데이터 바인딩, 이벤트 핸들링을 할 수 있으며, css는 scoped 옵션을 통해 해당 컴포넌트에서만 적용되게 할 수도 있다.

jQuery와 비교해서 가장 큰 장점은 이벤트 핸들링을 위해 js로 DOM을 참조할 필요가 없다는 것이다. 그냥 html 마크업 내에서 v-접두어를 쓴 이벤트 바인딩을 하면 끝이다.

Vue.js를 시작하기 위해서 넘어야 할 3개의 산

1. 라우팅 처리

라우팅도 할 거다. 쉽다. vue-router를 설치하면 된다.

여기까지만 쉽다. 공식문서에는 webpack환경에서 라우터를 적용하는 방법이 나와있지 않아서 한 네 시간은 헤맸다. 헤멘 경험을 바탕으로 Vue.js에 VueRouter로 라우팅 하기에 정리해놨다.

2017년 2월 4일부로 vue-cli webpack 템플릿에 vue-router가 통합되었습니다. 이제 더 간편하게 앱을 만들 수 있어요!

2. 데이터 다루기

데이터 조작도 할 거다. 쉽다. vuex를 설치하면 된다. vuex를 조작하는 방법은 Vue.js 한국어 사용자 모임vue와 vue-router, vuex 함께 사용하기 포스트를 참고했다.

3. 서버와 통신하기

이미 널리 쓰이는 axios 라이브러리로 http request를 보내고 response를 받을 수 있다.

마치며

아무튼 Vue.js 쉬움 진짜임

0
👍
0
❤️
0
😄
0
😝
0
😢
0
😡