Jake의 블로그

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

# icon-set-creator으로 앱 아이콘 쉽게 변경하는 방법 소개(react-native-make는 놓아주자) - React Native로 개발을 하고 IOS, Android 플랫폼 모두에 앱을 출시해본 경험이 있는 사람이라면, 아이콘을 변경하는 일이 얼마나 번거롭고 귀찮은 일인지 아실 겁니다. 그렇기에 react-naitve-make 같은 라이브러리를 찾아서 사용하게 됩니다. react-native-make를 사용해보신 적 없으신 분들을 위해 설명하자면, 지정한 아이콘 이미지를 기반으로 각 플랫폼에서 요구하는 아이콘 사이즈를 폴더 구조에 맞게 자동으로 생성해 주는 도구라고 보시면 될 것 같습니다. 문제는 플랫폼 별로 요구하는 사항이 계속 업데이트가 되다 보니, 라이브러리의 유지보수가 중요한데, ..

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

# React Native에서 사용가능한 가장 마음에 드는 react-native-dropdown-picker - React Native에서 선택 옵션을 구현할 때, 일반적으로 플랫폼 별로 제공하는 네이티브 Picker를 사용하는 경우가 많다보니, 클로스 플랫폼 개발 시에 UI의 통일성이 떨어지고, 디자인이 마음에 들지 않는 경우가 많습니다. 그렇다고 Picker를 직접 개발하거나 이를 위해 다른 UI 프레임워크를 적용하기에는 부담이 큽니다. 본 포스팅에서는 이런 경우에 유용하게 사용할 수 있는 라이브러리를 소개하려고 합니다 # 관련 사이트 - 깃헙 저장소 GitHub - hossein-zare/react-native-dropdown-picker: A single / multiple, categoriza..

# lucide-react, lucide-react-native를 활용해서 아이콘 한 번에 해결하기 UI를 개발하는 과정에서 아이콘의 사용은 필수적입니다. 특히 UI가 복잡하거나 기능이 많을 경우, 좋은 UX를 제공하기 위해서는 아이콘은 반드시 필요합니다. 하지만 개발팀에 디자이너가 없거나 있더라도 아이콘까지 직접 디자인을 하는 것은 시간을 많이 빼앗기는 일입니다. 그러다보니, 필연적으로 여러 아이콘 라이브러리들을 활용하게 됩니다. 그런데 항상 모든 라이브러리들이 충분한 수의 아이콘을 제공하는 것은 아니므로, 여러 라이브러리에서 필요한 아이콘들을 찾아서 사용하다보면, 전체적인 통일감이 떨어져서 아쉬움이 드는 경우가 많습니다. 오늘 포스팅에서는 이러한 경우에 활용 가능한 심플하면서도 많은 아이콘을 제공하는..

# IconKetchen을 활용해서 앱 아이콘을 만드는 방법 소개 - 크로스 플랫폼 개발을 진행하게 되면, 아이콘 작업은 피할 수 없는 작업이지만, 여러 플랫폼 별로 다양한 크기 및 포맷이 다르기 때문에, 이를 생성 및 적용하는 것은 귀찮은 일입니다. 특히 React Native의 경우, 기존에 잘 활용하던, react-native-make가 더 이상 유지보수가 되고 있지 않아서, 고민하던 차에 예전에 안드로이드 아이콘 생성에 사용했었던, Android Asset Studio가 기억이 나서 찾아보니, IconKitchen이라는 서비스로 교체가 되었다는 사실을 알게 되었고, 너무 편해서 혼자 쓰기에는 아쉬워서 본 포스팅을 작성하게 되었습니다 # 사용방법 - IconKitchen 사이트에 접속을 합니다. 그..

# react-native-keep-awake 라이브러리를 활용한 화면 켜짐 유지하기 - 앱을 개발하다 보면, 앱 사용 중에 화면이 자동으로 꺼지지 않게 막아야 하는 경우가 있다. 본 포스팅에서는 이런 경우 사용할 수 있는 라이브러리를 소개하려고 한다 # Github Repository GitHub - sayem314/react-native-keep-awake: Keep the screen from going to sleep. iOS and Android. Keep the screen from going to sleep. iOS and Android. - GitHub - sayem314/react-native-keep-awake: Keep the screen from going to sleep. iOS ..

# react-native-rename를 사용해서 패키지를 쉽게 변경하는 방법 - React Native 프로젝트 개발을 시작할 때, 앱의 최종 이름이나 번들 이름이 확정되어 있지 않은 경우가 많습니다. 기획이 변경 되기도 하고, 또 이름이 마음에 들지 않아서 바꾸기도 합니다. 그러다보니 패키지 이름을 변경해야 되는 상황은 발생하기 마련입니다. 문제는 이 과정이 번거롭고 귀찮다는 것입니다. 본 포스팅에서는 react-native-rename을 사용해서 전체 패키지 이름을 변경하는 방법을 소개하려고 합니다 # 깃헙 저장소 https://github.com/junedomingo/react-native-rename GitHub - junedomingo/react-native-rename: Rename reac..

# react-native-bottomsheet를 사용해서 유려한 하단 메뉴를 만드는 방법 - 하단 메뉴를 잘 활용할 경우, 화면 수를 줄이면서도, 좋은 사용자 경험을 제공할 수 있기 때문에 개발 시에 고려하게 되는 UI입니다. 하지만 애니메이션이나, Routing등 일반 UI에 비해 손이 많이 가기 때문에, 우선 순위에서 밀려서 드랍 되는 경우가 많습니다. 본 포스팅에서는 이런 경우, 도움이 될 수 있는 라이브러리를 소개하려고합니다. # Github Respository https://github.com/gorhom/react-native-bottom-sheet GitHub - gorhom/react-native-bottom-sheet: A performant interactive bottom shee..