programming study/Vue (70) 썸네일형 리스트형 Vue.js - 데이터 흐름 처리 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념 강의를 토대로 작성하였습니다. 1. props 부모 컴포넌트 ... 자식 컴포넌트 user {{ info.id }} {{ info.created }} ... 2. 자식 컴포넌트에서 바로 접근 부모 컴포넌트 ... 자식 컴포넌트 user {{ userInfo.id }} {{ userInfo.created }} ... 3. 2가지 데이터 처리 흐름 비교 props 컴포넌트 간의 데이터 흐름을 명시적으로 함 자식 컴포넌트에서 바로 접근 vuex의 의도에 맞게 사용 state를 어디서든 접근 가능한 이점을 활용 둘 다 틀린 방식이 아니므로 상황에 맞게 적절하게 사용 Reference Vue.js 완벽 가이드.. Vue.js - 공통 컴포넌트 구현(2) - computed, tempalte와 v-if 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념 강의를 토대로 작성하였습니다. 1. computed 속성 computed는 미리 계산된 속성 계산된 속성은 캐시 되며 의존하고 있는 반응형 속성이 변경되는 경우 다시 평가 됨 예시 {{ item.points || 0}} {{ item.title }} {{ item.time_ago }} by {{ item.user }} ... 2. tempalte와 v-if를 응용한 분기 tempalte 가상의 태그 내부적으로 분기처리하여 해당하는 조건이면 렌더링 v-if 페이지에 맞는 분기처리를 할 수 있는 디렉티브 예시 ... {{ item.title }} {{ item.title }} ... ... Referen.. Vue.js - 컴포넌트 공통화, 공통 컴포넌트 구현(1) 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념 강의를 토대로 작성하였습니다. 1. 컴포넌트 공통화 컴포넌트를 만들어서 컴포넌트를 반복적으로 사용하는 것이 효율적 설계 시, 컴포넌트 기반의 설계를 토대로 만드는 것이 좋음 2. 공통 컴포넌트 구현 라우트의 name 속성을 활용한 공통 컴포넌트 구현 route name 속성 지정 route에 name 속성을 지정하여 접근할 수 있음 // src/routes/index.js import Vue from 'vue'; import VueRouter from 'vue-router'; import NewsView from '../views/NewsView.vue'; import AskView from '../.. Vue.js - v-html, router transition 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념 강의를 토대로 작성하였습니다. 1. v-html 문자열에 포함된 태그 정보를 인식하여 태그로 변환 element의 innerHTML을 업데이트 XSS 공격으로 이루어질 수 있으므로 매우 위험할 수도 있음 신뢰할 수 있는 컨텐츠에만 v-html을 사용할 것 예시 2. router transition 특정 링크로 이동 시 Vue 내부적으로 제공되는 transition API를 사용하여 부드러운 화면 전환 구현 적용 Transition Classes Vue에 정의된 Transition Classes v-enter: enter의 시작 상태 엘리먼트가 삽입되기 전에 적용되고 한 프레임 후에 제거 v-enter.. Vue.js - 동적 라우트 매칭 원리 및 적용 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념 강의를 토대로 작성하였습니다. 1. 동적 라우트 매칭이란? 특정 라우트로 이동할 때 특정 파라미터를 넘길 수 있음 파라미터에 따른 페이지를 구현할 수 있음 ex) 문서 번호를 파라미터로 넘겨서 문서 번호에 따른 페이지 구현 페이지에서의 특정 정보를 가지고 다음 페이지로 이동 2. 동적 라우트 매칭 적용 라우트 정의 이동시킬 경로와 컴포넌트를 정의 url 뒤에 :파라미터명을 붙여서 페이지 이동시에 매칭시킬 파라미터를 정의 특정 페이지에서 해당 경로로 이동시킬 때 뒤에 파라미터를 전달 시킬 수 있게 됨 // src/routes/index.js import Vue from 'vue'; import VueR.. Vue.js - Vuex Helper, 스토어 속성 모듈화 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념 강의를 토대로 작성하였습니다. 1. Vuex Helper Vuex의 속성이나 메서드를 쉽게 사용할 수 있도록 도와주는 함수들 mapState 컴포넌트에서 state에 좀더 쉽게 접근할 수 있게하는 Helper {{ item.title }} mapGetters store의 getters를 쉽게 사용할 수 있게하는 Helper getters: store에서의 computed // src/store/index.js ... export const store = new Vuex.Store({ state : { news: [], jobs: [], ask: [], }, // computed와 동일한 속성 gett.. Vue.js - Vuex Actions와 Mutations 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념 강의를 토대로 작성하였습니다. 1. Actions Vuex에서 api 호출은 actions에서 하기 비동기 호출 Backend API를 호출하여 Mutations에 넘겨주기위한 속성 Vuex 구조상, actions에서 state에 바로 담을 수 없게 되어있음 Actions는 Vue Components에서 Dispatch라는 api로 호출 가능 2. Mutations Vuex에서 state값을 변경하거나 입력 Action이 일어나면 값을 전달받아 state에 변경 및 입력 3. 예시 src/store/index.js import Vue from 'vue'; import Vuex from 'vuex'; .. Vue.js - Vuex, Vuex 모듈화 및 state 적용 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념 강의를 토대로 작성하였습니다. 1. Vuex Vue의 상태(State)관리 도구 상태: 여러 컴포넌트 간에 공유되는 데이터 속성 서비스가 복잡해 졌을 때, 데이터를 다른 컴포넌트에 공유해야할 수도 있음 컴포넌트 레벨이 깊어지거나 관계가 복잡했을 때 상태관리 도구는 유용하게 사용 컴포넌트에서 API를 불러와 화면을 그리는 것이 아닌, Vuex에서 API를 불러옴 Vuex의 State에 API로 부터 받아온 데이터를 담음 State를 컴포넌에 전달하여 화면을 그림 Vuex 설치 npm i vuex 2. Vuex 모듈화 및 state 적용 Vuex 모듈화 Vuex와 관련된 코드를 별도의 폴더에 정리하여 모.. 이전 1 2 3 4 5 6 7 8 9 다음