데이터 바인딩(Data Binding)은 HTML 화면 요소를 뷰 인스턴스에 있는 데이터와 연결을 하는것이다.주요 문법으로 {{ }} 와 v-bind 가 있다. 먼저 {{ }} 는 뷰 인스턴스에 데이터를 HTML 태그에연결 할 수 있는 가장 기본적인 텍스트 삽입 방식이다.뷰 뿐만 아니라 다른 언어나 프레임워크에서도 자주 사용되는템플릿 문법이다. 간단하게 형식을 보자. 위 소스는 data 속성이 message 속성값인Test!! 를 div 태그의 {{ message }} 에 연결하여화면에 출력시켜주는 소스이다. 여기서 data 속성의 message값이 바뀌면 뷰 반응성에 의해 화면이자동으로 갱신 될것이다. 만약 뷰 데이터가 변경되도 값을 변경시키고 싶지않다면아래와 같이 v-once 속성을 사용하면된다. v..
뷰의 템플릿은 HTML, CSS등의 마크업 속성과뷰 인스턴스에서 정의한 데이터와 로직들을 연결해서 사용자가 브라우저에서 볼 수 있도록 HTML형태로 변환해 준다. 템플릿의 속성을 사용하는 방법은 두 가지로 되어있다.먼저 첫 번째는 ES5에서 뷰 인스턴스의 템플릿 속성을사용하는 방법으로 아래와 같다. ------------ 이때 템플릿 속성에 대해 알아둬야할 특징이 있는데사용자가 볼 수는 없지만 라이브러리 내부적으로템플릿 속성에서 정의한 마크업 + 뷰 데이터를 가상 DOM기반의 render() 함수로 변환하는 것이다.변환된 render()함수는 최종적으로 사용자가 볼 수 있게 화면을그려주는 역할을 한다. 그리고 그 과정에서 뷰의 반응성이화면에 더해진다. 두 번째 방법은 싱글 파일 컴포넌트 체계의 코드를사용..
액시오스 (Axios)는 현재 뷰 커뮤니티에서 가장 많이 사용되는 HTTP통신 라이브러리다. 에반도 뷰 리소스 라이브러리를 통해공식 라이브러리에서 제외하면서 액시오스를 언급했다고한다.액시오스는 깃허브 리포지토리의 별이 3만개가 넘는다. 이는뷰 리소스의 8천개에 비해 압도적으로 많다. 그만큼 많은 개발자들이관심을 갖고 이용하고 있다는 증거이다. 일반적으로 오픈소스 라이브러리의장래성은 깃허브 리포지토리가 얼마나 활성화되어 있느냐로판단할 수 있는데, 액시오스가 그런면에서 뷰 리소스 보다 더 안정적으로지원되는 라이브러리 라고 할 수 있다. 또한 액시오스는 Promise 기반의 API형식이 다양하게 제공되어별도의 로직을 구현할 필요 없이 주어진 API만으로도간편하게 원하는 로직을 구현할 수 있다. 간단하게 액시오..
뷰 리소스를 사용하는 방법은 CDN을 이용해서 라이브러리를로딩하는 방식과 NPM으로 라이브러리를 설치하는 방법이 있다.CDN 설치 방법을 이용하여 간단히 뷰 리소스로 서버에서 특정데이터를 받아와 로그로 출력해보겠다. 아래 소스를 보자. 먼저 위 코드는 버튼을 하나 추가해 클릭하면지정한 URL의 데이터를 가져오는 소스이다.여기서 불러오는 데이터는 JSON 형식의 간단한 파일이며 프레임워크 종류 - 프레임워크 이름 형태로 키- 쌍 조합으로총 7개의 데이터 쌍으로 되어있다. 먼저 7line에서는 버튼을 인스턴스 영역안인 태그안에태그로 추가했다. 그리고 v-on:click을 이용해버튼을 클릭하면 getData가 호출되도록 한다. 17line은 getData()에는 뷰 리로스 에서 제공하는 API인this.$ht..
요즘 웹 앱 에서 서버에 데이터를 요청하는HTTP통신을 필수로 구현해야 하는 기능이다.과거 웹 사이트가 정적인 텍스트나 간단한 이미지를나타내는데 그쳤다면 이젠 사용자와의 상호 작용에 따라데이터를 동적으로 화면에 표시해 줘야 하기 때문이다. 여기서 HTTP는 브라우저와 서버 간에 데이터를주고받는 통신 프로토콜이다. 브라우저에서 특정데이터를 보내달라고 request를 보내면 서버에서 response로해당 데이터를 보내주는 방식이다.서버에 해당 데이터를 보내달라고 메시지를보내는 것이 HTTP요청을 보내는것과 같다. 웹 앱의 HTTP 통신의 대표적인 것으로 jQuery의 ajax가 있다.ajax는 서버에서 받아온 데이터를 표시할 때 화면 전체를 갱신하지않고도 화면의 일부분만 변경할 수 있게 하는 자바스크립트 기..
네임드 뷰(Named View)는 특정 페이지로 이동 했을 때여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식이다.이전 포스티에서 알아보았던 네스티드 라우터는 아래의이미지처럼 상위 컴포넌트가 하위 컴포넌트를 포함하는 형태이다. 하지만 네임드 뷰는 아래 이미지처럼 같은 레벨에서여러 개의 컴포넌트를 한 번에 표시한다. 이제 간단하게 네임드 뷰 구조를 소스로 확인하자 먼저 9~13line에서는 태그 안에 를 3개 추가하고name속성을 추가한다. 여기서 name 속성은 아래 components 속성에정의하는 컴포넌트와 매칭하기 위한 속성이다. Header컴포넌트는 headerFooter컴포넌트는 footer를 각각 name속성에 값으로 설정한다.다음 name속성이 없는 두 번째 는 default로 표시될 컴포넌..
네스티드 라우터는 라우터로 페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼수 있다.네스티드 라우터는 상위컴포넌트 1개에하위 컴포넌트 1개를 포함하는 구조를 갖는다.네스티드 라우터를 이용하면 URL에 따라서 컴포넌트의하위 컴포넌트가 다르게 표시 된다. 먼저 간단하게 네스티드 라우터를 구현하는 소스를 보자. 먼저 10line은 User 컴포넌트가 뿌려질 영역이다.다음 15~24line에서 User, UserPost, UserProfile 컴포넌트의내용을 각 객체에 정의한다. 컴포넌트가 전환된 것을 알수 있게template속성을 컴포넌트 내용에 추가했다. 여기서 봐야할 부분은User컴포넌트의 template에 하위 컴포넌트를 표시할 가하나 더 있다는 부분이다.26~38line routes에 라우..
라우팅이란? 라우터를 이해하기 위해선 먼저 라우팅이 무엇인지 알아야 한다. 라우팅이란 웹 페이지 간의이동 방법을 말한다. 라우팅은 현대 웹 앱 형태중 하나로싱글페이지 애플리케이션(SPA, Single Page Application)에서 주로 사용한다. 라우티을 이용하면 화면간의 전환이매끄럽고 애플리케이션의 사용자 경험을 향상 시킬수 있다. 보통 브라우저에서 웹 페이지를 요청하면 서버에서 응답을 받아 웹 페이지를 다시 사용자에게 돌려주는 시간 동안화면상에 깜빡거림 현상이 나타난다. 이런 부분들을라우팅으로 처리하면 매끄럽게 전환 할 수 있다.그리고 더 빠르게 화면을 조작할수 있다.뷰 뿐만 아니라 리액트와 앵귤러 모두 라우팅을 이용한다.프런트엔드 프레임워크를 사용하지 않고 일반 HTML파일들로도라우팅 자바스크..
