Vue 스터디

Vue.js의 Render 함수

Render Functions Vue는 대부분의 경우 템플릿을 사용하여 HTML을 구축할 것을 권장합니다. 그러나 Javascript가 완전히 필요한 상황이 있고 그럴 때 render 함수를 사용할 수 있습니다. Hello world! 위의 코드와 같이 작성된 HTML이 있을 때, Hello world! 위의 코드와 같이 컴포넌트를 작성하여 사용할 수 있습니다. 이 때 level속성으로 h태그의 종류를 바꿀 수 있는 컴포넌트를 작성한다면, Vue.component('anchored-heading', { template: '#anchored-heading-template', props: { level: { type: Number, required: true } } }) 위의 코..

render : h => h(App)??

vue-cli 기반으로 Vue를 만들면 main.js에 이해하기 어려운 코드가 적혀있습니다. import Vue from 'vue' import App from './App.vue' new Vue({ render: h => h(App) }).$mount('#app') 바로 Vue 인스턴스에 render라고 정의된 속성부분입니다. 이 문장을 표현하면 다음과 같다고 합니다. render: function(createElement){ return createElement(App); } 즉 내부적으로 createElement라는 함수를 파라미터로 받고 이 함수에 App.vue를 넘겨줘서 element를 생성하는 것이라고 합니다. 여기서 h는 hyperscript의 약자..

Vue 스터디 4일차 (템플릿 문법)

템플릿 뷰로 화면을 조작하는 방법을 의미합니다. 템플릿 문법은 크게 데이터 바인딩과 디렉티브로 나뉩니다. 데이터 바인딩 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법입니다. 가장 기본적인 방식은 콧수염 괄호( Mustache Tag)입니다. {{message}} 디렉티브 뷰로 화면을더 쉽게 조작하기 위한 문법입니다. 화면 조작에서 자주 사용되는 방식들을 모아 디텍티브 형태로 제공하고 있습니다. Hello Vue.js computed() 템플릿의 데이터 표현을 더 직관적이고 간결하게 도와주는 속성입니다. 한마디로 얘기하자면 "반응형 getter"라고 보면 됩니다. methods와 비슷한 역할을 하지만 차이가 있습니다. 1. template에서 호출시 ()를 적지 않아야 된다. 2. return 값이..

Vue 스터디 3일차 (컴포넌트 통신)

컴포넌트 통신 컴포넌트를 등록하면 컴포넌트 간의 관계가 형성됩니다. 컴포넌트는 고유한 데이터 유효 범위를 갖습니다. 각 컴포넌트들은 데이터들 각자 관리하는데 그 데이터를 공유하려면 프롭스, 이벤트 라는 속성을 이용해야합니다. 통신 규칙이 필요한 이유 다음과 같이 컴포넌트들을 등록했다고 가정합니다. AppHeader에서의 변화로 LoginForm -> AppFooter -> NavigationBar가 순서대로 변했다고 가정해봅니다. 하나의 컴포넌트의 변화에 따라서 나머지 컴포넌트가 유기적으로 변화할 때 데이터의 방향을 예측하기 어렵습니다. 위와 같이 데이터가 아래로만 흐르게 통신 규칙을 세웠다면 가정하면 데이터의 흐름을 추적하기가 쉬워집니다. Props 속성 데이터를 넘겨줄 하위 컴포넌트 속성에 v-bin..

Vue 스터디 2일차 (뷰 컴포넌트)

뷰 컴포넌트 대부분의 프론트엔드 프레임워크는 컴포넌트 기반으로 개발을 하고 있습니다. 컴포넌트는 화면의 영역을 영역별로 구분해서 코드로 관리하는 것이라고 볼 수 있습니다. 컴포넌트의 핵심은 재사용성이라고 볼 수 있습니다. 전역 컴포넌트 등록 예제 지역 컴포넌트 등록 예제 지역 컴포넌트 vs 전역 컴포넌트 Vue.component('컴포넌트 이름', 컴포넌트 내용) components: { '컴포넌트 이름' : 컴포넌트 내용 } 지역 컴포넌트 : 해당 컴포넌트 아래에 어떤 컴포넌트가 들어갔는지 vue 개발자 도구에서 바로 확인이 가능하다. 전역 컴포넌트 : 플러그인이나 라이브러리 같은 전역으로 사용해야할 경우에만 전역으로 등록한다. 컴포넌트와 인스턴스 위와 같이 전역 컴포넌트는 모든 인스턴스에 등록이 되어..

Vue 스터디 1일차 (Vue란 무엇인가?)

Vue는 무엇인가? MVVM 패턴 뷰모델(ViewModel) 레이어에 해당하는 화면(View)단 라이브러리 View는 브라우저에서 사용자에게 비춰지는 화면(입력단, 버튼 등) 화면에 나타나는 요소들을 html이라고 하고 그것들을 DOM을 이용해서 JS로 조작할 수 있게 구성되어있다. 키보드, 마우스 클릭같은 이벤트를 DOM Listeners에서 확인한다. JS(Model)에 있는 데이터를 바꿔 주거나 특정 로직에서 실행하게 됨 데이터가 변했을 때 내용들을 Data Bindings를 통해 화면에 적용하게 됩니다. 기존 웹 개발 방식(HTML, Javascript) 프레임워크를 사용하지 않고 기존 웹 개발을 하는 방식은 HTML + Javascript + CSS를 이용하는 것입니다. Html은 화면에 나타나..