📌Axois? 뷰에서 권고하는 HTTP 통신 라이브러리(Promise 기반) Vue.js에 종속되는 것은 아니고, 다른 js에서도 많이 사용됨 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘되어 있고 API가 다양함 📌설치 NPM 방식 npm install axios 📌 사용방법 get data new Vue({ el: '#app', methods: { fetchData: function() { axios.get('/todos/save') .then(function(response) { console.log(response); }) .catch(function(error) { console.log(error); }); } } }) .then 비동기 통신 성공했을 때 콜백을 인자로 받아 결과..
📌 Vuex 프로젝트가 커질수록 props를 이용해 보내는 방식은 코드가 복잡해지고 유지 보수가 어려워 Vuex를 사용한다. Vuex는 React의 Flux 패턴에서 기인했다. 자세히 기록된 블로그 Vue.js 애플리케이션을 위한 상태 관리 패턴 + 라이브러리 모든 컴포넌트가 공유할 수 있는 싱글톤 방식의 데이터 저장소 npm install vuex State // store.js import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); export const store = new Vuex.Store({ // counter라는 state 속성을 추가 state: { counter: 0 } }); state : 컴포넌트 간에 공유할 data 속성 뷰에..
📌 Slot slot은 부모 컴포넌트에서 자식 컴포넌트의 엘리먼트를 지정할때 사용 부모에 따라서 자식의 컴포넌트에 영향을 받을 테니, 컴포넌트 재사용성면에서 좋은 장점을 가짐 태그 사용 {{header}} {{header}} {{header}} 📌 Named Slot 지정 슬롯 {{header}} {{header}} 👉 주의 {{header}} {{titl}} {{author}} component가 끝나기 전에 authorLabel, titleLabel이 출력되어야 하므로 ⇒ template 태그 쓰면 사용 가능 ⭐ (밑 목록 Slot에 기록) ⇒ 아무 값도 출력 되지 않음 component의 props에는 title, author만 존재 {{header}} {{titleLabel}} {{authorLa..
📌 Props 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할때 사용되어지는 단방향 데이터 전달 방식 하위 컴포넌트에서는 props 옵션을 사용해 수신할 props를 명시적으로 선언해야 함 # 하위 컴포넌트 js Vue.component('child', { // props 정의 props: ['message'], // 데이터와 마찬가지로 prop은 템플릿 내부에서 사용할 수 있으며 // vm의 this.message로 사용할 수 있습니다. template: '{{ message }}' }) # 상위 컴포넌트 html template
📌 Components 기본 HTML 엘리먼트를 확장하여 재사용가능한 코드를 캡슐화하는 데 도움이 됨 각각의 컴포넌트 간 데이터 이동은 단방향만 가능 가져올 때는 부모 컴포넌트에 props로 변수에 값을 넣어주면 자식이 읽어올 수 있음 📌 전역 컴포넌트 뷰로 접근 가능한 모든 범위에서 사용 가능 뷰 라이브러리 로딩하고 나면 접근 가능한 Vue 변수를 이용하여 등록함 vue가 만들어지기 전에 미리 만들어 둬야함 Vue.component('컴포넌트 이름', '옵션') 📌 지역 컴포넌트 특정 인스턴스에서만 유효 범위를 가짐 my-componet 와 myComponent 는 똑같은 걸로 인식 Vue3 에서는 component 부를 때 단일 태그로 가능했는데 Vue2 는 단일 태그로 하니까 오류났음 const c..
