728x90 반응형 전체 글170 [Vue.js] Hacker News - 외부 라이브러리 모듈화 외부 라이브러리 모듈화 이유 Vue.js 관련 라이브러리가 없을 때 일반 라이브러리를 결합할 수 있어야 한다. 종류 Chart DatePicker Table Spinner ... 외부 라이브러리 모듈화 실습하기 chart.js 이용하여 차트 라이브러리 설치 및 차트 그리기 실습 1. npm i chart.js 실행하여 차트 라이브러리 설치 // Terminal jskim@DESKTOP-SI6DJ17 MINGW64 /d/dev/study/vue-charts/chart-lib (master) $ npm i chart.js 2. App.vue에 설치한 라이브러리 import import Chart from 'chart.js'; 3. mounted() 라이프 사이클 훅에서 차트 그리기 (ref 속성) Chart.. 2020. 10. 5. [Vue.js] Hacker News - Async & Await를 이용한 비동기 처리 Async & Await 자바스크립트 비동기 처리 패턴의 최신 문법으로 Promise와 Callback에서 주는 단점을 해결하고 자바스크립트의 비동기적 사고 방식에서 벗어나 동기적(절차적)으로 코드를 작성하는 문법 형식 async function fetchData() { await getUserList(); } 예제 async function fetchData() { var list = await getUserList(); console.log(list); } function getUserList() { return new Promise(function(resolve, reject) { var userList = ['user1', 'user2', 'user3']; resolve(userList); });.. 2020. 9. 25. [Vue.js] Hacker News - 데이터 호출과 UX 데이터 호출 시점 1. 라우터 네비게이션 가드 특정 URL로 접근하기 전의 동작을 정의하는 속성(함수) 2. 컴포넌트 라이프 사이클 훅 created : 컴포넌트가 생성되자마자 호출되는 로직 데이터 호출 시점 문제 해결하기 지금까지 구성한 Hacker News 시스템에서 문제점이 있다. 페이지 이동 시 이전 페이지 데이터가 잠깐 표시되는 현상 구현한 로딩바 표시 시점 오류 현상 이와 같은 문제 발생 원인은 데이터 호출 시점이 불분명하게 정의되어 있어 발생한 문제이다. 기본적인 호출 순서 src/mixins/ListMixin.js 내 this.$store.dispatch('FETCH_LIST') src/store/actions.js 내 FETCH_LIST src/api/index.js 내 fetchList.. 2020. 9. 25. [Vue.js] HackerNews - Mixin과 하이 오더 컴포넌트 이벤트 버스 컴포넌트간에 데이터를 주고받는 방법 형식 // 비어있는 Vue 객체가 이벤트 버스 var eventBus = new Vue(); // 이벤트 발송 eventBus.$emit('이벤트명', 데이터); // 이벤트 수신 eventBus.$on('이벤트명', function(데이터)); 이벤트 버스를 통한 스피너 컴포넌트 만들기 페이지 이동 시 로딩바(스피너) 컴포넌트를 만들어보자 구현하기 1. src/components/Spinner.vue 생성 2. src/utils/bus.js 생성 import Vue from 'vue'; // 이벤트 버스 생성 export default new Vue(); 3. App.vue에 Spinner.vue 등록 및 필요 로직 추가 4. NewsView, AskVi.. 2020. 9. 24. [Vue.js] Hacker News - 컴포넌트 공통화 컴포넌트 공통화 리팩토링 페이지에서 공통적으로 사용되는 부분들을 컴포넌트로 만드는 작업. 하나의 피드를 컴포넌트로 만들어 컴포넌트를 반복적으로 뿌리는 것이 더 효율적이다. 리스트 아이템 컴포넌트 공통화 아이템 리스트를 뿌려줄 컴포넌트를 공통화를 하여 NewsView, AskView, JobsView에 공통적으로 작성된 코드를 정리할 수 있다. 구현하기 1. src/components/ListItem.vue 생성 {{ item.points || 0 }} {{ item.title }} {{ item.title }} {{ item.time_ago }} by {{ item.user }} {{ item.domain }} ※ router name은 src/routes/index.js에 VueRouter의 route.. 2020. 9. 23. 이전 1 ··· 14 15 16 17 18 19 20 ··· 34 다음