Development
-
react-hook-form typescript로 변환 및 컴포넌트 생성 (antd)Language/React 2023. 12. 27. 17:42
이번 포스팅에서는 react-hook-form을 전체 사이트에 적용하기에 앞서 코드 라인을 줄여서 가독성을 높이고 타입스크립트로 컴포넌트를 제작해 두려고 한다. 현재 javascript 및 typescript가 혼재 되어 있지만.. 시간될때 마다 수정해 나가자! 언젠간.. typescript만 남으리라!! react-hook-form component 적용import { useForm } from 'react-hook-form';import { NInput, NInputNumber, NTextArea, NCheckbox, NSelect, NRadioGroup, NTinyMceEditor, NImageSelector } from 'components/FormControls';const TestPop = (..
-
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 이상..
-
7. 디자인시스템 - svg 및 alias 설정Project/Figma+Storybook 2023. 11. 24. 11:29
1. svg 설정 (Component 형태로 사용가능하게) 1.1. storybook 설정 사전설치 $ yarn add --dev @svgr/webpack $ yarn add --dev url-loader main.ts # .storybook/main.ts import type { StorybookConfig } from '@storybook/react-webpack5'; import path from 'path'; ... const config: StorybookConfig = { ... // webpackFinal을 통해 Webpack 설정을 변경 webpackFinal: async (config) => { if (!config.module || !config.module.rules) { return..
-
SyntaxError: missing ) after argument listLanguage/npm,yarn 2023. 11. 21. 10:55
어제 작업하다가 맥북 업데이트 하면서 흐름이 끊기면서 나머지 작업은 내일하자고 하고 업무를 종료하였다. 오늘 아침에 일어나서 디자인팀이랑 협의하려고 storybook을 실행하려고 했더니 아무것도 안된다. yarn storybook만 안되는줄 알고 퇴근전에 내가 뭘 건들였나 하면서 git local history 까지 뒤져가면서 한참 헤맷다.. 알고 보니 yarn --version도 안되고 yarn으로 실행하는 명령들은 모두 SyntaxError가 발생하고 있었다. yarn berry 로 설정된 프로젝트 바깥에서 실행하면 문제가 없다. 문제는 yarn berry 관련된거다! yarn berry를 모두 재설치 해볼까 하다가 나중에라도 똑같은 문제가 발생할거 같아서 문제 파악에 들어갔다. 구글링 해도 Synt..
-
6. 디자인시스템 - 샘플 Component 제작Project/Figma+Storybook 2023. 11. 20. 16:53
이제 본격적으로 컴포넌트를 제작해 보자! Figma에 생성된 Component를 Storybook으로 옮기는 과정을 정리해 둔다. 좀더 좋을 방법이 있다면 계속 개선해 나갈 예정이다. 1. 공통 scss 작성 _variables.scss : css 변수 모음 ... $color-global-mint90: #003B40 !default; $color-global-mint80: #004C53 !default; $color-global-mint70: #006D78 !default; ... 2. Figma -> Storybook Compoent 작성 2.1. Figma Code -> Anima Figma to Code 플러그인 중에서 필자가 구성한 Storybook에서는 Anima가 제일 유사하여 선택하고 진행..
-
ESLint와 Prettier 설정하기Tool/VSCode&Cursor 2023. 11. 17. 17:40
1. ESLint 설치 및 사용방법 1.1. ESLint 설치 $ yarn add -D \ eslint \ @typescript-eslint/eslint-plugin \ @typescript-eslint/parser \ eslint-config-airbnb \ eslint-plugin-import \ eslint-plugin-jsx-a11y \ eslint-plugin-react \ eslint-plugin-react-hooks \ eslint-plugin-sort-keys-fix \ eslint-plugin-storybook 1.2. configuration file 생성 $ yarn create @eslint/config bash를 실행하면 아래와 같이 각자의 환경에 대한 선택하는 부분이 나온다. 1..