Jake의 블로그

# react-use-measure - 본 포스팅에서는 react-use-measure 라이브러리를 사용해서, component의 정보를 가져오는 방법을 소개합니다 # Github Page GitHub - pmndrs/react-use-measure: 🙌 Utility to measure view bounds 🙌 Utility to measure view bounds. Contribute to pmndrs/react-use-measure development by creating an account on GitHub. github.com # 사용방법 - 언제나처럼 설치를 진행해줍니다 yarn add react-use-measure - 측정하고 싶은 Element에 아래와 같이 구현해주고 bounds를 확..

# react-resize-detector 를 활용한 리사이즈 이벤트 처리 - 와 같은 HTML Element의 사이즈가 바뀔 때 변경된 사이즈에 대해 대응할 필요가 있을 때가 있습니다. 본 포스팅에서는 react-resize-detector라는 라이브러리르 사용해서 HTML Element 크기 변경 이벤트를 처리하는 방법을 소개 하려고 합니다 # 사용방법 - 라이브러리를 설치해 줍니다 yarn add react-resize-detector - 아래와 같이 구현해 주시면 됩니다 import { useResizeDetector } from 'react-resize-detector'; const CustomComponent = () => { const { width, height, ref } = useRes..

# textarea 맞춤법 표시 끄는 방법 - 사용 시, 맞춤법이 틀렸을 경우, 빨간 색 밑 줄이 생기는데 spellCheck 옵션으로 끌 수 있습니다

# react-color 사용방법 - 본 포스팅에서는 사용자에게 깔끔하고 다양한 Color Picker를 제공할 수 있는 React Color 라이브러리를 소개하려고 합니다 # 사용방법 - 라이브러리를 설치해 줍니다 yarn add react-color - 그리고 아래와 같이 원하는 Picker를 추가해주시면 됩니다. import React from 'react'; import { SketchPicker } from 'react-color'; class Component extends React.Component { state = { background: '#fff', }; handleChangeComplete = (color) => { this.setState({ background: color.hex..

# React Flow - react-flow-renderer 사용법 소개 # 사용방법 - 우선 설치를 진행합니다 yarn add react-flow-renderer - 그래프에 포함될 Elements들을 정의합니다. 그리고 애니메이션과 같은 추가 요소들을 정의합니다. data에는 React Component도 포함될 수 있습니다 import React from 'react'; import ReactFlow from 'react-flow-renderer'; const elements = [ { id: '1', type: 'input', data: { label: 'Jake 1' }, position: { x: 250, y: 5 } }, // you can also pass a React Node as a..

# Create React App 에러 해결 - React를 사용해서 개발 할 때 npx create-react-app을 사용해서 프로젝트를 생성한다. 그런데 아래와 같은 메세지와 함께 생성이 실패하는 경우가 있다 # You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0). # We no longer support global installation of Create React App. - 문제는 위의 문제가 발생한 후에 보여주는 도움말이 아래와 같은데, 아래의 방법으로 create-react-app을 삭제해도 문제가 해결 되지 않는다 npm uninstall -g create-react-app # OR ya..