Vue.js는 매우 다양한 방법으로 코드를 작성할 수 있다. 초보자 입장에서는 한가지만 "딱" 점지해주면 좋으련만 개발자의 성향, 상태를 고려해서인지 이것 저것 방법이 많다. 물론 결과물의 동작은 동일하다. 이번 포스트에서는 각각의 코드 작성 방법에 대해서 살펴보자. Options vs Composition 가장 기본적인 분기는 사용하려는 API 스타일에 따라서 Options 방식의 API를 사용할것인가? 아니면 Composition 방식의 API를 사용할 것인가이다. https://vuejs.org/guide/introduction.html#api-styles Introduction | Vue.js vuejs.org Options API 방식 Options API 방식은 Vue.js 2.x 버전에서 부..

Hello Vue 이번 포스트에서는 앞서 진행한 설정이 잘 되었는지 간단한 소스코드를 만들어보고 잘 동작하는지 살펴보자. 프로젝트 생성 VSCode는 논리적인 Workspace에 물리적인 Folder들을 추가해서 관리한다. 이클립스가 물리적인 Workspace에서 여러 개의 Project를 관리하는 것과는 약간 달리 VSCode는 여러 개의 흩어진 Folder 즉 프로젝트를 하나의 논리적인 Workspace에서 관리할 수 있다. VSCode를 실행시킨 후 File > Add Folder to Workspace...을 클릭한 후 사용할 폴더를 추가해 준다. 다음은 vueclass라는 Folder를 추가한 결과다. 아직은 workspace가 UNTITLED이다. 참고로 vueclass 하위에는 01_hell..

개발 환경 구축 뭘 하든 간에 일단 개발 환경이 삐까뻔쩍 해야 폼이 나는 법이다.!! 이번 포스트에서는 제대로 Vue.js를 개발하기 위해 필요한 툴들을 설치해 보자. Vue.js 개발을 위해 필요한 것들 Vue.js는 그냥 Javascript이기 때문에 사실 아무 툴이나 있어도 상관없다. ㅜㅜ 하지만 조금이라도 편하게 개발하려면 필요한 녀석들은 존재한다. 일단 개발을 위한 기본 툴로는 Visual Studio Code(이하 VSCode)를 권장한다. MS에서 나온 오픈 소스이며 상당히 가벼운 에디터이다. VSCode에도 이클립스처럼 다양한 플러그인(Extension)을 설치해서 기능을 확장하는 방식이다. Vue.js로 개발하다 보면 다양한 3rd party 자바스크립트 라이브러리들을 설치하게 되는데 S..

Vue 란?Vue.js란 "에반 유"라는 친구가 2013년 12월에 발표한 Front-end Javascript framework로 웹 브라우저에서 동작하는 UI를 빠르게 개발하기 위해서 발표되었다.2020년 9월에 3.0 버전이 발표되었고 2021년 8월에 3.2 버전이 발표되었다. (한글 사이트 제공!!!)  Vue.js - The Progressive JavaScript Framework | Vue.js접근성 HTML,CSS, 자바스크립트 표준을 기반으로, 쓰기 편한 API와 최고 수준의 문서를 제공합니다.ko.vuejs.org MVVM 패턴Vue는 MVVM 패턴이라는 것에 기반한다.MVVM은 Model, View, ViewModel의 약자로 애플리케이션 로직과 UI의 분리를 위한 패턴이다. 위 그..