Jake의 블로그

# react-native-system-bars를 활용해서 안드로이드 시스템 숨기는 방법 - RN으로 크로스 플랫폼 개발을 하다보면, 안드로이드에서는 시스템 바와 네비게이션 바로 인한 추가적인 처리가 필요한 경우가 있다. 안드로이드 운영체제 특성 상 하단 시스템 메뉴가 자리를 차지 하고 있기 때문이다. 특히 앱이나 게임에서 전체 화면을 다 사용하고 싶은 경우에는 이 처리가 필수적이다. 그렇다보니 이를 지원하는 다양한 라이브러리르들이 있지만, 최근에 사용해본 추가적인 삽질 없이 바로 동작하던 라이브러리를 하나 소개하려고 한다. # 깃헙 페이지 GitHub - hudl/react-native-system-bars: Control the visibility of Android's Status Bar and N..

# react-native-element-dropdown - Dropdown은 웹 또는 앱에서 많이 사용되는 선택 UI입니다. 문제는 이러한 UI들이 대부분 네이티브 UI를 사용하다보니, Android와 IOS에서 동일한 디자인이 아니라는 것입니다. 이러한 문제를 해결하기 위해서는 적절한 라이브러를 활용하는 것이 효율적입니다. 지난 번 관련 포스팅에서는 간단하고 쉽게 사용할 수 있는 깔끔한 라이브러리를 소개했었습니다. [React Native][라이브러리 소개] 지금까지 봤던 가장 깔끔한 Dropdown / Picker / Select # React Native에서 사용가능한 가장 마음에 드는 react-native-dropdown-picker - React Native에서 선택 옵션을 구현할 때, 일반..

# 2023.09 이달의 무료 콘텐츠 ※ 언리얼 엔진에서 사용 가능한 컨텐츠입니다. 일정 기간 동안 할인율 100%로 제공하는 정기 이벤트입니다. 구입 후 언리얼 엔진 라이브러리에서 다운 및 이용이 가능합니다. 당장 사용하지 않더라도 일단 받아놓으시면, 언젠가 필요해질 수 있습니다. - 마켓플레이스 이달의 무료 콘텐츠 페이지 https://www.unrealengine.com/marketplace/ko/assets?count=20&sortBy=effectiveDate&sortDir=DESC&start=0&tag=4910 마켓플레이스 탐색&검색 | 언리얼 엔진 마켓플레이스 www.unrealengine.com

# react-native-restart를 사용해서 런 타임 중에 앱 번 들을 재시작 하는 방법 - 안녕하세요 Jake입니다. 오늘은 react-native-restart 라이브러리를 이용해서 앱 실행 중에 앱 번들의 재시작 기능을 추가하는 방법을 소개하려고 합니다. 사실 앱 번들의 재시작 기능은 필요하지 않도록 개발을 하는 것이 가장 좋지만, 언어나 테마 변경, 데이터 삭제 등의 경우에 쉽게 상태를 초기화 할 수 있기 때문에 유용한 기능이기도 합니다. # 깃헙 페이지 https://github.com/avishayil/react-native-restart GitHub - avishayil/react-native-restart: React Native Package With One Purpose: To ..

# NativeWind 라이브러리를 이용해서 TailwindCSS를 쉽게 적용하는 방법 소개 - 최근 개발하고 있는 모든 웹 프로젝트에서 스타일링에는 TailwindCSS를 사용하고 있습니다. 그런데 얼마전 React Native로 개발할 일이 생겼습니다. 문제는 이미 Tailwind에 중독된(?) 몸이었기 때문에, 어떻게든 Tailwind를 사용하고 싶었습니다. 다행히도 RN에서 Tailwind를 사용할 수 있게 도와주는 라이브러리를 찾아냈습니다. tailwind-rn, nativewind 정도가 눈에 들어왔고, 검토 결과 nativewind를 사용하기로 하였습니다. 본 포스팅에서는 nativewind의 설치 및 적용 방법을 설명하면서, 왜 nativewind를 사용하게 되었는지도 말쓰드리려고 합니다...

# rn-emoji-keyboard 라이브러리를 활용해서 Emoji 입력 키보드 구현 방법 소개 - 안녕하세요 Jake입니다. 본 포스팅에서는 Emoji를 추가할 수 있는 키보드를 라이브러리를 사용해서 쉽게 추가할 수 있는 방법을 소개하려고 합니다. 이모지는 간결하고 색감 있게 여러 가지 상황이나 느낌을 표현할 수 있기 때문에, 사용자들한테 제공하기 좋은 UI 요소 중 하나입니다. 하지만 이모지 입력하기 위한 UI를 직접 만들기는 쉽지 않습니다. 이런 경우 오늘 오늘 소개할 라이브러리를 활용해보시면 어떨까 합니다. # 깃헙 저장소 - https://github.com/TheWidlarzGroup/rn-emoji-keyboard GitHub - TheWidlarzGroup/rn-emoji-keyboard:..

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

# ToneJS를 사용해서 직접 노이즈를 만들어 보자 - 안녕하세요. Jake입니다. 오늘 포스팅에서는 ToneJS라는 라이브러리를 사용해서 화이트 노이즈를 만드는 간단한 방법을 소개하려고 합니다. 저는 이 방법으로 만든 노이즈를 제가 서비스 중인 Pomocat이라는 집중 타이머(뽀모도로) 앱에서 사용자한테 들려주고 있습니다. # 관련 링크 - 예제 페이지 https://tonejs.github.io/examples/ Tone.js Examples Choose an example from the side panel. tonejs.github.io - 데모 페이지 https://tonejs.github.io/demos # 사용 방법 - ToneJS를 설치합니다 yarn add tone - Tone을 Imp..

# react-native-magic-modal을 활용한 Modal 구현 방법 소개 - 안녕하세요. Jake입니다. 앱을 개발하는 과정에서 모달은 빼놓을 수 없는. UI 요소 중 하나입니다. RN에서 개발을 좀 해보신 분들이라면, RN에서 모달이 필요하면, react-native의 기본 모달로 직접 구현하거나 react-native-modal 사용하셨을 것입니다. 두가지 모두 많이 사용되는 좋은 Modal이지만, 생각보다 추가 해야 할 코드가 많고, 모달의 Show/Hide 등을 직접 관리 해야 해서 간단한 모달이어도 구현에 손이 많이 갑니다. 본 포스팅에서는 이런 경우에 활용할 수 있는 좋은 대안을 소개하려고 합니다. # Github Page GitHub - GSTJ/react-native-magic-..

# react-native-mmkv 저장소 라이브러리 사용 방법 소개 - 안녕하세요 Jake입니다. 본 포스팅에서 소개할 라이브러리는 react-native-mmkv라는 저장소 라이브러리입니다. React Native를 사용해보신 분들이라면, 로컬 저장이 필요할 때 자연스럽게 AsyncStorage를 사용해보셨을 것입니다. 그러다보니 대안을 찾아본 적이 없었는데, 이번에 다른 라이브러리와의 호환성 이슈로 이 라이브러를 찾게되었고, 깃헙 스타 4k 이상인 것으로 보아 이미 많은 분들이 사용 중이며 검증이 된 라이브러리라고 할 수 있을 것 같습니다. # 깃헙 저장소 https://github.com/mrousavy/react-native-mmkv GitHub - mrousavy/react-native-mmk..