Jake의 블로그

# react-tooltip 사용방법 - Tooltip은 UI를 간소화 하면서도 필요한 정보를 전달하기 위해 자주 사용되는 방법 중 하나입니다. 그렇기에 다양한 UI Framework에서 Tooltip은 기본적으로 지원하는 컴포넌트 중 하나입니다. 그러나 이러한 통합 프레임워크는 필연적으로 무겁거나 용량이 큰 경우가 많다보니, 실제 적용할 때 퍼포먼스에 대한 고민이 생기는 경우가 있습니다. 본 포스팅에서는 이런 경우 도움이 될 수 있는 react-tooltip에 대한 사용법을 소개하려고 합니다. # Github Page https://github.com/ReactTooltip/react-tooltip GitHub - ReactTooltip/react-tooltip: React Tooltip Compone..

# re-resizable 라이브러리를 활용해서 사용자가 크기를 변경할 수 있는 Component를 구현하는 방법 - 이전 포스팅에서 react-rnd를 소개한 적이 있습니다. 컴포넌트를 드래그앤드롭 및 크기 변경까지 가능해서 유용하게 사용할 수 있는 라이브러리였습니다. 오늘 포스팅에서 같은 개발자가 개발한 re-resizable이라는 조금 더 간단한 라이브러리를 소개해 드리려고 합니다. re-resizable은 이름에서 알 수 있듯이 이동관련 기능이 빠진, resizing에 초점이 맞춰진 라이브러리입니다. 컴포넌트의 크기를 마우스로 변경할 수 있는 기능을 추가하려는 경우에 유용하게 사용할 수 있을 것으로 보입니다. # Github Page GitHub - bokuweb/re-resizable: 📏 A ..

# 소개 React 애플리케이션에서 Drag & Drop 기능을 구현할 때, react-rnd 라이브러리를 사용하면 쉽고 빠르게 구현할 수 있습니다. Drag & Drop 기능을 구현할 수 있는 다른 좋은 React 라이브러리들도 많지만, 만약 Resize가 꼭 필요하고, 별다른 학습 없이 바로 구현하고 싶다면, react-rnd가 좋은 선택일 것입니다. 본 포스팅에서는 이 라이브러리를 이용하여 Drag & Drop 기능을 구현하는 방법을 알아보겠습니다. # react-rnd 설치 yarn add react-rnd # 구현 방법 react-rnd를 사용하여 React Drag & Drop 기능을 구현하는 방법은 매우 간단합니다. 먼저 react-rnd 라이브러리를 설치하고, 사용할 컴포넌트에 Resiza..

# react-image-file-resizer를 사용하여 이미지 변환 방법 - 웹이나 웹앱을 개발하다보면, 이미지 파일 사이즈를 변환해야 하는 경우가 있습니다. 이럴 때 사용 가능한 여러 좋은 라이브러리들이 있습니다만(Sharp, Pica 등) 하지만, 간단하고, 프론트에서 전부 처리할 수 있고, react 용으로 랩핑이 되어 있는 라이브러리가 필요하다면, react-image-file-resizer도 좋은 선택일 수 있습니다. # Github Page https://github.com/onurzorluer/react-image-file-resizer#readme GitHub - onurzorluer/react-image-file-resizer: Resize Local Images with React ..

# react-notion-x를 사용해서 React에서 Notion 페이지 보여주기 - Notion은 쉽게 웹 상에 공개된 페이지를 만들 수 있고, 기본 제공되는 디자인이 훌륭하기 때문에, 약관 동의나 사용법과 같은 서비스의 직접 적인 이미지나 기능에는 영향을 주지 않지만, 제공 되어야 하는 페이지를 작성하는데 자주 사용합니다. 그런데 Notion 페이지를 직접 링크를 걸어 보여주는 방법도 있지만, 이럴 경우 사용자가 Notion으로 이동해야 한다는 점이 불편합니다. 오늘 포스팅에서는 이런 경우 도움이 될 수 있는 라이브러리를 소개하려고 합니다. # Github Page https://github.com/NotionX/react-notion-x GitHub - NotionX/react-notion-x: ..

# React Icon를 활용해서 원하는 아이콘을 쉽게 적용하는 방법 - react-icons는 React 개발을 하시다보면, 자연스럽게 알게되는 사이트 중 하나일 것입니다. 현재 27개 정도의 아이콘 라이브러리를 포함하고 있기 때문에, 왠만한 프로젝트는 react-icons하나로 커버가 가능합니다. 게다가 현재도 꾸준히 업데이트가 되고 있고, 통합 검색 또한 제공하므로 사용하기 정말 편합니다. 그리고 대부분의 아이콘이 자유롭게 무료로 사용이 가능하지만 아이콘 별로 라이센스가 다르므로한 번 확인 하시는 것이 좋을 것 같습니다. # 사용법 React Icons React Icons Include popular icons in your React projects easily with react-icons, ..

# svg-spinner와 react-svg-spinner를 활용한 가벼운 로딩 아이콘 만드는 방법 - 웹 개발을 하다보면, 항상 필요하게 되는 요소 중 하나가 스피너 입니다. UI 프레임워크를 사용하는 경우에는 해당 프레임워크에서 스피너를 제공하기도 하지만, 만족스럽지 않은 경우가 많습니다. 그러다보니 결국 직접 스피너를 만들게 되는 경우가 많습니다. 오늘 포스팅은 이런 경우에 도움이 되는 팁입니다. # 사용법 - SVG파일로 사용하실 분이라면 아래의 페이지에 접속해서 마음에 드는 스피너를 찾은 후에 다운 받아서 사용하시면 됩니다 GitHub - n3r4zzurr0/svg-spinners: A collection of 24 x 24 dp SVG spinners! (CSS & SMIL) A collect..

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

# html-to-image를 활용한 html element를 이미지로 저장하는 방법 - 웹 앱을 개발하다보면, 가끔 웹 페이지 또는 컴포넌트를 이미지로 저장하는 기능이 필요한 경우가 있습니다. 이럴 때 스크린 샷 기능을 활용 할 수도 있지만, 윈도우 외의 영역을 제외 시킨다던지, 특정 컴포넌트를 숨기고 싶은 경우에는 구현이 쉽지 않습니다. 이런 경우 오늘 소개할 라이브러리가 도움이 될 수 있습니다. 지난 포스팅 중에 html2canvas라는 라이브러리를 소개해 드린 적이 있었는데, 오늘 소개할 라이브러리가 더 간편하고 지원하는 이미지 포맷도 다양하니, 꼭 사용해보셨으면 좋겠네요 # 깃헙 페이지 GitHub - bubkoo/html-to-image: ✂️ Generates an image from a D..