React Native12 React Native - 기본 Template Component 만들기(1) 앱 개발의 표준화, 개발 속도, 유지보수 편이성을 높이기 위해 기본적인 컴포넌트를 템플릿으로 만들어 보고자 합니다.기본 기능으로 나눠진 컴포넌트를 atomic design pattern 이라고 합니다. atomic 을 기본으로 하고 compound desgin pattern 까지 간단하게 만들어 보겠습니다. 1. Typhography (텍스트 템플릿)텍스트 표출 템플릿으로 prop으로 폰트 컬러(color)와 크기(size)를 넘겨받아 변화를 줌특히 propTypes 라이브러리 사용하여 prop type을 지정한 type만 받도록 제한하는 방법을 적용 추천import React, { Component } from 'react';import { Text as RNText } from 'react-nati.. 2024. 11. 11. React Native - 위치기반 날씨앱 만들기(2) 이전 포스트에 이어서 날씨 정보 API를 사용하여 현재 위치 날씨를 보여주는 앱 페이지를 만들어 보겠습니다. 날씨 정보는 OpenWeatherMap을 사용합니다. 기본적인 사용법 및 API key 생성은 제 이전 포스트를 참고하기 바랍니다.2023.12.13 - [개발활용툴] - 날씨 API - OpenWeather 사용하기(1) 날씨 API - OpenWeather 사용하기(1)날씨 정보는 다양한 종류에 활용도가 높은 컨텐츠 중에 하나입니다.본인이 제공하는 주요 컨텐츠에 맞게 적절하게 사용한다면 좀 더 풍부한 정보를 가진 사이트를 만들 수 있겠습니다.여러 종peter-codinglife.tistory.com 1. 기본 기능 리스트처음 앱 구동시 위치정보 동의 여부 확인하기현재 핸드폰 위치정보 조회 하.. 2024. 11. 10. React Native - 위치기반 날씨앱 만들기(1) 핸드폰 위치 기반으로 현재 위치의 날씨 정보를 표출하는 간단한 앱을 만들어 보겠습니다.이를 통해 Expo 에서 핸드폰 위치를 가져오는 방법과 Open WeatherMap의 API 를 이용하여 현재 위치기반으로 날씨 정보를 가져와서 표출하고자 합니다. 1. 프로젝트 생성 및 라이브러리 설치앱명칭 : RN-weather 실행 : npx create-expo-app RN-weather --template blank참고 : --template blank 옵션 : javascript 로 개발핸드폰 위치조회 라이브러리 설치npx expo install expo-location2. Expo Location 관련 주요 기능현재 위치 가져오기핸드폰 현재 위치를 한번 가져옴위치 자동업데이트(subscribe)실시간으로.. 2024. 11. 9. [React Native] 갤러리&앨범 이미지 가져오기 앱 개발시 핸드폰 갤러리 이미를 가져다 사용하고자 할 때 expo 를 이용하는 앱개발에서는 imae picker 를 사용하면 쉽게 접근하여 적용하는 방법이 개발하는데 도움이 될 것 같아 내용을 정리해 보았습니다. 1. Expo image picker 사용하기https://docs.expo.dev/tutorial/image-picker/ 라이브러리 설치하기 터미널에서 "npx expo install expo-image-picker" 앱에 image picker 사용설정import * as ImagePicker from "expo-image-picker";image picker에서 제공하는 launchImageLibraryAsync 라이브러리 사용 2. 라이브러리 사용방법이미지 불러오는 aync/awa.. 2024. 9. 21. React Native앱개발-Async Storage사용하기 리액트 네이티브앱을 개발할 때 서비스용 데이터를 핸드폰에 저장하는 방법으로 Async Storage 를 사용하는 방법에 대해 알아보고자 합니다. 별도의 백엔드 서버 및 데이터베이스 구축없이 간단한 텍스트 데이터의 경우 핸드폰 저장장치에 저장하고 사용할 수 있습니다.사용하는 방법과 제약사항에 대해 구체적으로 알아보겠습니다. 1. Async Storage 특징텍스트 데이터만 저장 가능Object 형식으로 저장해야 해서 저장할 데이터를 JSON 포맷으로 변경 : JSON.stringify() 저장된 데이터 불러오기 : JSON.parse()2. 설치하기expo 의 경우npx expo install @react-native-async-storage/async-storagereact navtive cli 이 .. 2024. 8. 24. 앱 개발 코딩 - 나에게 맞는 것은??? 스마트폰 시대에서 많은 앱을 사용하면서 나 만의 앱을 만들어 보고 싶지 않으셨나요? 저는 회사의 업무도 개발파트는 아니지만 개발과 관련된 프로젝트관리 및 기획 업무를 하고 있습니다.비전공자로서 개발 업무의 이해도를 높이기 위해 개인적으로 코딩을 배워보고자 해서 작년초부터 조금씩 언어를 익혀가고 있습니다. 회사의 데이터분석 역량 강화 요구에 따라 파이썬으로 시작해서 간단한 웹페이지 개발까지 해보았고,궁극적으로는 나 만의 앱을 만들고 싶어서 어떻게 접근하면 좋을 지 몰라 유튜브, 웹 서핑 등 검색과 탐색을 해보았습니다.요즘 앱 개발이 쉬운 다양한 솔루션이 나오고 있습니다. 테스트로 간단하게 만드는 것 부터 복잡한 기능에 이르기까지 목적에 따라 선택을 하면 좋을 것 같습니다. 우선 저의 수준과 하고자 하는 .. 2024. 8. 2. 이전 1 2 다음 반응형
