반응형 vuejs21 Vue.js 완벽가이드 : (11) 외부 라이브러리 모듈화 방법 11. 외부 라이브러리 모듈화 방법 vus.js에서 외부 라이브러리를 사용하는 방법을 알아봅니다. Vue.js 관련 라이브러리가 없을 때 일반 라이브러리를 결합할 수 있어야 하기 때문에.. 외부 라이브러리 모듈 방법을 알고 있어야 합니다. 다음 사이트에서 개발자가 사용하는 framework 통계를 확인할 수 있습니다. https://2018.stateofjs.com/front-end-frameworks/overview/ 11.1 chart.js 적용 npm create chart-lib 로 새로운 프로젝트를 생성합니다. npm install chart.js --save를 실행하여 chart.js를 설치합니다. package.json내에 chart.js가 설치된 것을 확인할 수 있습니다. App.vue의 .. 2020. 4. 23. Vue.js 완벽가이드 : (10) 비동기처리 10. 리팩토링 : 비동기 처리 비동기 처리 패턴으로 가장 많이 사용하는 async & await 방식을 이용합니다. 비동기 처리 패턴을 이용하면 함수도 많이 줄어들고 이용하기 더 쉽도록 구성할 수 있습니다. var id = $.get('domain.com/id', function(id){ if (id === 'jhon') { var products = $.get('domain.com/products', function(products){ console.log(products); }); } }); function getId() { return new Promise(function(resolve, reject){ $.get('domain.com/id', function(id){ resolve(id); }).. 2020. 4. 23. Vue.js 완벽가이드 : (9) 네비게이션 가드 이번 리팩토링은 라우터에 대해 알아봅니다. [데이터 호출 시점] 컴포넌트 라이프 사이클 훅 created : (컴포넌트가 생성)되자마자 호출하는 로직 라우터 네비게이션 가드 특정 URL로 접근하기 전의 동작을 정의하는 속성(함수) 9-1. 네비게이션 가드 네비게이션 가드란, 라우터로 특정 URL에 접근근할 때 해당 URL의 접근을 막는 방법을 말합니다. 예를 들어, 사용자의 인증 정보가 없으면 특정 페이지에 접근하지 못하게 할 때 사용하는 기술입니다. 애플리케이션 전역에서 동작하는 전역 가드 특정 URL에서만 동작하는 라우터 가드 라우터 컴포넌트 안에 정의하는 컴포넌트 가드 특정 라우터에 진입하기 전에 혹은 진입할 때 특정 로직이 수행하도록 정의할 수 있습니다. Vue 공식 문서에 Navigation G.. 2020. 4. 23. Vue.js 완벽가이드 : (8) HOC, Mixin 8. 리팩토링 : HOC, Mixin 8-1. Spinner 컴포넌트 구현 로딩바를 표현하는 Spinner 컴포너트를 작성하겠습니다. 그리고 각 페이지로 진힙할 때 로딩바가 출현하도록 코드를 작성합니다. 먼저 /componets/Spinner.vue 를 작성합니다. 그리고 ListItem.vue의 created()에 정의한 코드를 제거합니다. /store/action.js/에 response를 반환하도록 수정합니다. export default { FETCH_NEWS(context) { fetchNewsList() .then(response => { context.commit('SET_NEWS', response.data); return response; }) .catch(function (.. 2020. 4. 23. Vue.js 완벽가이드 : (7) 리팩토링 7. 리팩토링 : Data Flow, Slot 사용자 정보를 표시하는 공통 컴포넌트를 만들어 보겠습니다. 7-1. 데이터 흐름 처리 1 기존에 사용자 페이지인 UserView.vue 에서 created() 가 호출될 때 사용자 정보를 store에 담아서 화면에 표현하는 작업을 하였습니다. 이 store 데이터를 이용하여 사용자 공통 컴포넌트를 작성하겠습니다. 사용자 공통 컴포넌트인 /components/UserProfile.vue를 생성합니다. computed를 통해 이미 store에 저장된 사용자 정보를 읽어 화면에 표기합니다. {{ userInfo.id }} {{ userInfo.created }} 그리고 기존의 정의된 UserView.vue에서 UserProfile를 호출합니다. 7-2. 데이터 흐.. 2020. 4. 23. Vue.js 완벽가이드 : (6) 스타일링 & 고급 컴포넌트 6. 리팩토링 : 스타일링, 공통 컴포넌트 리스트 아이템 컨포넌트 공통화를 위한 리팩토링을 진행합니다. 6-1. 컴포넌트 공통화 리팩토링 소개 AskView 컴포넌트 하나에 모든 데이터를 출력하였지만, 각 항목을 Component로 구성하여 리스트화를 작업하려 합니다. 이를 위한 공통 Component를 생성합니다. 6-2. News 리스트 스타일링 NewsView.vue 스탕일링을 합니다. 각 항목을 리스트로 표기합니다. 그리고 스타일링이 필요한 Tag에 클래스명을 지정하여 개별적인 스타일링을 수행합니다. {{ item.points }} {{ item.title }} by {{ item.user }} App.vue에 공통적인 스타일링을 추가합니다. 6-3. Ask, Jobs 리스트 스타일링 Ask와 J.. 2020. 4. 23. 이전 1 2 3 4 다음 반응형
