Jake의 블로그

# DriverJS를 활용해서 사용 가이드를 쉽게 구현하는 방법 소개 - 웹 또는 웹앱을 개발하다보면, 사용자 경험을 좋게 만들기 위해 최대한 불필요한 정보를 줄이는 작업을 하게 됩니다. 문제는 이러한 과정에서 사용자에게 각각의 기능에 대한 설명이 부족해지는 경우가 있는데, 문서 페이지에 정리를 아무리 잘해놔도 사용자 입장에서는 그저 사용하기 불편하다고 느끼기 마련입니다. 그러다 보니 필요한 경우 UI에 기능에 대한 안내를 표시를 하면서 가이드를 보여주는 방법이 효과적일 수 있습니다. 하지만 이 방법은 구현에 더 많은 리소스가 필요하기 때문에 포기하게 되는 경우가 많습니다. 본 포스팅에서는 이런 경우 도움이 될 수 있는 Driver.js 라이브러리를 소개하려고 합니다 # 사용방법 - Github Page..

# react-native-assets를 활용해서 네이티브 프로젝트에 에셋 추가하기 - React Native 환경에서 개발을 하다보면, Fonts를 변경하거나, 효과음이나 배경을을 추가하기 위해 MP3와 같은 음원 파일을 사용해야 하는 경우가 생깁니다. 문제는 이미지처럼 쉽게 포함시키지 못하고, XCode에 파일을 추가하거나, Android의 리소스에 추가하는 등의 추가작업이 요구됩니다. 하지만 이는 개발 하는 입장에서 시간을 빼았기는 귀찮은 일입니다. 본 포스팅에서는 이런 경우 도움이 되는 방법을 소개하려고 합니다 # 사용방법 - 자세한 사용방법 및 옵션들은 아래의 페이지에 잘 설명되어 있으니 참고하시기 바랍니다. GitHub - unimonkiez/react-native-asset: Linking ..

# 오페라 브라우저을 이용해서 무료로 VPN을 사용하는 방법 소개 - 글로벌한 웹 환경에서 살다보면, 가끔 VPN이 필요해지는 상황이 있습니다. 해외 서버에서 게임을 하는 등의 VPN을 적극적으로 사용하는 경우를 제외하면, 1회성으로 필요한 경우가 대부분 입니다. 그러다보니 무료체험 등을 이용하는 경우가 많은데, 대부분의 VPN 서비스는 회원 가입을 요구하거나 우선 구독을 해야 하는 곳도 많습니다. 그러다보니 부담도 되고 귀찮게 느껴집니다. 이번 포스팅에서는 이런 상황에서 도움이 될 수 있는 방법을 소개하려고 합니다 # 사용 방법 - 우선 오페라 브라우저를 설치 하고 실행 합니다. 아래 이미지와 같이 우측의 메뉴 버튼을 눌러 사이드 메뉴를 띄우고, VPN 메뉴로 이동해줍니다 - VPN탭에서 옵션을 활성화..

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

# Flutter 패키지 이름 변경하기 - change_app_packate_name이라는 패키지를 포스팅한 적이 있습니다. 하지만 Flutter 생태계나 Android, IOS와 같은 네이티브 프레임워크도 계속 발전 및 변화가 있다보니, 유지보수가 지속적이지 않을 경우, 조금만 업데이트가 부족해도 제대로 작동하지 않는 경우가 많습니다. 본 포스팅에서는 rename이라는 패키지와 사용법을 알려드리려고 합니다. # 라이브러리 페이지 https://pub.dev/packages/rename rename | Dart Package Helps you to change or rename your flutter project BundleId and AppName for Ios, Android, MacOS and L..

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

# Godot 4.x 유용한 링크 모음 https://godot-engine.zeef.com/andre.antonio.schmitz - Godot 관련 자료 및 링크를 순위 별로 정리해둔 사이트. 공식 문서에도 링크가 포함되어 있으므로 한 번 방문해볼 가치가 있다. Godot Engine Godot is an advanced, feature packed, multi-platform 2D and 3D open source game engine. It provides a huge set of common tools, so you can just focus on making your game without reinventing the wheel. godot-engine.zeef.com https://githu..

# ChatGPT를 사용해서 업무효율을 높힐 수 있는 경우를 정리하는 시리즈입니다 - ChatGPT는 이제 모르는 분이 없으실 것입니다. 하지만 주변에 물어보면 막상 실제 업무에 적극적으로 활용해서 사용하는 경우는 많지 않았습니다. 아무래도 챗봇의 형태다 보니 실제로 무엇을 할 수 있는지, 어떻게 원하는 내용을 얻을 수 있는지를 사용자가 알아야 하기 때문이라고 생각이 됩니다. 본 부려먹기 시리즈에서는 실제 제가 ChatGPT를 활용하는 사례와 원하는 결과를 얻는 과정을 정리하려고 합니다. 참고하셔서 업무 효율에 도움이 되셨으면 좋겠습니다 # ChatGPT를 사용한 영문 이메일 작성 - 제가 가장 많이 활용하는 영역 중 하나는 번역입니다. 영어에 익숙한 사람들에게도 영작은 부담이 되는 일입니다. 특히 비지..

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