react
-
react에 typescript 적용하기Language/React 2023. 12. 27. 15:33
회사에서 사용중인 오래된 버젼인 리액트 ^16.13.1에서 typescript만 적용해 보려고 한다. React@^16.13.1 버전과 잘 맞는 버전 React@^16.13.1과 잘 맞는 typescript 버전에 대해서 ChatGPT 질의 한 결과를 토대로 진행하려고 한다. 설치 모듈 및 버전 Modules react-hook-form 버전 typescript@^4.1.2 yarn add --dev typescript@^4.1.2 @types/node@^10.17.27 yarn add --dev @types/node@^10.17.27 @types/react@^16.9.0 yarn add --dev @types/react@^16.9.0 @types/react-dom@^16.9.0 yarn add --de..
-
react-hook-form 적용기 (antd)Language/React 2023. 12. 18. 13:18
구 버전의 node 14.17.4 + react 16.13.1 에서 react-hook-form을 적용해보자. react-hook-form은 Node 16.0.0 이상을 권장한다고 하는데 다음 분기때 버전 올릴 계획도 있고 백오피스에 적용하는거라서 큰 문제가 발생하지 않는다고 판단되어 적용하기로 하였다. 이런 저런 핑계로 지금 안하면 나중에도 못한다.! Node버전과 React버전 별 사용가능한 react-hook-form 버전 Node 버전 React 버전 react-hook-form 버전 12.17.0 이상 16.8.0 이상 7.3.0 이상 14.17.0 이상 16.13.0 이상 7.3.0 이상 16.0.0. 이상 17.0.0 이상 7.3.0 이상 17.0.0. 이상 18.0.0 이상 7.3.0 이상..
-
3. 디자인시스템 - npm에서 받아서 활용해보기Project/Figma+Storybook 2023. 11. 13. 10:46
앞서 설정한 디자인 시스템의 npm을 storybook 문서를 활용하여 테스트를 진행해 보자. 1. 디자인시스템 - Rollup을 사용하여 Storybook npm 배포 및 사용 2. 디자인시스템 - Storybook chromatic 배포 및 git 연동 3. 디자인시스템 - npm에서 받아서 활용해보기 3.1. 리액트 설치 $ npx create-react-app design-system-test-app --template typescript $ yarn create react-app design-system-test-app --template typescript 3.2. npm 라이브러리 설치 $ yarn add @djgundam/react-storybook-rollup-starter 3.3. 확인..
-
리액트 & 스토리북 설치Project/Figma+Storybook 2023. 10. 26. 15:05
https://storybook.js.org/docs/react/get-started/install?ref=chromaticblog.ghost.io Install Storybook Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It’s open source and free. storybook.js.org 리액트 프로젝트 생성 $ npx create-react-app test-design-system --template ko 스토리북 등록 $ cd test-design-sy..
-
디자인 시스템 & 스토리북 & 피그마란?Project/Figma+Storybook 2023. 10. 25. 17:16
제일 많이 쓰이는 `스토리북`+`피그마` 조합으로 리액트 컴포넌트용 디자인 시스템 구축 과정을 기록해 보자! 아자아자! Bard. 디자인 시스템 디자인 시스템은 재사용 가능한 UI 컴포넌트, 스타일 가이드, 디자인 원칙 등을 포함하는 시스템입니다. 디자인 시스템을 사용하면 개발자는 일관되고 품질이 높은 사용자 인터페이스를 보다 쉽게 구축할 수 있습니다. Bard. 스토리북 https://storybook.js.org/ Storybook: Frontend workshop for UI development Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for ..
-
NextJS에서 queryString 변경 감지 hook 만들기Language/React 2023. 10. 20. 09:43
NextJS 환경에서 `/aaa?arg1=111` 경로를 `/aaa?arg1=222`로 push 혹은 replace 헀을떄 arg1를 받아오는 hook을 생성하는 과정을 간략하게 정리해 놓는다. useQuery 훅 생성 필자는 p가 팝업레이어 아이디인데 path가 바뀔때 그부분은 제외한 로직이다. export function useQuery() { const router = useRouter(); const [query, setQuery] = useState(router.query); useEffect(() => { const beforeQuery = { ...query }; const afterQuery = { ...router.query }; // 팝업 파라미터 제외 (레이어 팝업) delete be..
-
React/RadioButton Component 만들기Language/React 2022. 12. 1. 10:15
Radio component가 마땅한게 없어서 급조해 봤다. Parent Component import React, { Component } from 'react'; ... class UnitViews extends Component { ... render() { ... return ( { const checked_unit_status = value === '' ? null : [value]; this.setState({ unitStatus: value }, this.props.onUpdate({ UNIT_STATUS: checked_unit_status })); }} /> ... ... ); } } export default wrapWithBase(UnitViews); RadioButton Compon..
-
React/X-Bar chart 만들기Language/React 2022. 12. 1. 10:08
챠트를 만들어야 하는데 마땅한게 없어서 만들어 보았다. (x,y chart는 간단하니깐!) 데시보드 import React, { Component } from 'react'; ... class DashboardTab1 extends Component { ... render() { const receiptStatusCounts = { PAY_COMPLETE_AMOUNT: 50.0, PAY_COMPLETE_COUNT: 2, PAY_FAIL_AMOUNT: 3.0, PAY_FAIL_COUNT: 1, PAY_WAIT_AMOUNT: 7.5, PAY_WAIT_COUNT: 1, payCompletePercent: 50, payFailPercent: 25, payWatePercent: 25, }; const styleB..