리액트(React)44 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. [React] 유용한 Prop-Types 활용하기 리액트에서 컴포넌트의 props에 대한 타입 검사를 제공하는 중요한 기능입니다. PropTypes의 주요 장점과 기능은 다음과 같습니다. 1. 주요 장점타입 안정성 향상 - 컴포넌트에 전달되는 props의 타입을 런타임에 발견함으로써 조기에 오류 발견 가능코드 가독성 향상 - 컴포넌트에 어떤 타입의 props을 전달하면 되는지 명확히 지정디버깅 용이성 - 잘못된 타입의 props가 전달시 경고메시지 통해서 디버깅을 용이하게 함2. 기능다양한 타입 검사 - 문자열, 숫자, 불리언, 배열, 함수 등 javascript 타입 검사 가능필수 props 지정 - 'isRequired' 로 필수 입력 값임을 명시복잡한 타입 검사 - 'oneof', 'oneOfType', 'arrayOf' 등 사용하여 복잡한 타.. 2024. 11. 12. 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. 이전 1 2 3 4 5 ··· 8 다음 반응형
