리액트네이티브12 [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. Expo Splash Screen 만들기 리액티브 네이티브 앱만들기에서 앱 초기 구동시 보여지는 스플래시 스크린(Splash Screen)에 대해 간단한 예시를 통해 알아보고자 합니다. 1. 스플래시 스크린이란?앱을 초기 구동시 보여주는 시작 화면일반적으로 앱이 준비되는 1 ~ 3초 정도 보여지게 됨목적앱 로딩 시간동안 빈 화면 대신 표출되어 사용자에게 정상적인 구동중임을 표시서비스와 브랜드 이미지 전달하는 것이므로 중요하게 여김표출내용앱 로고, 브랜드 이미지, 간단한 애니메이션 등을 포함단순하면서도 눈길이 가는 시각적 요소 중요다양한 디바이스 해상도 고려 필요2. Expo 용 필요 라이브러리 설치 및 사용설치 : npx expo install expo-splash-screen사용import * as SplashScreen from 'ex.. 2024. 11. 15. React Native - 기본 Template Component 만들기(3) 이번 Template Component 는 기존 앞의 두 개 포스트와는 다른 좀 더 복잡하지만 효용성이 높은 Compound Component Design 패턴을 이용하여 만들어 보겠습니다. 우선 Compound Component Design에 대해 간단히 설명하고 사례를 들어보면 이해가 좀 더 쉽게 될 것 같습니다. 1. Compound Component Design일반 컴포넌트와 다른 점은 다음과 같습니다.일반 컴포넌트 : 단일 컴포넌트로 구성되며, props를 통해 데이터나 함수를 전달 받음: 로직과 UI가 하나의 컴포넌트에 집중컴파운드 컴포넌트 : 여러 개의 관련 컴포넌트를 하나의 부모컴포넌트에 그룹화하여 구성함: 부모 컴포넌트가 전체 로직과 상태를 관리하고, 자식 컴포넌트들과 공유: 로직은 부.. 2024. 11. 13. React Native - 기본 Template Component 만들기(2) 이전 포스트에 이어서 기본 템플릿으로 좀 더 복잡한 컴포넌트를 만들어 보겠습니다. 1. Button버튼 명칭, 버튼 선택시 동작 함수, 버튼 선택범위 값(hipslop)을 props로 넘겨줌hipslop 은 버튼의 선택범위를 조절할 수 있는 것으로 props로 넘겨주지 않으면 기본값으로 '0' 을 지정하도록 함import React, { Component } from 'react';import { Pressable } from 'react-native';export default class Button extends Component { render() { return ( {this.props.children} ) }} 2. Icon기본적으로 가장 .. 2024. 11. 12. 이전 1 2 다음 반응형
