nextjs

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

이 글에서는 많은 사람들이 Next.js를 사용하는 이유, 즉 Next.js가 가지고 있는 강점에 대해서 정리해보고자 합니다. What is Next.js? 가장 먼저, Next.js는 무엇일까요? Next.js 공식 홈페이지에서도 언급하듯이, Next.js는 React의 Framework입니다. React를 이용하다보면, Routing과 같이 개발자들이 직접 개발해야 하는 필수적인 기능들이 있습니다. 이렇게 React를 이용할 때 필수적으로 개발해야 하는 기능들을 기본적으로 제공해주는 것이 바로 Next.js가 하고 있는 역할입니다. What kind of features Next.js can give you? 그렇다면, 정확하게 어떠한 기능들을 Next.js는 제공해주고 있을까요? 1. File-ba..

React / Nextjs 에서 Typescript를 사용할 때, Input의 타입을 어떻게 지정해야 할지 알아보자. 위 에러는 제대로 타입을 지정하지 않아서 생기는 문제이다. 특히나, 여기에서는 as HTMLElement로 타입을 캐스팅 하지 않고, 제대로 타입을 지정해 해결하는 방법을 정리하고자 한다. [ Cause ] 원인은 에러 메시지 그대로이다. 내가 작성한 방식대로라면, 매개변수 event(e)는 EventTarget 타입을 가지게 되는데, 이때 EventTarget이라는 타입에 value라는 속성이 없기 때문이다. [ Solution ] 해결책은 간단하고, 크게 2가지가 있다. 1. as HTMLInputElement 구글링을 해보니, 가장 많은 답변은 as 를 이용하여 Type을 강제로 H..

NextJS를 처음 배우면서 공식 홈페이지에 있는 내용을 따라하며 정리하려고 하며 당해 포스트는 그 첫 시작이며, React가 Dom을 어떻게 다루는지에 대해 주요하게 다루려고 한다. Getting Start with React 리액트를 project에 도입하기 위해서는 unpkg.com 이라는 곳에서 2가지 스크립트(react, readt-dom)를 로드 해줘야 한다. react: React library의 코어 react-dom: React를 이용하여 DOM을 컨트롤 할 수 있는 DOM methods를 제공해준다. 만약, 우리가 JavaScript만을 이용하여 h1태그를 div태그 안에 넣으려고 했다면, 아래와 같이 긴 코드가 필요했겠지만 const header = document.createElem..