전체 글108 React Native - 외부글꼴 사용 및 전역 색상관리하기 리액트 네이티브 앱을 개발할 때 앱 전반의 글꼴 (Font) 과 색상 (Color) 을 설정하는 방법에 대해 알아보겠습니다. 1. 외부 글꼴(폰트) 사용하기핸드폰의 기본 글꼴을 사용해도 괜찮지만 개인별 폰트 설정에 따라 화면에 보이는 글씨가 달라지므로 원래 보여주고자 하는 화면 디자인을 보여주기 어려운 상황이 되기도 합니다. 이러한 경우를 방지하기 위해 앱의 사용 글꼴을 지정하여 사용함으로써 디자인의 일관성을 유지할 수 있습니다.외부 글꼴로 Expo Font 사용하기설치 : $expo install expo-font앱 초기 구동시 글꼴을 불러와야 하므로 app.js 내에서 사용폰트 복사assets/fonts 폴더에 사용할 폰트 위치폰트 불러오기useFonts hook 사용사용할 폰트명 지정하고 requ.. 2024. 11. 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. 파이썬에서 NaN, None 데이터 다루기 파이썬에서 데이터 가공을 위해 가장 어려운 부분중 하나가 결측치 데이터 입니다.데이터 가공시 많이 사용하는 데이터프레임에서 결측치 데이터를 삭제하고 처리하면 가장 깔끔하겠지만 일부 항목에서 부분 결측치의 경우 행 전체를 삭제하기 어려움이 발생합니다. 값이 누락된 경우 해당 열의 데이터 타입의 특성에 따라 NaN, None 과 같이 다르게 보이게 됩니다.이와 같은 값을 포함한 채 데이터 가공을 하는 방법에 대해 몇가지 예시를 들어 설명하고자 합니다. 1. NaN 과 None 의 차이NaN (Not a Number)수치형 데이터 타입에서 숫자가 아닌 값을 나타냄NaN 의 타입은 'float' 로 수치연산에 포함될 수 있으며 연산 결과는 NaN 으로 유지예를들어 Pandas 나 Numpy 에서는 수치형 데이.. 2024. 11. 14. 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. 이전 1 2 3 4 5 ··· 18 다음 반응형
