useRef

요즘 너무 바쁘지만, 주말을 맞아 NextJS로 만들고 있던 Blog에 ToC 컴포넌트 만들어 봤습니다. 이번 포스트에서는 어떤 부분에 포커스를 두고 개발을 했고, 구현하며 있었던 문제점과 해결방법에 대해 정리해보고자 합니다. 구현한 최종 모습은 아래와 같을 것입니다. (영상을 찍으면서 box-shadow효과가 뭉개져서 나오는데 이 부분은 무시해주세요..ㅎ) 주요 기능사항 포스트의 HTag를 기반으로 목차를 만든다(범위 : h1 ~ h3) 목차를 열고 닫을 수 있어야 한다. ToC 컴포넌트가 메인컴포넌트가 겹치지 않는다면 열려 있는 것이 default이어야 한다. 겹친다면, 닫혀 있는 것이 default이어야 한다. 현재 읽고 있는 부분이 ToC 컴포넌트에 색상으로 표시되어야 한다. ToC컴포넌트에서 클..

최근에 Next.js를 이용해서 내 블로그를 직접 만들고 있습니다. 작업하는 와중에 form 유효성 검사를 좀 간단히 할 수 있는 hook을 만들고 싶어져 zod를 활용하여 한번 만들어 보게 되었습니다. useForm이라는 라이브러리가 있는 것도 알고 있지만, 간단한 것은 직접 만드는게 좋아 직접 만들어 보게 되었고, 공유하고자 글을 정리해봅니다. 어떻게 구현했는지는 코드를 보면 알 수 있으니, 구현하면서 겪었던 문제점과 해당 문제점을 어떻게 해결했는지 위주로 정리했습니다. Features 우선, 완성된 form은 아래처럼 작동 하게 될 것입니다. useForm 작동 영상 useForm이라는 커스텀 훅에서 제가 원하는 기능은 아래와 같습니다. 각 input을 유효성 체크하는 함수와 에러 메시지를 z.ob..