시그마 삽질==six 시그마

Vue에 입문하기 좋은 장기효님의 Do it Vue.js 책 추천드립니다 구매를 원하시는 분은 요기를 클릭해주세요 해당 글은 책 내용을 바탕으로 작성되었습니다. 1. Vue.js 웹 페지이 화면을 개발하기 위한 프런트엔드 프레임워크 특징 리액트와 앵귤러에 비해 성능이 우수하고 빠름 리엑트의 가상 돔기반 렌더링 특징과 단방향 데이터흐름 그리고 앵귤러의 양방향 데이터 바인딩 특성 가짐 컴포넌트 기반 프레임워크 (렌더링: 브라우저에 웹 페이즈를 그래내는 동작) (가상돔을 활용시 특정 돔 요소를 추가하거나 삭제하는 변경이 일어날때 화면 전체를 다시 그리지 않고 프레임워크에서 정의한 방식에 따라 화면을 갱신함) 2. 뷰 템플릿 뷰템플릿은 HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직..

vue.js 의 props 와 event는 부모자식간 상위 하위 관계의 컴포넌트끼리의 통신에 적합하다 그런데 만약 형제자매인 같은 레벨의 컴포넌트끼리간 데이타를 전달해야된다면? 그때마다 필요치 않은 부모(상위) 컴포넌트를 만들어서 하위 ->상위->하위로 왔다갔다 해야하나? 그 문제로 인해 이벤트 버스가 나오게 됬다 생성한 인스턴스를 이용, 보내는쪽은 $emit, 받는쪽은 $on 1. 이벤트 버스 코드 형식 //이벤트 버스를 위한 추가 인스턴스 생성 var eventBus = new Vue(); //이벤트를 보내는 컴포넌트 methods: { showLog: function() { eventBus.$emit('전달 이벤트명', 전달 데이터); } } //이벤트를 받는 컴포넌트 created: functio..

자식은 events를 통해 부모에게 메시지를 보낸다. 하위 컴포넌트에서 상위 컴포넌트로의 통신방법은 하위 컴포넌트에서 이벤트를 발생시켜서 상위 컴포넌트 메소드를 트리거한다. 1. 코드형식 //하위 컴포넌트에서 이벤트 호출 this.$emit('이벤트 명'); //상위 컴포넌트 이벤트 수신 방향을 ----> 로 읽으면 편함 하위 이벤트가 상위 메소드를 트리거!! 2. 이벤트 예시 Vue.component('child-component', { template: 'show', methods: { myMethodCall: function() { this.$emit('son-call-parent'); } } }); new Vue({ el: '#app', methods: { parentCalled: function..

부모는 props 속성을 통해 자식에게 데이터를 전달한다 props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할때 사용하는 속성이다. 1. 코드 형식 props 속성을 하위 컴포넌트에서 정의해서 거기에 부모 속성(데이터)를 넣어주는 형식이다. //상위 컴포넌트