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