본문 바로가기

Vue.js10

[Vue.js] chunk-venders.js 용량 줄이기 및 속도 개선 Vue.js 로 개발 후 운영 중인 사이트에 문제가 생겼다. Vue.js 는 처음에 모든 리소스를 한번에 받아오는게 문제였다. 그 모든 것이 압축된 파일인 chunk-vendors.js 파일의 크기가 작을때는 문제가 없지만, 어느새 12.3MB 까지 불어난 탓에 인터넷 속도가 느린 나라에서는 처음에 화면을 불러오는데 너무 많은 시간이 걸린다고 한다. 처음에는 lazy-loading 으로 컴포넌트 단위로 분리를 시켜보았지만, 차이가 미미 했다. 이 밖에도 이미지 사이즈 줄이기 등 다양한 방법이 있지만 구글링을 통해 chunk-vendors.js 을 일정한 크기로 쪼개는 방법을 찾았다. // vue.config.js 파일 configureWebpack:{ mode: 'development', devtool:.. 2023. 5. 18.

[Vue.js] Chart.js 차트 데이터 0 인 값 숨기기 Chart.js 플러그인을 처음 사용할때는 custom 이 쉽지 않아 보였는데, 이것 저것 적용하다 보니 역시나 내가 잘 몰랐던 것이었다. 누적차트를 만들고 나서 아래와 같이 Mon ~ Sun 까지 값이 0인 데이터까지 표시하는 것은 불필요하다 생각되었다. 이전 게시글에서 total 값을 나타내는 것을 활용하여 0 인 데이터들을 숨겨볼 것이다. tooltips: { callbacks: { footer: function (data) { // 누적 총합을 나타내는 코드 var total = 0; for (var i = 0; i < data.length; i++) { total += data[i].xLabel; } return "Total: " + total; }, // 추가된 코드 label: functio.. 2022. 11. 8.

[Vue.js] Chart.js labels hover 시 데이터(tooltip) 보이기 Chart.js 에서 기본적으로 해당 막대/차트 위에 마우스를 올려야 tooltp 이 보인다. 그런데 위와 같이 June 은 8000건 이상이고 January 는 10건일때 범위 차이가 너무 커져서 막대위에 정확히 마우스를 올리기 쉽지 않다. 이 상태는 사용성이 너무 떨어져서 January 라벨 위에 마우스를 올렸을때도 tooltip이 보이도록 즉, 각 라벨위에 hover 가 동작하도록 변경하려고 한다. options: { tooltips: { mode: 'index', intersect: false }, } 간단하게 options 에 이렇게 추가하면 된다. chart.js Document 에 다음과 같이 설명하고 있다. 설정이 true 이면 intersect첫 번째 교차 항목이 데이터의 인덱스를 결정하.. 2022. 11. 4.

[Vue.js] Char.js 라벨 값(value) 표시하기 Chart.js 플러그인에 옵션과 다양한 기능을 전부 다 알고 사용하긴 어려우니 필요할때마다 찾아보게 된다. 그런데 생각보다 버전별로 적용하는 것도 달라서 라벨 값 표시하는데 애를 좀 먹었다. 내가 사용한 chart.js 버전은 다음과 같다 chart.js : 2.9.4 chartjs-plugin-datalabels : 0.7.0 vue-chartjs : 3.5.1 나는 chart.js 2.x 를 사용해서 datalabels 를 2.x 를 설치했을때도 동작을 하지 않앗고, 1.x로 내렸을때도 동작하지 않았다. 찾고 찾아서 0.7.0 버전을 설치해서야 라벨 값을 표시 할 수 있었다. 만약 chart.js 3.x 를 사용한다면 datalables 는 2.x 이상 필요하며 자세한 내용은 아래 공식문서에서 확인.. 2022. 10. 28.

[Vue.js] Chart.js 누적 막대 그래프 총합 표시하기 (Stack Bar, Total) Chart.js 플러그인 기본 옵션으로는 누적 막대그래프의 total 값을 나타내지 않는다. 이는 option 의 tooltips 로 간단하게 구현 가능하다. tooltips: { mode: "label", callbacks: { footer: function (data) { var total = 0; for (var i = 0; i < data.length; i++) { total += data[i].yLabel; // 세로막대는 yLabel , 가로막대는 xLabel } return "Total: " + total; }, }, },option 들을 정의할때 이 코드만 추가하면 된다. 막대 개별 값과 총 합을 확인 할 수 있다. 2022. 10. 25.

[Vue.js] Hot Reload 동작 안할때 예전에 만들어 놨던 Vue.js + SpringBoot 프로젝트를 새로 띄웠는데 Vue 의 장점인 hot reload 가 갑자기 동작을 하지 않았다. Vue 의 코드를 바꾸면 항상 rebuild 후 스프링을 재시작하는 것이 너무 불편해서 급하게 구글에 검색해서 간단한 해결책을 찾았다. package.json 에 --watch 추가 build --watch 를 통해 실시간으로 재빌드 하여 변화를 감지하도록 추가 하였다. 이제 예전처럼 Vue의 내용을 변경하면 바로 반영이 되었다. 2022. 10. 18.

Vue.js(4) Router 및 Axios, async await 개념 Vue Router 싱글페이지 애플리케이션 구현할 때 사용하는 라이브러리 이다. 페이지간에 이동하는 기능 구현할때 사용한다. 라우터 인스턴스 생성 var router = new VueRouter({ ... }) 라우터 옵션 추가 가능 routes : 라우팅 할 URL 과 컴포넌트 값 지정 path : 페이지 url component : 해당 페이지가 뿌려질 컴포넌트 mode URL 의 해쉬 값 제거 속성 mode=''history' ===> # 가 기본값으로 붙는 것을 제거 인스턴스에 라우터 인스턴스 등록 new Vue({ router: router ...}) 설치 https://router.vuejs.org/installation.html 공식사이트 설치 링크 npm install vue-router .. 2022. 10. 9.

Vue.js(3) Vue 인스턴스 속성 및 컴포넌트 Vue 인스턴스 new Vue({ el:, template:, data: , methods: , created: , watch: , }); el: 인스턴스가 그려지는 화면의 시작점 template: 화면에 표시할 요소 data: 데이터 methods: 이벤트 함수들 created: 라이프사이클 중 하나 watch: data에서 정의한 속성이 변경됐을 때 추가 동작을 정의 computed: 데이터를 계산한 결과를 속성으로 사용하기 위해 사용 methods 함수저장소 computed 데이터의 값에 따라서 바뀌는 값을 정의하는 속성이다. 템플릿 내에 표현식을 넣을 수 있다. 하지만 간단한 연산일 때만 이용하는 것이 좋다. {{ message.split('').reverse().join('') }} 이렇게 연산.. 2022. 10. 9.

Vue.js(2) vue 인스턴스 및 템플릿 문법 Vue Instance Vue.js 화면 개발을 위해 꼭 생성해야 하는 필수 단위이다.Instance 생성 // 새롭게 Vue를 선언 new Vue({ el: '#app', // 어떤 요소에 적용을 할 지 정함 여기서는 HTML 코드에 선언된 id="app"인 div 태그를 지정 data: { // data 는 해당 VueJS에서 사용할 정보들을 선언해주는 역할 title: '안녕 VueJS!' } }) 인스턴스 사용할 수 있는 속성과 API new Vue({ el: , // 인스턴스가 그려지는 화면의 시작점 (특정 HTML태그) template: , // 화면에 표시할 요소 (HTML, CSS 등) data: , // 뷰의 반응성(Reactivity) 가 반영된 데이터 속성 methods: , // 화.. 2022. 10. 9.

Vue.js(1) 프로젝트 생성 및 프로젝트 구성 MVVM 이란? 비즈니스 로직과 프레젠테이션 로직을 UI로부터 분리하는 것이다. 역사 : 데이터 바인딩을 활용한 환경에서 데이터와 프레젠테이션 로직을 분리하기 위해서 만들어진 디자인 패턴이다. 1. 모델 Model 비즈니스 로직과 데이터를 다룬다.2. 뷰 View UI와 UI 로직을 다룬다.3. 뷰 모델 View Model View 를 표현하기위해 만든, View를 위한 Model이다. View를 나타내주기 위한 Model 이자 View 를 나타내기 위한 데이터 처리를 하는 부분이다. 동작 사용자의 Action들은 View를 통해 들어오게 됨 View에 Action이 들어오면, Command 패턴으로 View Model에 Action을 전달 View Model은 Model에게 데이터를 요청 Model은 .. 2022. 10. 9.

이전 1 다음

티스토리툴바

티스토리툴바