전체 글 (45) 썸네일형 리스트형 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.. 성능 최적화 - 메모이제이션 ( React.memo, useMemo, useCallback ) useMemo 와 useCallback 은 불필요한 자식 요소의 재렌더링이나 계산을 억제하기 위해 사용합니다. 설명에 앞서 리액트의 컴포넌트의 재렌더링되는 시점을 보면 props 값이나 state(상태값) 이 변경 되었을 때 컴포넌트에서 참조되는 Context 값이 변경 되었을 때 부모 컴포넌트가 렌더링 되었을 때 이렇게 크게 세가지로 인해 자식 컴포넌트에서 불필요한 재렌더링이 일어납니다. React.memo 함수 컴포넌트를 메모이제이션할 수 있다. 부모의 컴포넌트가 제렌더링 되었을 때 자식 컴포넌트도 재랜더링이 일어나게 되어있습니다. 하지만 React.memo를 사용하면 props의 값이 변하지 않는 이상 자식 컴포넌트의 재렌더링을 방지 할 수 있습니다. 아래 예시를 보면 Child_1 컴포넌트는 메모.. Typescript - 고급 기능 타입스크립트를 사용할 때 편리한 기능을 소개합니다. Optional Chaining interface MyInfo { name: string, friends?:{ friend1: boolean, friend2: boolean } } const myInfo = { name:"개발자" } /* age의 값이 undefinded 이거나 null인경우를 체크하여 age를 출력해보자 */ // 옵셔널체이닝 미사용 - &&(논리연산자)를 이용 // myInfo.friends 값이 null, undefined, ‘’, 0, -0, NaN 이 아니라면 true 이고 아니면 false function funTest1 (myInfo) { if(myInfo.friends && myInfo.friends.friend1){ /.. 기본 타입 외 여러 종류의 타입 Enum 타입 열거형으로 Enum를 사용하면 이름이 붙은 상수 셋을 정의합니다. enum타입을 사용하게 특수한 변수를 사용하게 되는경우 가독성이 좋아집니다. enum MyInfo { Name = '개발자', Age = 32 } console.log(MyInfo.Name) // result => '개발자' console.log(MyInfo.Age) // result => 32 Generic 타입 제네릭은 클래스와 함수에서 사용하는 타입을 추상화해 외부로부터 구체적인 타입을 지정합니다. 외부에서 지정된 타입이 달라도 작동하도록 범용적인 클래스나 함수를 정의할 때 편리합니다. // T는 클래스안에서 임시 타입이다. class Queue { private arr: T[] = [] push(item:T){ thi.. 타입 Alias, Interface, Class 타입을 지정할 때 인라인으로 표기하는 방법외에도 Type, Interface, Class 을 이용하여 타입을 지정할 수 있다. 이 방법을 사용하면 재사용성이 높아지게 된다. Type Alias type Info = { name: string, age: number } function printMe(param: Info){ console.log(`${param.name} 의 나이는 ${param.age} 입니다.`) } printMe('개발자',32) // result => '개발자 나이는 32 입니다.' /* 함수 자체의 타입도 정의 가능 */ type FunTest = (name:string) => string function test(name: string, funParam: FunTest){ con.. 이전 1 2 3 4 ··· 6 다음
