맛있는 데이터

VueJs 를 빠르게 파악하여 결과물을 내야 하는 상황이 생겼다.

VueJs 한글 커뮤니티가 있음에 감사하다.

아래 VueJs 중 "시작하기" 카테고리를 그대로 따라한 것을 정리한다.

https://kr.vuejs.org/

VueJs란?

1. 사용자 인터페이스를 만들기 위한 진보적인 프레임워크

2. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계

3. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽다.

Vue는 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원할 수 있다. -> 그렇다고 합니다.

언제나 시작은 helloworld 프로그램으로 부터 ( 위 커뮤니티 index.html 소스참조 )

결과물

선언적 렌더링 : Vue.js의 핵심은 간단한 템플릿 구문을 사용해 선언적으로 DOM에 데이터를 렌더링하는 것입니다.

데이터와 DOM이 연결되어 이제 모든 것이 반응형입니다. 어떻게 알 수 있을까요? 브라우저의 JavaScript 콘솔을 열고 app.message를 다른 값으로 설정해 보십시오. 그에 따라 렌더링 된 예제를 볼 수 있습니다.

무슨 말인지 모르겠으니 바로 실행해보자. 위 index.html 파일에서 브라우저 console 에 다른 메세지를 입력하면

위 "안녕하세요 Vue!" 메세지가 입력한 메세지로 변경된다. 신기하다~

다음 예제2. 에서는 본문글에 마우스를 올려놓으면 웹페이지가 로드된 시간을 동적으로 알려준다.

여기서 우리는 새로운 곳에 다다랐습니다. v-bind 속성은 디렉티브 이라고 합니다. 디렉티브는 Vue에서 제공하는 특수 속성임을 나타내는 v- 접두어가 붙어있으며 사용자가 짐작할 수 있듯 렌더링 된 DOM에 특수한 반응형 동작을 합니다. 기본적으로 “이 요소의 title 속성을 Vue 인스턴스의 message 속성으로 최신 상태를 유지 합니다.”

vue 제공 특수 속성으로 v- 접두어가 붙어있으며 반응형 동작을 한다. 정도만 알아두자.

다음 예제3,4 를 통해 조건문과 반복문을 통해 vue 속성으로 제어문이 가능하다는 것을 알 수 있다.

계속해서, app3.seen = false를 콘솔에 입력하세요. 메시지가 사라지는 것을 확인해야 한다.

콘솔에서, app4.todos.push({ text: '정리하고 기록하기' })을 입력하면 목록에 새 항목이 추가된다.

예제5. 사용자 입력 핸들링으로 사용자가 앱과 상호 작용할 수 있게 하기 위해 우리는v-on 디렉티브를 사용하여 Vue 인스턴스에 메소드를 호출하는 이벤트 리스너를 첨부 할 수 있다.

메세지 뒤집기 버튼을 누르면 "안녕하세요! Vue.js!" -> "!sj.euV !요세하녕안" 로 변경되는 것을 볼 수 있다.

예제6. Vue는 또한 양식에 대한 입력과 앱 상태를 양방향으로 바인딩하는 v-model 디렉티브를 제공한다. 쉽게 말해 v-model을 통해 사용자입력과 앱 데이터를 연결할 수 있다.

컴포넌트 시스템은 Vue의 또 다른 중요한 개념입니다. 이는 작고 그 자체로 제 기능을 하며 재사용할 수 있는 컴포넌트로 구성된 대규모 응용 프로그램을 구축할 수 있게 해주는 추상적 개념입니다. 생각해보면 거의 모든 유형의 응용 프로그램 인터페이스를 컴포넌트 트리로 추상화할 수 있습니다.

예제7. 컴포넌트로 나누기.

앱은 나눠서 기능별 컴포넌트별로 모듈화 하는것이 좋다. 당연히 유지보수나 소스코드의 직관성 및 신뢰성에 따라서...

예제7은 props 를 통해 앱을 부모와 자식으로 나누었다. (이해를 위해 인위적으로 나눈 것이긴 하지만...)

app7.groceryList[0].text = "test" 를 입력하여 list 의 첫번째를 변경할 수 있다.

그외...

사용자 정의 엘리먼트와의 관계

Vue 컴포넌트는 Web Components Spec의 일부인 사용자 지정 엘리먼트 와 매우 유사하다는 것을 눈치 챘을 수 있습니다. Vue의 컴포넌트 구문은 스펙 이후 느슨하게 모델링 되었기 때문입니다. 예를 들어 Vue 컴포넌트는 Slot API와 is 특수 속성을 구현합니다. 그러나 몇가지 중요한 차이가 있습니다.

1. Web Components Spec은 여전히 초안이며 모든 브라우저에서 기본적으로 구현되지 않습니다. 이에 비해 Vue 컴포넌트는 지원되는 모든 브라우저 (IE 9 이상)에서 폴리필을 필요로 하지 않으며 일관되게 작동합니다. 필요한 경우 Vue 컴포넌트는 기본 사용자 정의 엘리먼트 내에 래핑할 수 있습니다.

2. Vue 컴포넌트는 일반 사용자 정의 엘리먼트에서 사용할 수 없는 중요한 기능을 제공합니다. 특히 컴포넌트 데이터 흐름, 사용자 지정 이벤트 통신 및 빌드 도구 통합이 중요합니다.

-> 간단히 말해 Vue 가 Web component Spec 과 비슷하지만 모든 브라우저에서 일관되게 작용하고 더 좋다는 말이다.

이상 VueJs 의 core 중 가장 기본적인 부분을 살펴보았다. 이후 내용은 위 VueJs 커뮤니티를 참고하면 좋겠다.