본문 바로가기

Web Programming

Vue를 처음 체험하다

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

 웹 개발을 처음 시작할때 jQuery 버전이 1.4 정도 였던 것 같다. 지금하고 무슨 차이가 있냐고 물어본다면 그냥 jQuery 버전이 올랐다는 점이다. 그 밖에는 마크업을 만들때 아무렇게나 했다면 반응형 웹을 지원하며, 비교적 디자인이 예쁜 Bootstrap 을 사용한다는 점이다. 그래서 늘 뭔가 변화가 없는 이 웹 개발이 늘 지겨웠지만 jQuery 로 어지간한 웹 개발은 다 가능하여서 딱히 불만이랄 것도 없었다.

 그러다 jQuery를 안쓰자고 다짐했던게 2014년 정도였다. (아래 글) 그렇게 새롭게 시작한게 AngularJS 였는데 나에게는 굉장히 센세이션이었다. 늘 jQuery 기반의 개발을 하면서 '재사용' 에 대한 것이 항상 스트레스 였다. (하지만 Element Selector는 정말 편-안) 이런 것들을 깔끔하게 해결해주었지만 어쩐지 학습 난이도는 상당히 높았다. 이건 당시의 AngularJS 가 정말 어려워서 그럴 수도 있겠으나, 그동안 jQuery에 너무 굳어버린 두뇌 때문인 것 같다.

 

간단한 SOFEA(Service-Oriented Front-End Architecture) 따라해보기~

지난 실습의 연장선이라고 봐주시면 좋겠습니다. Jersey 와 DynamoDB 를 이용한 간단 예제 만들기 : http://mrtint.tistory.com/751 위를 통해서 Rest API 를 구성하고 Rest Client 를 통해서 테스트를 해보는 과..

blog.lifeis.gift

 최근에 체험하게된 Vue는 이전에 Angular를 시작할 때보다 훨씬 더 환경이 좋았다. 일단 한국어 문서가 있고, 이미 어느정도 사용자 층이 두터워져 있는 상황이어서 필요한 정보들이 상당히 많았다. 이전에 문서들을 번역해가면 배울때 보다 몹시 빠른 속도로 체험할 수 있었다. 특히 특별히 개발환경의 준비 없이 바로 체험해 볼수 있는 JSFiddle 같은 곳도 있어서 해당 프레임워크에서 제공하는 예제코드들을 쉽게 사용할 수 있었다.

이미지 출처 : https://vuejs.org

 어떤 HelloWorld 코드든 그렇듯 매우 간결하다. 이전에 하던 프로젝트에서 문자열, 숫자 가공에 대한 유틸리티성 기능들을 구현할 일이 있었는데, 거의 모든 페이지에 사용이 되었다. 이걸 어떻게 재사용되기 쉽게 만들까에 대한 고민이 있었는데 지금 위에 선언된 Vue의 구조랑 굉장히 유사하게 만들었던 기억이 있다. 그래서인지 더 친근하게 다가왔다. 특히 컴포넌트와 디렉티브의 개념은 이전에 배웠던 것과는 조금 차이가 있지만 더 직관적이고 사용하기 쉬워 보였다.

 여러 특징들 중에서는 Vue 라는 프레임워크에 대한 팬 층이 생각보다 두텁고 레퍼런스가 많았다. 언뜻 살펴보기에는 학습 기간이 상대적으로 짧을 것 같다는 느낌을 받았다. 더욱이 최근의 Javascript 기반의 여러 종류의 패키지들이 지원되고 있어서 개발 생산성도 많이 향상되어 있었다.

 조금씩 예제(?) 비슷한 프로그램을 만들다보면 뭔가 더 깊이 탐구가 될거 같아서.. Vue 에 대한 소감 정도로 마치고 개발하는 내용도 함께 올려야겠다.