프로그래밍(TA, AA)/자바스크립트 (28) 리스트형 [Vue.js] Vuex를 이용한 상태 관리 컴포넌트는 정보의 전달을 위해서 props, event를 이용하게 된다. 부모 컴포넌트에서 자식 컴포넌트로 정보를 전달하기 위해 props를 이용했고, 자식 컴포넌트에서 부모 컴포넌트로 정보를 전달하기 위해서 event를 사용했다. 한가지 주의할 점은 부모 컴포넌트로부터 전달받은 속성은 자식 컴포넌트에서 변경이 불가하다. 그렇기 때문에 자식 컴포넌트에서 부모 컴포넌트로부터 전달받은 속성을 직접 변경하는 것이 아니라 이벤트를 통해서 부모 컴포넌트에 변경 정보를 알려서 부모 컴포넌트 내부에서 변경하도록 해야한다. 부모-자식 관계가 아니거나 계층 구조가 복잡해지면 어쩔 수 없이 이벤트 버스(Event Bus) 객체를 사용해야 한다. 하지만 이벤트 버스 객체를 사용하는 방식도 대규모 애플리케이션을 개발하는 경우.. [Vue.js] 공식 가이드 문서 요약 (5) - 반응형 Vue 주요 특징 중 하나는 reactive 즉, 반응형 시스템이라는 것이다. 모델은 단순한 Javascript 객체이며, 수정하면 화면이 갱신되는 방식이다. state 관리를 간단하고 직관적으로 만들어주지만 공통점을 제거하기 위해 어떻게 작동하는지 이해하는것이 중요하다. [변경 내용을 추적하는 방법] Vue 인스턴스에 JavaScript 객체를 data 옵션으로 전달하면 Vue는 모든 속성에 Object.defineProperty를 사용하여 getter/setter로 변환한다. 이는 Vue가 ES5를 사용할수 없는 IE8이하를 지원하지 않는 이유이다. getter/setter는 사용자에게는 보이지 않으나 속성에 액세스 하거나 수정할 때 Vue가 종속성 추적 및 변경 알림을 수행할 수 있다. vue-de.. [Vue.js] 공식 가이드 문서 요약 (4) - 상태 관리 Vue 응용 프로그램에서 근본이 되는 것은 data 객체다. Vue 인스턴스는 단순히 그것에 대한 액세스를 프록시 한다. 따라서 여러 인스턴스에서 공유해야하는 상태가 있으면 id로 간단히 공유할 수 있다. const sourceOfTruth = {} const vmA = new Vue({ data: sourceOfTruth }) const vmB = new Vue({ data: sourceOfTruth }) 이제 sourceOfTruth가 변형될때마다 vmA와 vmB가 자동으로 뷰를 갱신한다. 이 인스턴스들 각각의 하위 컴포넌트들은 this.$root.$data를 통해 접근할 수 있으며 언제든지 앱의 일부에서 변경할 수 있다. 이 문제를 해결하기 위해 간단한 store 패턴을 사용할 수 있다. var s.. [Vue.js] 공식 가이드 문서 요약 (3) - 플러그인 Vue.use() 글로벌 메소드를 호출하여 플러그인을 사용한다. // 'MyPlugin.install(Vue)' 호출 Vue.use(MyPlugin) // 선택적으로 옵션 전달 가능 Vue.use(MyPlugin, { someOption: true }) Vue.use는 자동으로 같은 플로그인을 두 번 이상 사용하지 못하기 때문에 같은 플러그인에서 여러 번 호출하면 플러그인이 한 번만 설치된다. vue-router와 같은 Vue.js 공식 플러그인이 제공하는 일부 플러그인은 Vue가 전역 변수로 사용가능한 경우 자동으로 Vue.use()를 호출한다. 그러나 CommonJS와 같은 모듈 환경에서는 항상 Vue.use()를 명시적으로 호출해야 한다. // Browserify 또는 Webpack를 통해 Comm.. [Vue.js] 공식 가이드 문서 요약 (2) - 컴포넌트 컴포넌트는 Vue의 핵심기능 중 하나로 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화하는데 도움이 된다. Vue의 컴파일러에 의해 동작이 추가된 사용자 지정 엘리먼트이다. Vue 컴포넌트는 Vue 인스턴스이기도 하다. 루트에만 사용하는 옵션을 제외하고 모든 옵션 객체를 사용할 수 있으며 같은 라이프사이클 훅을 사용할 수도 있다. [컴포넌트 사용하기]전역 컴포넌트를 등록하려면, Vue.component(tagName, options)를 사용한다. Vue.component('my-component', { // 옵션 }) 일단 등록되면, 컴포넌트는 인스턴스의 템플릿에서 커스텀 엘리먼트, 로 사용할 수 있다. 루트 Vue 인스턴스를 인스턴스화하기 전에 컴포넌트가 등록되어 있는지 확인한다. // .. 이전 1 2 3 4 5 6 다음
