"VS Code에서 폴더 열기 할 때 해당 프로젝트의 폴더 열기"로 해결 vue cli로 프로젝트 생성 후 작업하다 보면 이유 없이 태그에 빨간 줄 에러 표시가 표시되기도 한다. 이 문제는 VS Code에서 폴더 열기를 할때 해당 프로젝트의 폴더를 열기하면 해결된다. 만약 상위 폴더를 열기 하면 에러가 표시되나 코딩에 영향을 주지는 않는다.

package.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..

SearchBar components 배치 방법 SearchBar의 components의 배치를 flex를 이용해 할 수 있었는데 부트스트랩으로 [그림 1]과 같이 보기 좋게 만들 수도 있었다. 해당 코드는 아래와 같다. 조회기간 간격 일간별 조회 주간별 조회 월간별 조회 연도별 조회 검색 PDF XLSX 인쇄 초기화 참고한 내용 https://getbootstrap.com/docs/5.0/forms/overview/#form-text Forms Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms. getbootstrap.com

legend의 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-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. ..

SASS 모듈 설치 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..

1. div 태그 가로/세로 중앙-가운데-정렬 flex 사용시 : div태그의 경우 flex와 margin으로 가운데 정렬할 수 있다. .outer { display: flex;}.inner { margin: auto;} grid 사용시place-items: center;display: grid; 출처https://hianna.tistory.com/675 2. Tailwind의 경우 flex 또는 grid를 이용flex flex-col align-centergrid place-items-center 출처https://eight20.tistory.com/532024-09-27 추가3. 가로/세로 가운데 정렬 4가지 방법(최종) Button Button Button Button

AM, 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()..