본문 바로가기

nextJS

(2)
Nextjs Boilerplate 만들기 - 6 [React Hook Form 도입] React Hook Form 은 폼 밸리데이션 라이브러리입니다. 성능, 유연성, 확장성이 우수합니다. 사용성도 쉬우며 직접 작성한 Component 의 입력 요소에도 사용가능 합니다. 또한 재렌더링 수를 최소한으로 억제합니다. 우선 라이브러리를 설치합니다. yarn add react-hook-form TEST 용으로 TestForm 파일을 작성합니다. import { SubmitHandler, useForm } from 'react-hook-form' import { styled } from 'styled-components' type MyFormData = { firstName: string lastName: string category: string } export default function Te..
CSR? SSR? SSG? ISR ? NextJS 에서 구현해 보자 SSG [ Static Stie Generation ] 빌드시에 HTML 에 데이터를 담아서 미리 파일을 만들고 유저에게 보여줍니다. 장점 : 이미 만들어진 페이지를 보여주는 형식이여서 서버 부담이 적고 응답 속도가 빠릅니다. 활용 : 보통 마케팅 페이지나 블로그 글 등 변화가 거의 없는 사이트에 적합합니다. 단점 : 데이터가 바뀐다면 빌드와 배포 과정을 다시 해야합니다. DB에서 데이터가 바뀐다해도 다시 빌드과정을 거치지 않는다면 이미 만들어진 페이지에는 변화를 줄 수 없습니다. 그래서 동적 컨텐츠를 포함한다면 SSG 를 사용하지 않습니다. 그렇다면 동적 컨텐츠를 만들 때 어떤 방식을 사용해야 될까요? CSR , SSR , ISR 를 사용하면 됩니다. 하지만 이 세가지 방법에도 차이점이 있습니다. CS..