분류 전체보기 검색 결과

해당 글 188건

vue-chartjs Options

chart.js 2.9.4와 vue-chartjs 3.5.1 버전을 사용하면서 옵션에 있는 항목들이 궁금해서 콘솔로 찍어서 작성함. - 콘솔에 찍은 방법 /* vue-chartjs */ options: { onClick: event => { console.log(this.$data._chart.options) } } /* chart.js */ options: { onClick: event => { console.log(this.$data.chart.options) } } - 옵션 내용 ( 라인 차트 기준, 사용해 볼 때마다 업데이트 예정 ) /* * 들어가는 옵션 종류를 적어놓은 것들은 맨 앞에 있는 것이 default * ƒ ()는 function */ options: { animmation: { du..
잡학 2021. 8. 6. 10:23

뷰 필터

뷰 필터 - 뷰의 필터는 화면에 표시되는 텍스트의 형식을 쉽게 변환해주는 기능 - 가장 간단하겐느 단어의 대문자화부터 다국어, 국제 통화 표시 등 다양하게 사용할 수 있다. 필터 사용 방법 - 필터를 사용하는 방법은 다음과 같다. {{ msg || capitalize }} new Vue({ el: '#app', data: { msg: 'hello', }, fillters: { capitalize: function(value) { if(!value) return '' value = value.toString() return value.chatAt(0).toUppperCase() + value.slice(1) }, }, }) - 위의 코드를 실행하면 Hello 텍스트가 화면에 출력된다. - 필터를 사용하지 ..
JavaScript/Vue.js 2021. 8. 2. 14:57

믹스인과 하이 오더 컴포넌트 비교 분석

HOC vs Mixins 하이 오더 컴포넌트는 리액트 진영의 함수형 프로그래밍에서 기반한 컴포넌트 개발 패턴입니다. 컴포넌트의 코드를 재사용하기 위한 방법이기도 하지만 캡슐화(encapsulation)과 컴포넌트 추상화를 구현하는 방법이기도 한데요. 컴포넌트의 로직을 훼손하지 않고 재사용성을 최대한 끌어올리겠다는 전략이기도 합니다. 예를 한번 들어볼게요. HOC를 이용한 접근 방식의 예 일반적으로 HOC를 이용하여 컴포넌트를 구현하게 되면 다음과 같이 컴포넌트 관계에서 층이 하나 더 생깁니다. 일반 : 상위 - 하위 HOC : 상위 - HOC - 하위 위와 같이 HOC를 이용하여 컴포넌트를 개발해 나가는 경우 상위와 하위의 컴포넌트 로직은 변경하지 않은 채 기능을 확장해 나갈 수 있습니다. 가장 간단한 ..
JavaScript/Vue.js 2021. 8. 2. 10:53

믹스인(Mixins)과 스토어(Store) 생각 정리

해당 글은 Vue.js를 공부하면서 '믹스인과 스토어를 언제 사용하고, 어떻게 다를까?' 라는 생각이 들어서 정리한 글입니다. 개인적인 생각이므로 전부 맞다고 볼 수 없다고 생각합니다. Mixins - Vue.js 기능 - 공통적으로 사용할 코드를 포함하고 있다. - 다중 상속을 지원한다. (Java에서의 인터페이스?) - 컴포넌트에 재사용 가능한 기능을 배포하는 유연한 방법이다. - 사용 방법 new Vue({ mixins: [myMixin],// 뷰에 사용할 믹스인을 선언해준다. data() { return {} }, method: {}, }) - 믹스인과 믹스인을 사용하는 컴포넌트에서 중복된 변수가 있다면 컴포넌트에서 선언된 변수가 우선순위로 사용된다. * 22.07.15 추가 현재는 사용한다면 아..
JavaScript/Vue.js 2021. 8. 2. 10:25

Vuex (v4.x)

Vuex란? - 복잡한 애플리케이션에서 컴포넌트 수가 많이지면 컴포넌트 간의 데이터 전달이 어려워진다. Vuex는 Vue.js 애플리케이션을 위한 상태관리 패턴 + 라이브러리이다. - 모든 컴포넌트에 대한 중앙집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 변경할 수 있다. - Vuex를 이용하지 않는다면 컴포넌트 간에 데이터를 주고받는 것은 방법은 있지만, 대규모 프로젝트가 될수록 매우 복잡해진다. - 데이터를 store에 저장하고, 프로젝트 전ㅊ에서 사용할 수 있도록 해주는 것이 Vuex이다. Vuex 설치 - 터미널에서 다음 명령어를 통해 설치한다. npm install vuex@next --save 시작하기 - 모든 Vuex 애플리케이션의 중심에는 store가 있다. 저장소(store)는 ..
JavaScript/Vue.js 2021. 7. 19. 13:56

Reusability & Compostion

Composition API - 컴포넌트 내에서 사용하는 특정 기능을 갖는 코드를 유연하게 구성하여 사용할 수 있도록 Vue 3 버전에 추가된 함수 기반의 API이다. - 그동안 Vue는 '프로젝트 규모가 커질수록 관리하기 힘들다'는 단점이 있었다. data, computed, watch, methods 등 프로젝트 규모가 커질수록, 컴포넌트의 계층 구조가 복잡할수록 코드에 대한 추적 및 관리가 어려웠다. - 하지만 컴포지션 API를 이용하면 Setup이라는 메소드 안에서 한 덩어리로 코드를 구현할 수 있어서 코드에 대한 관리가 훨씬 쉬워지게 된다. - 즉, 컴포지션 API는 그동안 Vue가 가지고 있던 단점을 보완하기 위해서 추가된 Vue 3 버전의 핵심 기능이다. Setup - Setup은 컴포지션 ..
JavaScript/Vue.js 2021. 7. 19. 11:32

Vue Router

라우팅 - 사용자가 접속한 주소에 따라 페이지가 달리지는 것 샘플파일로 vue-router 살펴보기 // scr/App.vue Home | About - 코드에 router-link to="/", router-link to="/about" 부분이 있다. 해당 부분의 링크를 클릭하고 브라우저 URL을 보면 Home을 클릭하면 localhost:8080, About을 클릭하면 localhost:8080/about으로 바뀌는 것을 확인할 수 있다. (크롬에서 개발자 모드로 확인을 하면 router-link to="/" 코드가 a href="/"로 변경되는 것으로 보아 같은 기능을 수행하는것 같다.) - 개발한 페이지에서 화면이 어떻게 브라우저의 주소가 바뀔 때마다 바뀌어 보이도록 설정되는지 알아보자 // sr..
JavaScript/Vue.js 2021. 7. 16. 18:23

컴포넌트 심화 학습 (Provide/Inject, Template refs)

Provide/Inject 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달해야 하는 경우 props를 사용하면 된다. 그런데 만약에 컴포넌트 계층 구조가 복잡하게 얽혀있어서 부모 컴포넌트로부터 자식 컴포넌트, 그리고 그 자식 컴포넌트의 자식 컴포넌트로 데이터를 전달하는 경우가 발생하면 props를 통해 데이터를 전달하는 것은 굉장히 복잡한 코드를 양산하게 된다. 이러한 경우에 사용할 수 있는것이 Provide/Inject이다. 컴포넌트의 계층 구조가 아무리 복잡하더라도 부모 컴포넌트에서는 provide 옵션을, 자식 컴포넌트에서는 inject 옵션을 통해 데이터를 쉽게 전달할 수 있다. 컴포넌트 구조가 다음과 같다고 가정을 한다. Root ∟ ParentComponent ⊢ ChildComponent1 ..
JavaScript/Vue.js 2021. 7. 16. 14:24