프로젝트 중 FullPage 스크롤 구현이 필요하여 라이브러리 없이 제작해보았다. 구현 포인트마우스 휠 사용 시 한 페이지 씩 넘어가기풀 페이지를 차지 하지 않는 footer까지 스크롤 가능하게 하기화면구조body 태그에 overflow-y: hidden; 속성을 주고 화면 높이 만큼을 가지고 있는 section 태그에 overflow-y: auto; (outer 클래스 명) 속성을 주어 사용자가 페이지 전체를 스크롤 하지 못하게 방지하며 outer 섹션 내부에서만 스크롤이 가능하게 한다.outer 섹션안에 fullPage를 만들고 싶은 화면 높이 만큼을 가지고 있는 section 들과 footer를 넣어준다. html  cssbody { overflow-y: hidd..

달력 (히트맵) 만들기 (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..