분류 전체보기

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은 화면에 나타나..

프레임워크 없는 프론트엔드 개발 3장(DOM 이벤트 관리)

DOM 이벤트 관리 웹 애플리케이션은 고정된 그림이 아니기 때문에 내용은 시간이 지남에 따라 변경됩니다. 이린 변경이 발생하게 만드는 것이 이벤트입니다. 이벤트는 사용자에 의해 또는 시스템에 의해 생성됐는지 여부와 관계없이 DOM API에 매우 중요한 부분입니다. YAGNI 원칙 앞 장에서는 이벤트를 무시한 불완전한 엔진을 학습했는데 그 이유는 가독성과 단순성 때문이라고 합니다. 저자는 실제 프로젝트에도 동일한 접근 방식을 사용한다고 합니다. 가장 중요한 기능에 초점을 맞춰 개발하고 새로운 요구가 생기면 이에 따라 아키텍처를 지속적으로 발전시켜나가는 형태를 선호한다고 합니다. 이러한 형식을 YAGNI(You are't gonna need it : 정말 필요하다고 간주할 때까지 기능을 추가하지 마라)라고 ..

프레임워크 없는 프론트엔드 개발 2장(렌더링)

모든 웹 애플리케이션에서 가장 중요한 기능 중 하나는 데이터의 표시라고 합니다. 데이터를 표시한다는 것은 요소를 화면이나 출력 장치에 렌더링하는 것을 의미합니다. W3C는 프로그래밍 방식으로 요소를 렌더링하는 방식을 문서 객체 모델(Document Object Model, DOM)로 정의했습니다. 문서 객체 모델이란? DOM은 웹 애플리케이션을 구성하는 요소를 조작할 수 있는 API입니다. HTML 페이지는 트리로 구성되는데 아래와 같은 HTML 코드는 다음과 같은 DOM으로 표현됩니다. Framework GitHub Stars Vue 118917 React 115392 이 예제를에서 DOM이 HTML 요소로 정의된 트리를 관리하는 방법임을 알 수 있습니다. 다음은 리액트 셀의 배경색을 변경하는 방법에 ..