728x90
반응형
- [Vue.js] VS Code에서 template 태그의 빨간 줄 없애기2022-11-25 11:13:13"VS Code에서 폴더 열기 할 때 해당 프로젝트의 폴더 열기"로 해결 vue cli로 프로젝트 생성 후 작업하다 보면 이유 없이 태그에 빨간 줄 에러 표시가 표시되기도 한다. 이 문제는 VS Code에서 폴더 열기를 할때 해당 프로젝트의 폴더를 열기하면 해결된다. 만약 상위 폴더를 열기 하면 에러가 표시되나 코딩에 영향을 주지는 않는다.
- [Vue.js] eslint 설치 에러 해결(버전 문제)2022-11-15 15:15:03package.json의 devDependencies에 등록된 eslint가 설치가 되지 않아 버전을 변경하였더니 문제가 해결되었다. eslint 설치 에러 "devDependencies": { (...생략...) "eslint": "^7.32.0", "eslint-plugin-import": "^2.25.3", "eslint-plugin-node": "^11.1.0", "eslint-plugin-promise": "^5.1.0", "eslint-plugin-vue": "^8.0.3" }, 위 버전을 install 했는데 아래와 같이 에러가 발생하였다. >npm install npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tr..
- [Vue.js] Chartjs의 legend 위치 및 모양 수정2022-11-13 23:52:53legend의 position 및 point style 수정 legend의 기본 위치는 top이고 point style은 직사각형 모양이다. 그런데 [그림 1]과 같이 bottom에 위치시키고 정사각형 모양의 point로 표시하고 싶었다. 먼저 options에 아래의 코드를 추가한다. plugins: { legend: { position: 'bottom', labels: { usePointStyle: true } } } 그리고 datasets의 각 객체에 pointStyle: 'rect'를 추가한다. pointStyle 옵션에 대한 정보는 아래 링크에서 확인할 수 있다. https://www.chartjs.org/docs/latest/configuration/elements.html#point-style..
- [Vue.js] vue-chartjs를 이용해 "누적 막대 차트" 구현2022-11-12 12:07:20vue-chartjs로 "누적 막대형 차트(Stacked Bar Chart)" 구현 Vue.js 3에서 누적 막대형 차트를 구현하고자 하였다. 여러 라이브러리 중에서 vue-chartjs가 가장 무난해 보여 선택했다. https://vue-chartjs.org/guide/ Getting Started | 📈 vue-chartjs Getting Started vue-chartjs is a wrapper for Chart.js in vue. You can easily create reuseable chart components. Supports Chart.js v3. Introduction vue-chartjs lets you use Chart.js without much hassle inside Vue. ..
- [Vue.js] Vue.js에서 SASS 전역 로드하기2022-11-04 09:23:44SASS 모듈 설치 npm install --save-dev node-sass sass-loader vue.config.js 작성 module.exports = { css: { loaderOptions: { scss: { additionalData: `@import "@/assets/scss/add.scss";` } } } } 사용할 component에서 로드 참고자료 https://k1005.github.io/2021/08/07/globally-load-sass-into-vuejs-app/ Vue.js 애플리케이션에 SASS를 전역적으로 로드하기 Vue.js 애플리케이션에 SASS를 전역적으로 로드 https://vueschool.io/articles/vuejs-tutorials/globally-loa..
- [Vue.js] 실시간 두자리 시간(시, 분, 초) 표시 - 디지털 시계 | AM, PM 표시 | 날짜(년-월-일) 표시2022-11-01 01:50:17AM, PM | 시분초 | 연월일 시분초, 년월일은 문자열 타입으로 변경하고 padStart로 2자리로 표시하였다. 시간은 12시간으로 표시되도록 하였다. export default { components: {}, data() { return { ampm: '', time: '', date: '' } }, created() { setInterval(() => this.getNow(), 1000) }, methods: { getNow() { const date = new Date() // 오전, 오후(AM, PM) 표시 this.ampm = date.getHours() >= 12 ? 'PM' : 'AM' // 시분초(00:00:00) 표시 this.time = `${String(date.getHours()..
- [Vue.js] 유용한 팁(백견불여일타 Vue.js 입문)2022-07-12 09:40:061. 입력한 후 "Enter" 키를 누르거나 포커스를 다른 곳으로 이동할 때 한 번에 출력. 데이터 바인딩을 하면 입력값이 실시간으로 출력된다. lazy 기능을 이용하면 "Enter"키를 입력할 때 출력되게 한다. 2. splice를 이용한 요소 추가, 변경, 삭제. data: { myArray: ['첫번째', '두번째', '세번째', '네번째', '다섯번째'] }, methods: { addLast: function(){ this.myArray.push("[맨 뒤에 추가]"); }, addObj: function(){ this.myArray.splice(index, 0, "[추가]"); }, changeObj: function(){ this.myArray.splice(index, 1, "[변경]"); ..
- [Vue.js][문제해결] error Delete `␍` prettier/prettier2022-06-17 17:42:44팀 프로젝트를 깃허브에서 Pull 하고 실행했는데 아래와 같은 메시지가 포함된 에러가 발생했다. 이 문제는 OS별로 줄 바꿈 방식이 다르기 때문이라고 한다(macOS와 Linux는 LF, 윈도우는 CRLF가 기본값). prettier 2.0 이상에서는 LF를 사용하는데 윈도우에서는 엔터 키를 누를 경우 CRLF 방식으로 줄 바꿈이 이루어 지기 때문에 에러가 발생한다. error Delete `␍` prettier/prettier .eslintrc.js 파일에 아래 코드를 [그림 1]과 같이 추가하면, npm run serve 실행이 정상적으로 된다. endOfLine: "auto" 하지만 component의 코드 작성 후 저장하면 에러가 발생한다. 따라서 이에 추가하여 "Ctrl + ,"로 설정 진입 후..
728x90
반응형