React/NextJS (4) 썸네일형 리스트형 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.. Nextjs Boilerplate 만들기 - 5 [Jest - 컴포넌트 단위 테스트] 애플리케이션 개발에서 테스트는 코드의 품질을 높이고, 코드의 변경에 예상치 못한 버그를 방지할 수 있습니다. 테스트 환경 구축 yarn add -D jest @testing-library/react @testing-library/jest-dom jest-environment-jsdom 프로젝트 루트에 jest.setup.js 파일 생성 import '@testing-library/jest-dom/extend-expect' 프로젝트 루트에 jest.config.ts 파일 생성 테스트 파일을 Typescript 로 작성하기 위해 ts-node를 설치합니다. yarn add -D ts-node typescript jest import type { Config } from 'jest' import nextJes.. Nextjs Boilerplate 만들기 - 4 [Storybook 설정] 스토리북 설정 스토리북을 설치합니다. 스토리북은 UI 컴포넌트 개발용 지원 도구 입니다. 톡립적인 환경에서 UI 컴포넌트의 형태나 작동을 확인할 수 있고 디자이너도 함께 사용하며 협업에도 도움을 줍니다. npx storybook@latest init 설치가 완료되고 실행을 해봅니다. yarn storybook 예시 컴포넌트를 생성하여 스토리북을 테스트해봅니다 components/StyledButton.tsx 생성 import { css, styled } from 'styled-components' const variants = { primary: { color: '#ffffff', backgroundColor: '#1D3461', border: 'none', }, success: { color: '#ff.. CSR? SSR? SSG? ISR ? NextJS 에서 구현해 보자 SSG [ Static Stie Generation ] 빌드시에 HTML 에 데이터를 담아서 미리 파일을 만들고 유저에게 보여줍니다. 장점 : 이미 만들어진 페이지를 보여주는 형식이여서 서버 부담이 적고 응답 속도가 빠릅니다. 활용 : 보통 마케팅 페이지나 블로그 글 등 변화가 거의 없는 사이트에 적합합니다. 단점 : 데이터가 바뀐다면 빌드와 배포 과정을 다시 해야합니다. DB에서 데이터가 바뀐다해도 다시 빌드과정을 거치지 않는다면 이미 만들어진 페이지에는 변화를 줄 수 없습니다. 그래서 동적 컨텐츠를 포함한다면 SSG 를 사용하지 않습니다. 그렇다면 동적 컨텐츠를 만들 때 어떤 방식을 사용해야 될까요? CSR , SSR , ISR 를 사용하면 됩니다. 하지만 이 세가지 방법에도 차이점이 있습니다. CS.. 이전 1 다음
