mingg IT

우선 나는 이젠 새롭게 개발하는 컴포넌트는 모두 StoryBook을 사용 하려고 한다. (이젠 StoryBook 없이 개발하던 시절론 돌아갈 수 없어.. ) 오늘 간단하게 소개하려고 한다. StoryBook을 처음 npx로 설치하게 되면 .storybook이 생기게 되고, 여기서 main.js를 통해서 .stories.js 파일 위치를 지정해준다. (읽어올 수 있도록 설정하는 거임) module.exports = { // stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"], stories: ['../src/components/**/*.stories.js'], staticDirs: ['../public'], addons:..

StoryBook으로 예시를 따라해 보고 있던 와중, yarn test가 실패하였다. https://storybook.js.org/tutorials/intro-to-storybook/react/ko/simple-component/ 원인을 살펴보니 사용하고 있던 리액트 버전이 18인것. "react": "^18.1.0", "react-dom": "^18.1.0", 버전을 17 로 낮추었음. "react": "17.0.2", "react-dom": "17.1.2", 정상적으로 동작함. Reperence https://github.com/testing-library/react-hooks-testing-library/issues/753

React에서 clean 코드를 작성하는 방법을 소개 하려고 한다. 1. Dialog 로직 분리하기 보통 우리가 dialog를 쓸 때 버튼을 만들고, useState를 만들고 이에 따라 dialog를 open 하고 닫는 코드를 사용한다. (리팩토링 전) Home.tsx const Home: React.FunctionComponent = props => { const [open, setOpen] = useState(false); const onClick = () => { setOpen(true); }; const onClose = () => { setOpen(false); }; return ( Here is Home Button Title Content close ); }; 보통 이런식으로 사용해왔다. 허..

콘솔 로그를 없에는 Plugins을 제작해 보겠음. 처음 프로젝트 세팅을 해줌 mkdir test-babel-custom-plugin cd test-babel-custom-plugin npm init -y npm install @babel/core @babel/cli plugins/remove-log.js module.exports = function ({ types: t }) { return { visitor: { ExpressionStatement(path) { if (t.isCallExpression(path.node.expression)) { if (t.isMemberExpression(path.node.expression.callee)) { const memberExp = path.node.ex..

초기에 바벨은 ES6코드를 ES5 코드로 변환해 주는 트렌스파일러였다. 현재는 바벨을 이용하여 리액트의 JSX문법, 타입스크립트와 같은 정적 타입 언어, 코드 압축, 제안 단계에 있는 문법을 사용할 수 있다. 바벨을 실행하는 여러가지 방법 @babel/cli 웹팩에서 babel-loader로 실행 @babel/core를 직접 실행 @babel/register로 실행 babel 예제(babel/cli) npm init -y npm install @babel/core @babel/cli @babel/plugin-transform-arrow-functions @babel/plugin-transform-template-literals @babel/preset-react 바벨을 실행하기 위해서는 @babel/co..

보호되어 있는 글입니다.

아마 react를 이용하고 있다면 한번 쯤 useState가 어떻게 이전 값을 가지고 있는지 (유지 되는지)를 고민해본 적이 있을 것이다. 알아보니 클로저의 개념을 이용해서 작동한다. 클로저의 사용하는 이점으로는 현재 상태를 유지하면서 최신 상태를 유지할 수 있는 점이 있다. 이걸 이용해서 const useState = (initialVal) => { let innerState = initialVal; const state = innerState; const setState = (newVal) => { innerState = newVal; }; return [state, setState]; }; const [counter, setCounter] = useState(0); 클로저가 innerState값을 ..

아마 cra 명령어를 사용할 때마다 종종 보는 에러일 것이다. 해결법은 npx create-react-app@latest cra-test 를 수행하면 정상적으로 CRA 프로젝트를 생성할 수 있다.