Jake의 블로그

# 맥 터미널에서 Port 강제 종료 시키는 방법 - pid 찾기 // pid 찾기 lsof -i:3000 // 3000은 react 기본 포트 번호입니다. 원하는 포트 번호로 변경 파세요 - pid 확인 - 포트 종료하기 kill -9 1205 // 1205는 위에서 찾은 pid입니다. 적절한 pid로 변경하세요

# react-hotkeys-hook - 키보드 입력 및 단축키 이벤트 처리에 유용한 라이브러리 - React로 웹 사이트나 웹 앱 등을 개발 할 때, 생산성 및 편의를 위해서 단축키나 키보드 입력 이벤트에 대한 처리가 필요한 경우가 있습니다. 이번 포스팅에서는 이런 경우 유용한 라이브러리를 소개하려고 합니다 # Github 페이지 https://github.com/JohannesKlauss/react-hotkeys-hook GitHub - JohannesKlauss/react-hotkeys-hook: React hook for using keyboard shortcuts in components. React hook for using keyboard shortcuts in components. - Gi..

# react-textarea-autosize를 활용해서 자동 크기 변환 textarea을 사용해보자 - 텍스트 편집이 필요한 컴포넌트들을 개발하다보면 종종 textarea를 사용할 일이 있고, 입력되는 텍스트에 따라 자동으로 크기가 변경되는 스펙이 요구될 때가 있습니다. 이번 포스팅에서는 이런 경우 유용한 라이브러리를 소개하려고 합니다. # 깃헙 페이지 https://github.com/Andarist/react-textarea-autosize GitHub - Andarist/react-textarea-autosize: component for React which grows with content component for React which grows with content - GitHub - An..

# react-use-measure를 이용한 레이아웃 변경 이벤트 처리 - React로 개발을 하다보면, 표시되는 내용에 따라 동적으로 레이아웃이 변경되는 경우가 있습니다. 대부분의 경우는 반응형으로 구현을 해서 대응이 되지만, 레이아웃 크기에 따라 브라우저 창 크기를 변경하는 등의 경우에는 사이즈 변경에 대한 이벤트가 필요합니다. 그러나 React에서는 onResize와 같은 이벤트가 없기 때문에, 구현에 불편함이 있습니다. 오늘 포스팅에서는 이런 상황에서 요긴하게 쓰일 수 있는 라이브러리를 소개합니다. # 깃헙 페이지 https://github.com/pmndrs/react-use-measure GitHub - pmndrs/react-use-measure: 🙌 Utility to measure vie..

# react-device-frameset - 서비스의 랜딩 페이지를 개발하는 경우에, 모바일 기기에 서비스가 표시된 화면을 사용하고 싶은 경우가 있습니다. 이 경우, 코딩 보다는 적당한 템플릿을 찾아서 이미지를 수정하는 경우가 많은데, 여간 불편한게 아닙니다. 이번 포스팅에서는 이런 불편함을 해결 해줄 수 있는 라이브러리를 소개드리려고 합니다. # 사용 방법 - 설치 합니다. yarn add react-device-frameset - 라이브러리 내부에서는 Pure CSS Mobile Devices.css 라는 라이브러리를 사용합니다. 그러므로, 아래와 같이 css도 import 해줘야 합니다. 사용 방법은 아래와 같이 간단합니다. import { DeviceFrameset } from 'react-de..

# react-colorful 라이브러리 소개 # 사용방법 - 라이브러리를 설치합니다 npm install react-colorful - 아래의 예제처럼 사용하시면 됩니다 import { HexColorPicker } from "react-colorful"; const YourComponent = () => { const [color, setColor] = useState("#aabbcc"); return ; }; - 아래와 같이 여러 형태의 Color Picker로 변경해서 사용도 가능합니다. # 데모 페이지 https://omgovich.github.io/react-colorful/ react-colorful omgovich.github.io

# Gradient Image Generator - Gradient가 적용된 스타일은 좋은 디자인 아이디어가 없거나, 그냥 단색으로 하기 아쉬운 상황에서 요긴한 경우가 많습니다. 특히 개발자 혼자 프로젝트를 진행하는 경우에는 더더욱 그렇습니다. 오늘 포스팅에서 소개할 Gradient Image Generator도 다른 프로젝트에서 사용할 다양한 크기의 배경 이미지가 필요해서 개발한 것입니다. 여러분들에게도 도움이 되었으면 좋겠네요. 설명할 내용이 없을 정도로 간단한 기능이어서, 본 포스팅에서는 소스코드 공유 및 사용법 정도만 소개할께요. - 소스코드: https://github.com/ENFP-Dev-Studio/gradient-generator - 사이트: https://gradient.enfpdev...

# react-realtime-drawing - React에는 수 많은 그리기 라이브러리가 있습니다. 이런 라이브러리들은 다양한 브러쉬와 편의 기능(Undo, Redo)등을 제공하지만, 그만큼 자신의 프로젝트에 적용 시키는 일은 쉽지 않습니다. 오늘 소개할 react-realtime-drawing 라이브러리는 아주 색깔과 두께 정도만 지정할 수 있는 대신, 아주 가볍고, 적용이 쉬운 Drawing 라이브러리 입니다. # 데모 페이지 https://jsaari97.github.io/react-realtime-drawing/ React Realtime Drawing jsaari97.github.io # 설치 방법 yarn add react-realtime-drawing # 사용 방법 import React ..

# 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..