시그마 삽질==six 시그마

Vue에 입문하기 좋은 장기효님의 Do it Vue.js 책 추천드립니다. 구매를 원하시는 분은 요기를 클릭해주세요 해당 글은 책 내용을 바탕으로 작성되었습니다. HTML 파일에서 뷰 소스코드를 작성할때는 한계점이 있다. 2. .vue 파일의 예시 출처 : https://github.com/joshua1988/doit-vuejs 3. 뷰 CLI로 프로젝트 간단한 구성 예시 1) 뷰CLI 설치-> npm i vue-cli -g 2) 프로젝트 생성 -> vue init webpack-simple 3) 관련 라이브러리 설치 -> npm install 4) 프로젝트 구동 -> npm run dev 4. 폴더구조 설치후 폴더구조 webpack-simple > node_modules npm install 명령어로 ..

Vue에 입문하기 좋은 장기효님의 Do it Vue.js 책 추천드립니다. 구매를 원하시는 분은 요기를 클릭해주세요 해당 글은 책 내용을 바탕으로 작성되었습니다. 1. 뷰 리소스 초기에 권장했으나 2016녀말부터 공식 지원 중단 지금은 Axios로... 예제에서 response만 로그로 보면 body값이 문자열.. 프레임워크 목록 가져오기 2. Axios 뷰에서 가장 많이 사용하는 HTTP 통신 라이브러리 Promise 기반의 API형식이 다양하게 제공 data속성이 일반 문자열 형식이 아니라 객체 형태.JSON.parse()로 객체변환 불필요 프레임워크 목록 가져오기

Vue에 입문하기 좋은 장기효님의 Do it Vue.js 책 추천드립니다. 구매를 원하시는 분은 요기를 클릭해주세요 해당 글은 책 내용을 바탕으로 작성되었습니다. 1. Vue에서 라우팅이란? 웹페이지간 이동방법 싱글 페이지 애플리케이션에서 주로 사용 (서버에 웹페이지 요청해서 갱시하는게 아니라 미리 해당 페이지들을 받아놓고 페이지 이동시 클라이언트의 라우팅 이용 화면을 갱신하는 패턴 적용한 애플리케이션) 리액트,앵귤러 모두 라우팅 사용해서 화면 전환 2. 뷰 라우터 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리 태그 설명 페이지 이동태그. 화면에서는 로 표시되며 클릭하면 to에 지정한 URL페이지로 이동 페이지 표시 테그. 변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역 3. 일반..

Vue에 입문하기 좋은 장기효님의 Do it Vue.js 책 추천드립니다. 구매를 원하시는 분은 요기를 클릭해주세요 해당 글은 책 내용을 바탕으로 작성되었습니다. {{ message }}

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

Vuex란? Vue.js의 상태 관리를 위한 패턴 상태관리란 다수의 컴포넌트 사이의 데이터 전달 및 이벤트 통신을 한곳에서 관리하는 것 상태관리를 하면 props,event emit으로 인해 파이프로 사용하는 컴포넌트 수를 줄일 수 있음 상태관리를 하면 데이터 통신을 중장 집중식으로 하기에 데이터를 유기적 관리 및 흐름을 파악하기 쉬움 1. vuex 생성 var store = new Vuex.Store({ state: { // count라는 state 속성을 추가 count: 0 } }) 2. state 접근 new Vue({ el: "#app", store: store // 뷰 인스턴스의 store 속성에 연결 data : { ... }, methods: { changeCount: function() ..

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..