리액트(React)45 React Native - tooltip 적용하기 React Native 앱에서 메뉴의 도움말 아이콘 클릭 시 간단한 설명(툴팁)을 보여주고 싶다면, 다음과 같은 라이브러리들을 사용해 볼 수 있습니다. 장단점을 보고 서비스의 용도에 맞추서 선택하는 것이 필요합니다.1. react-native-paper의 Tooltip특징:Material Design 기반의 심플하고 가벼운 툴팁 컴포넌트터치(클릭) 시 간단한 텍스트 설명을 보여주기에 적합커스텀 스타일, 위치 지정(top, bottom, left, right) 지원장점:설치와 사용이 매우 간단React Native Paper를 이미 사용 중이라면 통합성 우수공식 문서: [react-native-paper Tooltip]https://callstack.github.io/react-native-paper/d.. 2025. 5. 9. [React Native] 이미지 위치정보 가져오기 (EXIF 포맷) 이전 블로그에서 갤러리 & 앨범에서 이미지 가져오는 방법에 대해 알아 보았습니다.2024.09.21 - [리액트(React)] - [React Native] 갤러리&앨범 이미지 가져오기 이번에는 좀 더 나아가서 이미지에서 위치정보를 가져오는 방법에 대해 알아보고자 합니다. 핸드폰(삼성 기준) 갤러리앱에서 이미지를 선택하고 상세보기를 보면 사진관련 다양한 정보들을 확인할 수 있습니다. 아래 이미지는 광화문에서 찍은 사진인데 촬영한 날짜, 시간, 핸드폰 기종, 해상도, 카메라 셋팅값, 파일용량, 저장위치, 파일명 등 다양한 정보를 확인 가능합니다. 여기에 위치정보도 같이 있어서 주소지 정보와 지도상 위치도 확인 가능합니다. 이러한 정보의 기준 포맷은 무엇일까요? 혹시 Exif 라는 이미지 파일포맷을 들어 .. 2025. 4. 18. NoSQL Firebase Realtime Database vs Cloud Firestore 비교하기 리액트 네이티브 앱 개발하면서 어떤 데이터베이스를 사용하는 것이 효율적인지 고민이 많았습니다. 요즘 유행하는 Supabase에 대한 고민도 하였지만 처음 앱 개발하는데 있어서 종합적인 솔루션을 제공하는 구글 firebase 기반의 솔루션을 사용하기로 하고 관련 기능에 대해 검토를 하였습니다. 일반적으로 앱 개발 강의를 통해서 많이 접하는 것이 구글 realtime database 였기에 시작은 당연히 realtime database로 선택하고 서비스 개발을 진행하였습니다. 하지만 서비스 기획내용이 구체화 되고 기능이 많아 지면서 고민이 생기기 시작했습니다. 구글에서 firestore라는 다른 database도 있기에 realtime database와 어떤 차이가 있고 firestore로 변경하는 것이 맞.. 2025. 4. 8. 구글 파이어베이스 스토리지에서 이미지 관리(1) React Native를 이용한 앱 개발작업을 진행하면서 사용자가 업로드하는 이미지를 어떻게 하면 관리를 잘 할 수 있을까에 대한 고민에서 시작하게 되었습니다.가장 쉽게 접할 수 있는 구글 파이어베이스(Firebase)를 이용하여 앱 개발을 진행하고 있어서 구글 솔루션중 하나인 스토리지(Storage)를 활용하는 방법으로 설명하고자 합니다. 기본적으로 파이어베이스에서 프로젝트 생성부터 스토지리 사용 등록에 대한 절차는 생략하고, 활용적인 측면에서 고민사항과 해결방안에 대해 예시로 만들어 보았습니다. 1. 이미지 저장 방법에 대한 고민요즘 핸드폰 카메라 성능이 좋아서 사진 파일 사이즈가 기본적으로 큼스토리지 사용은 돈 인데 효율적인 사진 크기는 얼마일까?그럼 이미지를 서버에 올릴 때부터 사이즈를 조정해서.. 2025. 1. 16. 파이썬-우편번호API 이용 우편번호 찾기(2) 2024.12.19 - [파이썬(Python)] - 파이썬-우편번호API 이용 우편번호 찾기(1) 파이썬-우편번호API 이용 우편번호 찾기(1)서비스 기능을 개발하거나 데이터 정제작업을 하는 과정에서 주소정보 기반으로 우편번호가 필요한 경우가 있습니다.어디서나 쉽게 보는 주소 검색으로 우편번호 찾기 기능을 파이썬으로 간단peter-codinglife.tistory.com 이전 포스트에서 API 사용방법에 대해 작성하였고, 이번에는 실제 사용 예시에 대해 설명하고자 합니다.개발 목적에 따라 변경하여 사용하면 되겠습니다. 1. 예시 내용파이썬을 이용하여 대량의 주소지 정보를 엑셀파일 불러와서 우편번호 매칭 작업매칭된 결과를 다시 엑셀로 저장하기2. 기능 구현 사항 기본 라이브러리 설정API 조회 함수 .. 2024. 12. 20. 리액트 성능최적화 하기 - useMemo, useCallback 리액트의 컴포넌트는 이제 class 보다는 function 형을 사용할 것을 권장하고 있습니다.함수형으로 사용은 hook 의 역할이 커지면서 효용성이 더 커지게 되었으나 단점으로는 함수가 실행될 때마다 rendering이 다시 발생되어 메모리를 비효률적으로 사용하게 됩니다. 이를 방지하기 위해 사용하는 hook 이 useMemo, useCallback 입니다.어떤 경우에 어떻게 사용하면 되는지 예를들어 알아 보겠습니다. 1. useMemo계산된 값을 메모이제이션(Memoization) 하는데 사용주요 사용 예시 : 복잡한 계산이 필요한 경우, 렌더링 성능을 최적화해야 할 때 사용import React, { useMemo } from 'react';function ExpensiveComponent({ d.. 2024. 11. 17. 이전 1 2 3 4 ··· 8 다음 반응형
