Do it! Vue.js 입문 (3) 썸네일형 리스트형 [Do it! Vue.js 입문] 08. 뷰 HTTP 통신 - 뷰 리소스, 액시오스 (Vue Resource, Axios) HTTP(HyperText Transfer Protocol) 브라우저와 서버 간에 데이터를 주고 받는 통신 프로토콜(Protocol:컴퓨터나 단말기 간에 통신하기 위해 상호간에 정의한 규칙) HTTP 통신 브라우저에 특정 데이터를 보내달라고 요청(request)을 보내면, 응답(response)으로 해당 데이터를 보내주는 방식으로 동작. (HTTP 요청을 보냄 = 데이터를 보내달라는 요청이라고 보면 됨. 요즘 웹 앱에서 서버에 데이터를 요청하는 HTTP 통신은 필수로 구현해야 하는 기능.) => 대표적인 사례로는 jQuery의 ajax가 있음. ajax는 서버에서 받아온 데이터를 표시할 때 화면 전체를 갱신하지 않고 화면의 일부분만 변경할 수 있게 하는 자바 스크립트 기법이다. 사용자와의 상호 작용에 따.. [Do it! Vue.js 입문] 06. 이벤트 버스 같은 레벨, 관계 없는 컴포넌트 간의 통신 같은 레벨의 컴포넌트 간의 통신을 공통적인 상위 컴포넌트에 값을 전달해 이벤트를 받는 형식으로 구현된다. 하지만 이런 상황에서는 상위 컴포넌트가 필요없음에도 통신을 위해 상위 컴포넌트를 두어야한다. 이런 경우 이벤트 버스 형식을 사용하여 관계 없는 컴포넌트끼리 바로 데이터를 전달할 수 있다. 이벤트 버스 이벤트 버스를 구현하려면 애플리케이션 로직을 담는 인스턴스와는 별개로 새로운 인스턴스를 1개 더 생성하고, 새 인스턴스를 이용하여 이벤트를 보내고 받는다. 보내는 컴포넌트에는 .$emit()을, 받는 컴포넌트에는 .$on()을 구현한다. //이벤트 버스를 위한 추가 인스턴스 1개 생성 var eventBus = new Vue(); //이벤트를 보내는 컴포넌트 m.. [Do it! Vue.js 입문] 02. Vue.js 시작하기 Vue.js 시작하기 기존 사이트에서 Vue를 사용하려면 아래 또는 Node.js를 설치해 NPM을 사용하는 방법도 있는데, 더 자세한건 아래 링크를 참조하자. (NPM은 나중에 다룰 것) 설치방법 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org Vue 시작하기 - Web 개발 학습하기 | MDN 이제 우리가 배울 세 번째 프레임워크인 Vue를 소개하겠습니다. 이 글에서 우리는 Vue에 대한 간단한 배경지식을 얻고, Vue를 설치하고 새로운 프로젝트를 만드는 방법을 배웁니다. 또한 전체 developer.mozilla.org 간단한 페이지를 하나 만들어보자. 먼저 테스트용으로 index.html 파일을 하나 만든다. 아래는 뷰 라이브러리를 로딩한 후, 뷰로 간단.. 이전 1 다음
