Error: PostCSS received undefined instead of CSS string github에서 pull 한 Vue.js project의 모듈을 설치하기 위해 npm install 했다. 그런 후 npm run serve로 project를 실행했는데 발생한 에러였다. sass 관련 에러라서 해당 sass-loader을 uninstall 한 후 "npm install sass-loader"했는데 문제가 해결되지 않았다. npm install --save-dev node-sass sass-loader 결론적으로 "npm install sass-loader"가 아니라 "npm install --save-dev node-sass sass-loader"로 node-sass, sass-loade..

당신이 잘 모르는 8가지 HTML 팁 여러분의 마음을 사로잡을 HTML 팁 모음입니다! 1. 장치 카메라를 여는 캡처 속성 input 태그에 이메일, 문자, 비밀번호 등의 속성이 있는 것처럼 모바일 기기의 카메라를 열어 이미지를 캡처하는 속성도 있습니다. 이것은 두 가지 값을 가질 수 있는 capture속성으로 수행됩니다. 전면 카메라 사용자 후면 카메라 환경 2. 웹사이트 자동 새로고침 head태그에서 일정 시간이 지나면 웹사이트가 새로고침 되도록 설정할 수 있습니다! 이 스니펫은 10초마다 웹사이트를 새로고침 합니다. 3. 맞춤법 검사 활성화 HTML spellcheck 속성을 사용하고 이를 true로 설정하여 활성화할 수 있습니다. lang속성을 사용하여 사용할 언어를 지정합니다. 표준 속성이며 모..

1. CORS 위반 Spring boot로 만들어진 API 서버가 121번으로 시작하는 주소를 가지고 있고, 제작 중인 Vue.js 프로젝트에서 해당 주소로 API를 요청하는데 발생한 에러이다. POST 메서드로 로그인 API를 호출하면 아래와 같은 정보가-잘-날아온다. { "username": "admin", "token": "블라블라", "idx": 1 } 문제는 해당 토큰을 Headers에 실어서 다른 API를 호출하면 어김없이 [그림 1]과 같은 cors 위반 에러가 발생한다는 것이다. CORS(교차 출처 리소스 공유 : Cross-Origin Resource Sharing, CORS)는 브라우저가 담당하는 정책이다. 데이터의 출처가 상이한 경우에 발생한다. 제작 중인 Vue.js 프로젝트는 12..

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