데이터 바인딩(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..
네임드 뷰(Named View)는 특정 페이지로 이동 했을 때여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식이다.이전 포스티에서 알아보았던 네스티드 라우터는 아래의이미지처럼 상위 컴포넌트가 하위 컴포넌트를 포함하는 형태이다. 하지만 네임드 뷰는 아래 이미지처럼 같은 레벨에서여러 개의 컴포넌트를 한 번에 표시한다. 이제 간단하게 네임드 뷰 구조를 소스로 확인하자 먼저 9~13line에서는 태그 안에 를 3개 추가하고name속성을 추가한다. 여기서 name 속성은 아래 components 속성에정의하는 컴포넌트와 매칭하기 위한 속성이다. Header컴포넌트는 headerFooter컴포넌트는 footer를 각각 name속성에 값으로 설정한다.다음 name속성이 없는 두 번째 는 default로 표시될 컴포넌..
라우팅이란? 라우터를 이해하기 위해선 먼저 라우팅이 무엇인지 알아야 한다. 라우팅이란 웹 페이지 간의이동 방법을 말한다. 라우팅은 현대 웹 앱 형태중 하나로싱글페이지 애플리케이션(SPA, Single Page Application)에서 주로 사용한다. 라우티을 이용하면 화면간의 전환이매끄럽고 애플리케이션의 사용자 경험을 향상 시킬수 있다. 보통 브라우저에서 웹 페이지를 요청하면 서버에서 응답을 받아 웹 페이지를 다시 사용자에게 돌려주는 시간 동안화면상에 깜빡거림 현상이 나타난다. 이런 부분들을라우팅으로 처리하면 매끄럽게 전환 할 수 있다.그리고 더 빠르게 화면을 조작할수 있다.뷰 뿐만 아니라 리액트와 앵귤러 모두 라우팅을 이용한다.프런트엔드 프레임워크를 사용하지 않고 일반 HTML파일들로도라우팅 자바스크..
이벤트 버스는 개발자가 지정한 2개의 컴포넌트 간에데이터를 주고받을 수 있는 방법이다.이전 포스팅에서 컴포넌트간 통신은 항상 상위-하위구조를 유지해야 데이터를 주고받을 수 있었다.이벤트 버스를 사용하면 이런 상위-하위 관계를유지하고 있지 않아도 데이터를 한 컴포넌트에서다른 컴포넌트로 전달할 수 있다. 먼저 아래 그림을 보자. 최하위에 있는 하위컴포넌트B에서 상위 컴포넌트A로데이터를 전달하려면 Vue에서 제시하는 기본적인컴포넌트 통신 방식을 생각해야한다.하위컴포넌트B 상위컴포넌트B 최상위컴포넌트를 거쳐서상위 컴포넌트A까지 가야한다. 하지만 웹이 커져컴포넌트가 많아지면 이런식의 데이터 전달 방식은 번거롭다.이럴 경우 이벤트버스를 사용하면 중간 컴포넌트들을 거치지 않고하위컴포넌트B 에서 바로 상위 컴포넌트A로..
이전 포스팅에서 props에대해 알아보았다.props는 상위에서 하위 컴포넌트로 데이터를 전달 하는 방식이다. 이번엔 그 반대로 하위컴포넌트에서 상위 컴포넌트로의 통신에대해알아보자. 먼저 하위에서 상위로 통신을 하기위해선이벤트를 발생시켜 상위 컴포넌트에 신호를 보내는 방법이 있다.상위 컴포넌트에서 하위컴포넌트의 특정 이벤트가 발생하기를 기다리다가하위 컴포넌트에서 특정 이벤트가 발생되면 상위 컴포넌트에서해당 이벤트를 수신해서 상위 컴포넌트의 메소드를 호출하면 된다. 먼저 이벤트 발생과 수신은 $emit()과 v-on: 속성을 사용한다.각각의 형식은 아래와 같다. $emit()을 사용하게되면 괄호 안의 이벤트가 발생된다.(보통 $emit()을 호출하는 위치는 하위컴포넌트의 특정 메소드 내부)따라서 $emit..
* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.
