달력 (히트맵) 만들기 (1) 이어서…  이전 글에서는 달력을 만들었다면 이번 글에서는 날짜에 해당하는 포스트 수와 Home에서 이번 달 만이 아닌 다른 달과 년도를 선택할 수 있는 모달 창과 월 별 총 포스팅 수, 달력을 만든 에 넘겨줄 props 를 구한다. 날짜에 해당하는 포스트 수달력을 만들기 전에 날짜마다 포스팅 된 글 수를 구한다.map() 함수를 사용하여 각 포스트의 created_time을 추출하고, 이를 JavaScript의 Date 객체로 변환하여 해당 날짜를 한국 표준시(UTC+9)로 변환하고, 날짜 정보에서 시간 부분을 제외한 후 toISOString()을 통해 ISO 형식의 문자열로 변환해 split("T")[0]을 사용하여 날짜 부분 만을 추출하여 korDate에 저장한다.cre..

개인 웹사이트를 만들면서 깃 헙에 있는 잔디처럼 하루에 포스팅 된 글 수를 한 눈에 보고 싶어 아펙스 차트의 히트맵을 사용하여 잔디와 조금 다르게 구현했다. 구현 포인트월 별 히트 맵 ( 달력처럼 구현 )페이지 진입 시 오늘 날짜 해당 월에 대해 보여주기년, 월 선택 가능하게마우스 호버 시 포스트 갯 수 툴 팁으로 보여주기히트 맵을 사용하여 달력 구현dynamic 을 사용하여 ApexCharts를 import 시켰다.( 관련 글 : https://min-sun.vercel.app/blog/f3df2808-d7ac-4b7f-b2b4-0acda188806d ) 달력 제작 시 고려해야 할 사항전달, 다음날 날짜가 같은 주에 있는 첫 번째 주, 마지막 주 일 자 수를 구해야 한다. 이번 달 날짜 수먼저 Home..

APEXCHART는 데이터를 시각 화 해주는 차트 라이브러리로 관리자 페이지 작업 시 많이 사용해서 사용법에 대해 정리해보자 한다.apexcharts 사이트https://apexcharts.com/ ApexCharts.js - Open Source JavaScript Charts for your websiteApexCharts is a a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web pages.apexcharts.com  React에서 사용 시 npm install --save react-apexcharts apexcharts..