본문 바로가기

Frontend/Vue.js5

[Vue] 페이지 새로고침 기능을 만들자! (on-off 기능 추가) bootstrap-vue 를 활용해서 새로고침 아이콘(b-icon) 으로 새로고침을 on-off 하는 기능을 만들자! 이제 간단한 조건문을 곁들인 컴포넌트 개발은 많이 헤매지 않고 할 수 있는 것 같다. 역시 백문이 불여일타 🤓 2021. 8. 30.
[Vue] bootstrap-vue 에서 icon 을 사용했는데 왜 안나오지?? (b-icon 삽질 후기) 네. 결론부터 말하면 삽질 맞습니다. 공홈 가이드를 백번 읽고, 구글링하면서 수정 -> 빌드 -> 확인 루프만 7시간 내내 돌린 삽질 후기 입니다 🤭 우선 특정 아이콘을 import 하지 않고 모두 불러와서 (all import) 사용하는 방식을 사용하고자 공식 홈페이지 (https://bootstrap-vue.org/docs/icons) 에 나와있는 'Module bundlers' 섹션을 정독했다. 그 런 데 이렇게 영역만 잡히고 아이콘이 노출되지 않았다. (not showing) 심지어 `b-icon` 컴포넌트를 찾을 수 없다는 오류메세지 까지 만나게 되는데.. vue.runtime.esm.js?ff9b:619 [Vue warn]: Unknown custom element: - did you regi.. 2021. 8. 23.
[Vue] b-icon 전역 컴포넌트로 등록해서 별도로 관리하기 vue + bootstrap 으로 페이지를 관리하고 있었고, 필요한 아이콘은 bootstrap 에서 제공해주는 아이콘(b-icon) 을 사용하고 있었다. 디스플레이 아이콘을 노출합니다. 그러다보니 각 컴포넌트 별로 아이콘을 사용하기 위한 위 코드가 중복으로 들어가있었고, 중복을 제거하기 위해 b-icon 을 전역 컴포넌트로 등록해서 별도로 관리하기로 결심했다. 🌝 위와 같이 전역 컴포넌트로 사용 할 Icon.vue 파일을 생성해주고, (props 로 icon 을 노출하도록 했는데 이게 최선인지는 잘 모르겠다..) // 전역 컴포넌트로 사용하려고 만든 Icon.vue import import Icon from './components/Icon' // 전역 컴포넌트로 사용하기 위해서 선언 Vue.compon.. 2021. 8. 20.
[Vue.js] Chart.js 로 그린 Doughnut Chart 에서 없는 데이터의 label 숨기기 (empty data label hide) Vue-Chart.js 로 도넛차트를 그렸는데, 아니 멜론만 9개인데 위에 label 이 줄줄이 나올 필요가 있나? 싶어서 숨기는 방법에 대해서 찾아보다가 성공했다 ! 핵심은 data 세팅할 때 값이 없으면 (나같은 경우는 0이면) undefined 로 세팅하는 것 !!! (null 세팅은 안된다 😅) axios .post(...) .then(res => { let chartData = res.data; this.renderChart( { labels: [ "바나나", "사과", "포도", "체리", "멜론", "수박", "참외" ], datasets: [ { backgroundColor: [ this.randomColors(), // 따로 정의한 method this.randomColors(), thi.. 2021. 6. 10.
[Vue.js] vue-router 로 component 에 props data 전달하는 방법 Vue.js 를 배워보겠다고 책도 읽고 강의도 보았지만 역시 개발자는 코딩을 해봐야되나보다.. 백문이 불여일타 🙏 # 하게 된 계기 (tmi) - Vue.js 프로젝트를 진행하면서 모니터링 페이지를 만들고 있는데, 각 컴포넌트의 title 이 여러 군데에서 하드코딩 되어 있는 것을 보고.... 상수처럼 한 번만 정의해보자! 하게 됨 # 검색 1. vue-router props data 2. vue-router passing data 3. vue-router access app vue data 4. component props data ..... 등등 수많은 키워드로 검색했지만 거의 다 공식홈페이지에 있는 내용이라서 도움이 되지 못했다 😥 나는 App.vue 에서 data 로 각 컴포넌트의 title 을 .. 2021. 6. 4.

티스토리툴바