Jake의 블로그

# i18nize-react를 활용해서 i18next 관련 코드 자동 생성 방법 소개 - 다국어 지원은 개발자에게 있어, 항상 마주치게 되는 이슈 중 하나입니다. 꼭 필요하고 중요한 과정이지만, 항상 노가다를 동반하기 때문에, 뒤로 미루게 되는 작업이기도 하죠. 게다가 더욱이 다국어 지원에 대한 것이 처음부터 확정되어 있지 않아서, 하드 코딩을 했다면, 이를 하나하나 찾아서 바꾸는 일은 정말 큰 인내심이 필요합니다. 오늘 포스팅에서는 이런 상황에서 큰 도움이 될 수 있는 방법을 소개해 드리려고 합니다. 그리고 i18next 라이브러리 사용법은 포스팅에 포함되지 않았으니, 참고하시기 바랍니다 # 깃헙 페이지 https://github.com/Ghost---Shadow/i18nize-react GitHub ..

# react-signature-canvas를 활용해서 서명 기능 구현 방법 - 웹 개발을 하다보면, 사용자 서명을 받는 컴포넌트가 필요한 경우가 있습니다. 직접 구현을 해도 되지만, 기능이 가지는 중요도에 비해, 개발에 많은 시간이 소요되기 때문에, 오늘 포스팅에서 소개 할 라이브러리를 활용하시면 좋을 것 같습니다. 해당 라이브러리는 signature-pad라는 자바스크립트용 라이브러리를 리액트 용으로 랩핑한 라이브러리 입니다. 자바스크립트에서 사용하실 분은 링크를 참고하시면 될 것 같습니다 # 깃헙 페이지 - react-signature-canvas 깃헙 페이지 GitHub - agilgur5/react-signature-canvas: A React wrapper component around sig..

# react-lines-ellipsis 라이브러리를 활용한 생략 처리 - React에서 문자열 관련 컴포넌트를 개발하다보면, 문자열의 일부만을 보여주고 생략 처리가 필요한 경우가 있습니다. React Native의 경우에는 Text 컴포넌트에 ellipsis 옵션이 기본적으로 있기 때문에 쉽게 구현이 가능하지만, React에는 포함되어 있지 않기 때문에, 막상 직접 구현하려면 생각보다 시간이 걸립니다. 이번 포스팅에서는 이런 경우 도움이 될 수 있는 라이브러리를 소개하려고 합니다. # 깃헙 페이지 GitHub - xiaody/react-lines-ellipsis: Simple multiline ellipsis component for React.JS Simple multiline ellipsis com..

# 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

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

# 새 브라우저 창에서 외부 사이트 열기 # Web 기반 개발을 진행하다 보면, 외부 사이트를 새 브라우저 창에서 띄우는 기능이 필요한 경우가 있습니다. 이 경우, 아래와 같은 방법으로 처리할 수 있습니다 // 화면 사이즈 가져오기 const height = window?.screen?.height; const width = window?.screen?.width; const url = "https://enfp-jake.tistory.com"; // 외부 브라우저 열기 window.open(url, "_blank", `height=${height}, width=${width}`);