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

여러 리스트 중 리스트들이 개별로 기능하는 방법에 대해 정리했다. 고려할 사항리스트 중 클릭한 리스트만 열고 닫을 수 있어야 한다.다른 리스트를 열더라도 기존 열린 리스트에 영향이 없어야 한다.리스트 click 이벤트를 주어 handleShowDetail 함수를 통해 해당 리스트의 값을(여기서는 index) 받아researchDetailLiStates에 저장된 값 중 빋아 온 리스트에 대한 값을 반전 시켜 새로운 상태를 업데이트한다.const [researchDetailLiStates, setResearchDetailLiStates] = useState({});const handleShowDetail = (index) => { // setResearchDetailLiStates 함수를 사용하여 이전 상..

Next.js 에 있는 module.css 사용법에 대해 정리해보았다.CSS mosulesCSS mosules는 css를 모듈처럼 사용할 수 있는 장점이 있으며 클래스 명에 해쉬 값을 붙여 다시 생성하고, 그 값을 모듈로 내보내서 사용하는 방식으로 클래스 명이 충돌하는 단점을 극복할 수 있다. 파일 명파일 명은 대문자로 시작하는 이름.module.css 로 명하면 된다. ex) Home.module.css{이름}.module.css 사용법사용할 module.css 파일을 import 해와 className에 적용하면된다.// index.jsximport styles from "@/styles/Home.module.css";export default function Home() { return ( ..