React (15) 썸네일형 리스트형 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 컴포넌트는 메모.. Babel과 Webpack을 이용한 ES6 환경 구축(1) - Babel 이란? React로 개발하고 있다면 거의 대부분 babel도 함께 사용하고 있을 것 입니다. create-react-app 에도 기본으로 들어가있고 react 관련 튜토리얼을 따라 하다보면 자연스럽게 babel을 설치하게 된다. 굳이 react가 아니더라도 javascript를 사용한다면 babel를 사용해주는것이 좋다. [ babel 이란 ? ] babel은 javascript 컴파일러다 . 입출력 모두 javascript 코드이다. [ babel을 사용하는 이유 ] 최신 버전의 javascript 문법은 브라우저가 이해하지 못하기 때문에 babel이 브라우저가 이해할 수 있는 문법으로 변환해준다. ES6 , ES7 등의 최신 문법을 사용해서 코딩을 할 수 있기 때문에 생산성이 향상된다. [ babel-pol.. Babel과 Webpack을 이용한 ES6 환경 구축(2) - Webpack 이란? WebPack5는 build콘솔에 여러 warning이 발생, 각종 plugin에서 아직 webpack5대응이 완벽하게 되어 있지 않은 것 같습니다. [ WebPack 이란? ] 모듈 번들링이라고 한다. 모듈 번들링이란 html 파일에 들어가는 필요한 다수의 의존관계에있는 모듈들을 하나의 Javascript 파일로 만들어주는 방식이다. [ WebPack을 사용하는 이유 ] 1. 여러개의 파일을 하나로 묶어줌 Webpack을 사용하면 의존 모듈이 하나의 파일로 번들링되므로 별도의 모듈 로더가 필요없다. 그리고 다수의 Javascript 파일을 하나의 파일로 번들링하므로 html 파일에서 script 태그로 다수의 자바스크립트 파일을 로드해야 하는 번거로움도 사라진다. 옛날에는 페이지마다 새로운 html을 .. 함수형 컴포넌트와 클래스형 컴포넌트의 차이 React 컴포넌트를 만들때 클래스형 컴포넌트, 함수형 컴포넌트 2가지 방식이 있다 과거에는 클래스형 컴포넌트를 많이 사용했지만 2019년 v16.8 부터 함수형 컴포넌트에 리액트 훅(hook)을 지원해 주어서 현재는 공식 문서에서도 함수형 컴포넌트와 훅(hook)을 함께 사용할 것을 권장하고 있다. [함수형 컴포넌트를 선호하는 이유] 요즘은 많은 개발자들이 클래스형 컴포넌트보다 함수형 컴포넌트+Hook을 사용한다. 클래스형 컴포넌트는 로직과 상태를 컴포넌트 내에서 구현하기 때문에 상대적으로 복잡한 UI 로직을 갖고 있는 반면, 함수형 컴포넌트는 state를 사용하지 않고 단순하게 데이터를 받아서(props) UI에 뿌려준다. Hook들을 필요한 곳에 사용하며 Logic의 재사용이 가능하다는 장점이 있어.. 이전 1 2 다음
