React

현재 만들고 있는 기술블로그(링크)에서 포스팅의 편리성을 위해 이미지 업로드를 할 수 있는 기능이 필요했습니다. 이를 위해 사진 이미지를 미리 보여주는 file input 컴포넌트를 만들었고, 이번 포스트에서는 어떻게 구현했는지 정리해 보고자 합니다. CSS에 대한 포스트가 아님으로 CSS 부분은 최소화하고, 구현 로직에 대해 코드로 설명하겠습니다. 컴포넌트 설계 무엇을 만들기 전에, 내가 만들고자 하는 것의 핵심 기능은 무엇인지, 어떻게 사용할 것인지 정리하는 부분은 정말 중요한 것 같습니다. 핵심기능 제가 구현 하고자 하는 File Input의 핵심기능은 아래와 같습니다. 복수의 이미지 파일들을 버튼을 통해 업로드 할 수 있다. 복수의 이미지 파일들을 preview 쪽에 Drag&Drop으로 업로드 ..

요즘 너무 바쁘지만, 주말을 맞아 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..