1. vue-chartjs만으로는 data labels 표시할 수 없다!vue-chartjs로 렌더링 한 차트 영역에 값을 표시해야 했다. 그런데 "vue-chartjs" 라이브러리 만으로는 해결할 수 없었다. 추가로 "chartjs-plugin-datalabels" 라이브러리를 사용해야 한다. [그림 1]은 몇 번의 삽질 끝에 파낸 최종 결과물이다.  2. NPM 라이브러리 설치2-1. vue-chartjs 설치https://vue-chartjs.org/guide/#introductionnpm i vue-chartjs chart.js 2-2. chartjs-plugin-datalabels 설치https://chartjs-plugin-datalabels.netlify.app/guide/getting-st..

1. 네이버 지도의 카운트다운 서클 타이머 버튼모니터링 서비스에 사용자가 새로고침 버튼을 클릭하지 않아도 일정 시간이 지나면 자동으로 최신의 정보를 서버에서 받아와 리렌더링 하는 기능이 필요했고, [그림 1]과 같은 네이버 지도앱의 카운트다운 서클 타이머 버튼이 적당해 보였다.  2. Vue.js용 컴포넌트 제작 및 적용[그림 2]는 Vue.js용으로 만든 카운트다운 서클 타이머 버튼 컴포넌트를 적용한 사례이다. 시간은 15초부터 시작하고 0초가 되면 refresh 아이콘이 시계방향으로 회전한 후 초기화된다. 0초가 되거나 버튼을 클릭하면 $emmit에 의해 부모 컴포넌트의 함수를 호출한다. 부모 컴포넌트의 함수에는 서버에 get 요청하는 코드를 적용할 수 있다. 아래 코드는 부모 코드에서 사용한 사례이..

1. Bootstrap Autoplaying Carousel 오작동 문제https://getbootstrap.com/docs/5.3/components/carousel/#autoplaying-carousels위 링크는 부트스트랩 캐로우셀 자동 슬라이드 예제이다. 핵심은 data-bs-ride 속성에 "carousel"을 적용하면 캐로우셀의 슬라이드가 자동으로 넘어간다. 이 코드를 Vue.js 프로젝트에 적용했는데 오작동 문제가 발생했다.해당 페이지를 처음 열었을 때는 슬라이드가 정상적으로 동작하는데 다른 페이지에 다녀오면 멈춰 있다. 다음 버튼을 클릭하면 그제야 슬라이드가 동작하기 시작한다. 사용자의 버튼 이벤트 발생 시 자동 플레이가 되는 옵션은 "carousel"이 아니라 "true"이며 나의 경우 ..

두 개 이상의 값 변경 감지둘 이상의 값에 대한 변경을 감지하여 하나의 값이라도 변경이 일어나면 특정 메서드를 실행하는 코드가 필요했다. 아래 코드는 computed에 임의로 정의한 data1(), data2()의 반환 값을 watch에서 감지하여 둘 중 값이 하나라도 변경되면 동일한 handleUpdate() 함수가 호출되도록 작성한 것이다. 주의할 점은 감시하는 값이 객체인 경우에는 "deep" 속성을 추가해야 변경을 감지할 수 있다.computed: { data1() { return this.$store.state.data1; // vuex 상태 값1 }, data2() { return this.$store.state.data2; // vuex 상태 값2 }},watch: { d..

1. 새로운 테이블 추가 후 발생한 에러 해결😉 새로운 칼럼 또는 테이블 추가 방법 : https://postforty.tistory.com/473parent: Error: Unknown column 'createdAt' in 'field list'새로운 테이블을 추가하기 위해 모델 파일을 추가하면 init-models.js에 테이블에 대한 관계 설정을 해줘야 하는데 직접 진행하면 고생스럽다. 그래서 sequelize-auto로 DB 스키마의 모든 내용을 모델 파일로 가져오는 방법을 사용하면 편리하다. 이때 DB를 수정하지 않기 때문에 데이터 손실을 걱정하지 않아도 된다.npm install -g sequelize-auto # 설치하기# 사용 예제sequelize-auto -o "./models" -d..

Uncaught (in promise) TypeError: filteredFacilities.forEach is not a function 에러는 데이터가 배열이 아닌 다른 타입(예: undefined 또는 null)이어서 발생하는 에러이다. forEach는 배열에서만 사용 가능한 메서드이기 때문에, 데이터가 배열이 아닐 경우 이 오류가 발생한다.해결 방법은 아래 코드와 같이 isArray() 배열 메서드를 이용해 데이터가 배열 타입인지 확인하고 배열이 아니면 빈 배열([])이 평가되도록 한다.const result = Array.isArray(arr) ? arr : [];

1. Java 버전 스크립트 작성여기서는 Java 11, 17 버전을 각각 사용할 수 있게 해 주는 스크립트를 작성하였다. 다른 버전도 얼마든지 적용할 수 있다. "JAVA_HOME"에 실제 해당 버전의 Java가 설치된 경로를 지정해야 한다. 1) Java 11 버전 적용 스크립트 작성@echo offset JAVA_HOME=C:\Program Files\Java\jdk-11set Path=%JAVA_HOME%\bin;%Path%echo Java 11 activated.java -version메모장에서 위 스크립트를 작성한 후 "C:\Program Files\Java" 경로에 "java11.bat"라는 형식으로 저장한다. 2) Java 17 버전 적용 스크립트 작성@echo offset JAVA_HOM..

1. 화면에 렌더링 된 테이블 페이지 오버플로우 문제jsPDF를 이용해 웹 화면을 PDF로 내보내기 기능을 구현했다. 에러 없이 작동하였으나 [그림 1]과 같이 페이지 오버플로우로 그림이 잘린 경우 앞 페이지 하단, 뒷 페이지 상단 여백이 전혀 없는 pdf 파일이 생성되었다. 2. canvas 이용하여 해결페이지 오버플로우가 발생할 경우 이미지를 페이지 크기로 잘라 새로운 캔버스에 그리고 새로운 캔버스를 PDF에 추가하는 방식으로 해결하였다. [그림 2]는 최종 결과물이다. 작성한 전체 코드는 아래와 같다.import jsPDF from 'jspdf';import font from './font/NanumGothic-normal';import { format } from 'date-fns';const P..