본문 바로가기

programming study/Vue

 (70)
Vue.js - 컴포넌트 디자인 패턴(Common) 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념 강의를 토대로 작성하였습니다. 1. Slot 마크업 확장이 가능한 컴포넌트 부모 컴포넌트에서 마크업을 넘겨받는 컴포넌트 예시 // 부모 컴포넌트 // 자식 컴포넌트에게 '제목'이라는 문자열 넘김 // 마크업도 가능 제목 ... ​ ​ // 자식 컴포넌트(main-title) // 부모 컴포넌트에서 '제목'이라는 문자열을 넘겨받게 됨 2. Controlled 결합력이 높은 컴포넌트 서드파티 라이브러리를 사용할 때 쉽게 컨트롤할 수 있게하는 디자인 패턴 3. Renderless 데이터 처리 컴포넌트 템플릿이 없고 스크립트에서 비즈니스 로직만 있는 컴포넌트 Reference Vue.js 완벽 가이드 - 실..
Vue.js - 외부 라이브러리 모듈화, ref, 플러그인화 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념 강의를 토대로 작성하였습니다. 1. 외부 라이브러리 모듈화 라이브러리가 공식적으로 Vue.js를 지원하지 않더라도 모듈화, 플러그인화여 사용에 용이하게 하기 컴포넌트 통신을 활용해서 컴포넌트 모듈을 제작 부모 컴포넌트에서 비지니스 로직을 돌리고 자식 컴포넌트는 최대한 로직을 빼서 만들기 라이브러리의 사용법을 보며 Vue.js에 맞게 적용 2. ref Reference Vue.js에서 DOM을 가져오는 방법 각각의 뷰 컴포넌트에서만 접근 가능한 접근자 다른 컴포넌트의 DOM 요소와 겹치지 않음 예시 ​ 3. 플러그인화 라이브러리를 사용하는 컴포넌트가 많아질 수록 불필요한 로직과 코드가 생기게 됨 플러그..
Vue.js - 라우터 네비게이션 가드 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념 강의를 토대로 작성하였습니다. 1. 네비게이션 가드 라우트에서 리디렉션 또는 네비게이션을 보호하는 데에 사용 ex) 로그인 인증 상태가 아니면 네비게이션을 보호하고 로그인 페이지로 리다이렉팅 세 가지 전달 인자를 받음 to: 이동할 라우트 정보 객체 from: 출발하는 라우트 정보 객체 next: to 라우트로 이동시키는 함수 2. beforeEnter 네비게이션 가드 중 하나 해당 라우트에 진입하기 전의 동작을 정의할 수 있음 라우트 설정 객체에 직접 정의 정의 방법 ... Vue.use(VueRouter); ​ // Vue Router를 관리하는 객체 export const router = new..
Vue.js - UX를 고려한 데이터 호출 시점 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념 강의를 토대로 작성하였습니다. 1. 데이터 호출 시점 컴포넌트 라이프 사이클 훅 created : 컴포넌트가 생성되지마자 실행되는 로직 라우터 네비게이션 가드 뷰 라우터로 특정 URL에 접근 시, 해당 URL의 접근을 막는 방법 라우터 네비게이션 가드가 컴포넌트 라이프 사이클 훅보다 선행 2. 컴포넌트 라이프 사이클 훅 라이프 사이클 beforeCreate 인스턴스가 방금 초기화 된 후 호출 created 인스턴스(컴포넌트)가 작성된 후 호출 데이터 처리, 계산된 속성, 메서드, 감시/이벤트 콜백 등과 같은 옵션 처리를 완료 API 호출 시점 beforeMount 마운트가 시작되기 바로 전에 호출 m..
Vue.js - Mixin 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념 강의를 토대로 작성하였습니다. 1. Mixin 공통 사용 로직, 기능들을 재사용하는 방법 컴포넌트 코드를 깔끔하게 정리할 수 있음 컴포넌트들에서 공통적으로 사용되는 로직을 정리할 수 있음 비즈니스 로직만 각 컴포넌트에 남길 수 있음 2. vs. HOC HOC의 단점 컴포넌트의 레벨이 깊어짐 컴포넌트 통신이 불편해질 수 있음 3. Mixin 형식 Mixin을 주입할 컴포넌트의 mixins 속성을 선언 후, 배열 안에 넣기 혹은 인스턴스 예시 const myPetMixin = { data() { return { petName: 'siru', isCat: true } }, methods: { showPet..
Vue.js - HOC 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념 강의를 토대로 작성하였습니다. 1. HOC High Order Component 컴포넌트의 코드마저 재사용하는 기술 React에서 기원 2. HOC 구현 HOC 정의 정의한 HOC에 맞게 Vuex의 Action, Mutation 과 api를 만들 것 해당 HOC는 route name을 dispatch로 보내서 해당하는 api를 호출하고 data를 mutation에 넘기도록 설계 됨 // HOC import ListView from './ListView.vue'; import bus from '../utils/bus.js'; export default function createListView(name..
Vue.js - 스피너 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념 강의를 토대로 작성하였습니다. 스피너 데이터를 불러오는 동안 유저에게 로딩바를 표시하는 기능 1. 스피너 컴포넌트 스피너 UI를 표시하는 컴포넌트 생성 props로 boolean인 loading을 받아와 로딩바를 표시 2. 이벤트 버스 로딩 상태를 전역적으로 관리하기 위해 이벤트 버스 사용 버스란, 빈 이벤트 객체를 만들어서 컴포넌트 간의 데이터를 전달하는 것을 의미 // util/bus.js import Vue from 'vue'; export default new Vue(); 2.1 exprot default와 export // export default의 경우 export default new ..
Vue.js - slot 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념 강의를 토대로 작성하였습니다. slot 컴포넌트 내에 slot 태그를 정의 slot 태그 안은 비어있음 slot 태그 안의 내용은 상위 컴포넌트에서 정의 하위 컴포넌트에서 상위 컴포넌트로부터 정의될 영역에 slot태그를 넣고 name을 지정 상위 컴포넌트에서 하위 컴포넌트의 slot을 정의할 때 slot의 name에 맞게 적용 하위 컴포넌트를 부르는 페이지마다 데이터에 접근하는 속성이 다를 때 사용하면 유용 예시 하위 컴포넌트 slot 태그 정의 ... 상위 컴포넌트1 하위 컴포넌트에서 사용할 slot 내부를 정의 {{ userInfo.id }} {{ userInfo.created }} {{ user..

티스토리툴바