Jake의 블로그

# react-typed를 사용하여 타이핑 효과 구현하는 방법 - 안녕하세요 Jake입니다. 본 포스팅에서는 react-typed 라이브러리를 사용해서 타이핑 효과를 구현하는 방법을 소개하려고 합니다. 타이핑 효과는 사용자들한테 문자열이 실제로 입력되는 것처럼 보이게 하여 시선을 끌어주기에 애용되는 효과 중 하나입니다. 그렇지만 기대대는 효과 대비 구현이 번거롭다는 것이 문제입니다. 이런 경우 오늘 소개할 라이브러리를 활용해 보시는 것은 어떨까요? # 관련 페이지 - 깃헙 페이지 https://github.com/ssbeefeater/react-typed GitHub - ssbeefeater/react-typed: A react wrapper for typed.js A react wrapper for t..

# HyperUI - 무료 오픈소스 Tailwind CSS 컴포넌트 활용 방법 - Tailwind CSS는 가장 핫한 CSS 프레임워크 중 하나입니다. 하지만, 다른 UI 프레임워크들과는 다르게 직접적으로 컴포넌트를 제공하지 않기 때문에, 실제로 활용을 하려면 Headless UI와 같은 보조 라이브러리나 컴포넌트, 예시들이 필요한 경우가 많습니다. 본 포스팅에서는 이런 경우 도움이 될 수 있는 HyperUI를 소개하려고 합니다 # HyperUI 사이트 https://www.hyperui.dev/ Free Open Source Tailwind CSS Components | HyperUI Free Tailwind CSS components that can be used in your next project..

# React에서 폭죽, 빵빠레 효과를 쉽게 추가하는 방법 - React 프론트엔드를 개발하다보면, 사용자가 특정 목표를 완료했을 경우나, 좋은 일이 발생했을 때 이를 강조하기 위해 폭죽이나 빵빠레 효과가 필요한 경우가 있습니다. 정말 자주 필요하지는 않지만, 막상 필요할 때 직접 구현하기는 손이 많이 가는 기능입니다. 본 포스팅에서는 이런 경우 유용하게 사용할 수 있는 라이브러리를 소개하려고 합니다. # 라이브러리 및 사용 방법 - 검토 및 사용해본 라이브러리는 4개 정도 되는데, 전체적으로 지원하는 기능은 유사했습니다. 추천 드리는 라이브러리는 폭죽이 터지는 효과면 충분하고 상대적으로 최신까지 유지보수가 되는 라이브러리를 선호한다면, react-confetti-explosion를 추천드리고, 터지는 ..

# flume를 활용해서 노드 기반 UI를 구현하는 방법 - 본 포스팅에서는 flume라이브러리의 기본적인 사용방법에 대해서 소개하려고 합니다. # Github Page https://github.com/chrisjpatty/flume GitHub - chrisjpatty/flume: Extract logic from your apps with a user-friendly node editor powered by React. Extract logic from your apps with a user-friendly node editor powered by React. - GitHub - chrisjpatty/flume: Extract logic from your apps with a user-friendl..

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