게으름을 위한 부지런한 게으름뱅리' 블로그

♪ 컴퓨팅 서비스 Amazon EC2(Elastic Compute Cloud) 가상화 서버, 다양한 형태의 타입과 서비스에 따라 적합한 사양을 선택가능, 사용량만큼 비용을 지불 Amazon Auto Scaling 특정 조건에 따라 서버를 추가,삭제를 해주는 서비스, 트래픽이 많은 경우 자동으로 서버를 생성하고 사용하지 않은 경우에는 서버를 자동으로 삭제할 수 있게 해주는 서비스 Amazon Lightsail 간단한 가상화 프라이빗 서버(Virtual Private server)가 필요한 개발자용 서비스, EC2보다 간편하고 싸다, EC2로 마이그레이션이 가능하다 Amazon WorkSpaces 데스크톱 가상화 서비스, 사내 PC를 가상화로 구성가능, 문서 및 데이터를 서버에 보관 관리할 수 있도록 해주는..

컴포넌트에 스타일을 적용하는 방법에는 아래와 같이 3가지 방법이 있다. 상황에 맞추어 사용하기 ♩ Inline style 컴포넌트마다 직접 입력한다 ♩ StyleSheet style StyleSheet를 생성하여 미리 정의해놓고 사용 . . . . . . const styles = StyleSheet.create({ container: { flex: 1, paddingTop: statusBarHeight, backgroundColor: "#fff", }, }); ♩ Styled Component 컴포넌트와 스타일을 한꺼번에 정의하여 사용 styled component를 사용하기 위해서는 라이브러리를 설치해야한다. yarn add styled-components 또는 npm install styled-co..

Map 반복되는 data를 그릴때 사용 순차적으로 순회 후 return 배열의 길이 만큼 return 각각의 item들은 unique한 key가 있어야 한다. export default (props) => { return ( //showsVerticalScrollIndicator :스크롤 바 감추기 //contentContainerStyle : 맨아래로 스크롤 했을 경우 아래가 잘리지 않고 보임 {/* Map에서 key를 설정해주지 않으면 경고, key는 최상단 root 컴포넌트에 있어야 한다 */} { props.data.map((item, index) => ( )) } ) }

Expo에서 제공하는 기본 Icon 사용 https://icons.expo.fyi/ @expo/vector-icons directory icons.expo.fyi 1. 위 페이지 접속 후 원하는 Icon을 검색 2. 검색 후 원하는 Icon을 선택하여 복사해서 사용 3. 소스코드에 적용하기 import { Ionicons } from '@expo/vector-icons'; const IconButton = (props) => { return ( ); }

화면을 그릴때 View영역이 StatusBar 영역과 겹치는 현상이 발생. 안드로이드에서만 SafeAreaView가 정상적으로 동작하지 않음. OS에 따라서 Padding을 주어 해결. export default function App() { return ( ); } react-native-safe-area-context react-native-safe-area-context를 설치하면 OS구분 없이 정상 동작하는걸 확인가능 설치하기 yarn add react-native-safe-area-context 사용하기 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'; export default function App..

custom Hook은 "use"라는 prefix가 붙어야한다. import React, {useState} from "react"; import { TextInput, View, Button, ProgressViewIOSComponent } from "react-native"; const InputBox = (props) => { return ( ) } const useInput = (initialValue) => { const [value, setValue] = useState(initialValue); const resetValue = () => setValue(initialValue); return { value, setValue, resetValue,} } const CustomHook = ()..

♩ useState 함수형 component에서 사용하는게 편하다 가독성 및 코드의 길이가 줄어듬 state상태에는 어떠한 상태라도 들어감 const [count, setCount] = useState(0); const [isOn, setIsOn] = useState(false); const [name, setName] = useState(""); ... setCount(count+1)} /> { setIsOn(v); } } /> { setName(v); } } /> ♩ 클래스 컴포넌트의 생명주기 순서 최초 : Constructor -> render -> componentDidMount 변경: render -> componentDidUpdate 제거 : componentWillUnmount compone..

Core Components 공식 문서 https://reactnative.dev/docs/components-and-apis Core Components and APIs · React Native React Native provides a number of built-in Core Components ready for you to use in your app. You can find them all in the left sidebar (or menu above, if you are on a narrow screen). If you're not sure where to get started, take a look at the following cat reactnative.dev Components ? 재..