Vue.js
-
Vue.js
[Do it! Vue.js 입문] 08. 뷰 HTTP 통신 - 뷰 리소스, 액시오스 (Vue Resource, Axios)
HTTP(HyperText Transfer Protocol) 브라우저와 서버 간에 데이터를 주고 받는 통신 프로토콜(Protocol:컴퓨터나 단말기 간에 통신하기 위해 상호간에 정의한 규칙) HTTP 통신 브라우저에 특정 데이터를 보내달라고 요청(request)을 보내면, 응답(response)으로 해당 데이터를 보내주는 방식으로 동작. (HTTP 요청을 보냄 = 데이터를 보내달라는 요청이라고 보면 됨. 요즘 웹 앱에서 서버에 데이터를 요청하는 HTTP 통신은 필수로 구현해야 하는 기능.) => 대표적인 사례로는 jQuery의 ajax가 있음. ajax는 서버에서 받아온 데이터를 표시할 때 화면 전체를 갱신하지 않고 화면의 일부분만 변경할 수 있게 하는 자바 스크립트 기법이다. 사용자와의 상호 작용에 따..
-
Vue.js
[Do it! Vue.js 입문] 07. 뷰 라우터 (네스티드 라우터, 네임드 뷰)
뷰 라우터 뷰에서 *라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리. 뷰 라우터를 이용하여 뷰로 만든 페이지 간에 자유롭게 이동. * 라우팅(Routing) 웹 페이지 간의 이동 방법. *싱글 페이지 애플리케이션에서 주로 사용. 화면 간의 전환이 매끄러움. 일반적으로 웹 페이지를 요청(request)하면 서버에서 응답(respone)을 받아 웹 페이지를 다시 사용자에게 돌려주는 시간 동안 화면 상에 깜빡거림 현상이 나타남. 이런 부분들을 라우팅으로 처리하면 깜빡거림 없이 화면을 매끄럽게 전환할 수 있고, 더 빠르게 화면을 조작할 수 있어 사용자 경험(UX)이 향상된다. 뷰뿐만 아니라 리액트나 앵귤러 모두 라우팅을 이용하여 화면을 전환. 라우팅 자바스크립트 라이브러리(router.js)를 이용해 ..
-
Vue.js
[Do it! Vue.js 입문] 06. 이벤트 버스
같은 레벨, 관계 없는 컴포넌트 간의 통신 같은 레벨의 컴포넌트 간의 통신을 공통적인 상위 컴포넌트에 값을 전달해 이벤트를 받는 형식으로 구현된다. 하지만 이런 상황에서는 상위 컴포넌트가 필요없음에도 통신을 위해 상위 컴포넌트를 두어야한다. 이런 경우 이벤트 버스 형식을 사용하여 관계 없는 컴포넌트끼리 바로 데이터를 전달할 수 있다. 이벤트 버스 이벤트 버스를 구현하려면 애플리케이션 로직을 담는 인스턴스와는 별개로 새로운 인스턴스를 1개 더 생성하고, 새 인스턴스를 이용하여 이벤트를 보내고 받는다. 보내는 컴포넌트에는 .$emit()을, 받는 컴포넌트에는 .$on()을 구현한다. //이벤트 버스를 위한 추가 인스턴스 1개 생성 var eventBus = new Vue(); //이벤트를 보내는 컴포넌트 m..
-
Vue.js
[Do it! Vue.js 입문] 05. 뷰 상위-하위 컴포넌트 간의 통신
컴포넌트 간 통신과 유효 범위 Vue.js는 컴포넌트로 화면을 구성한다. 각 컴포넌트마다 자체적으로 고유한 유효 범위(Scope)를 갖고 있고, 때문에 같은 웹 페이지라도 데이터를 공유할 수 없다. 이는 뷰 프레임 워크 내부적으로 정의된 특징으로, 각 컴포넌트의 유효 범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수 없다. #예제 1 app 영역 cmp1과 cmp2 지역 컴포넌트를 등록하고, cmp2 컴포넌트에서 cmp1 컴포넌트의 data.cmp1Data 값을 직접 참조했을 때, 값이 나오지 않는걸 확인할 수 있다. 상위 컴포넌트와 하위 컴포넌트 앞서 [Do it! Vue.js 입문] 04. 뷰 컴포넌트에서 다룬 컴포넌트 등록 방법으로 지역, 전역 컴포넌트를 등록하면 자연스럽게 하위 ..
