모바일

간단하게 DHCP(Dynamic Host Configuration Protocol) 알아보기

DHCP는 동적으로 IP를 할당한다. DHCP의 동작은 사용자가 알 필요없이 자동으로 이루어져 IP를 host에 할당한다. IP는 유한한 resources이다. 따라서 때로는 IP를 할당받기 위해서 구매를 해야되며, 그 IP 주소를 사용하지 않을 때 그 IP 주소는 낭비된다. DHCP는 이 IP 주소의 낭비를 막기 위해서, IP 주소의 재사용을 위해서 IP 주소를 host가 필요로 할 때만 할당한다. 🍥 특히 모바일 유저는 고정된 IP를 사용하면 번거롭기 때문에 매번 IP를 할당받아야 한다. AWS의 EC2에서도, 인스턴스를 중지시키면 사용중이던 IP 주소를 해제한다. 따라서, 다음에 다시 인스턴스를 시작하면 다른 IP 주소를 사용하게 된다. 서버에서는 IP 주소가 매번 바뀌면 불편하기에, AWS에서는 ..

React Native 웹뷰 사용하기 (react-native-webview)

react-native-webview 설치하기 npm i react-native-webview 간단한 사용 예시 import React from 'react'; import {StyleSheet, View, Text} from 'react-native'; import {WebView} from 'react-native-webview'; const INJECTED_JAVASCRIPT = `(function() { window.ReactNativeWebView.postMessage(JSON.stringify(window.location)); })();`; const runFirst = ` document.body.style.backgroundColor = '#eeddcc'; setTimeout(functio..

react-native-image-picker를 사용하여 카메라 사용, 이미지 선택하기

라이브러리를 설치한다. npm i react-native-image-picker 🍪 android 권한 설정 android/app/src/main/AndroidManifest.xml 에 추가한다. 🍩 ios 권한 설정 ios/App_이름/info.plist 에 추가한다. NSPhotoLibraryUsageDescription This app requires access to the photo library. NSMicrophoneUsageDescription This app does not require access to the microphone. NSCameraUsageDescription This app requires access to the camera. 또한, 라이브러리 설치 후 pod ins..

React Native Routing 설정 (react-navigation 사용하기)

리액트 네이티브에서 라우팅을 하기 위해서 다음과 같은 라이브러리를 사용할 수 있다. @react-navigation/native @react-navigation/drawer @react-navigation/stack @react-navigation/bottom-tabs @react-navigation/material-top-tabs @react-navigation/native는 필수로 사용되고, 나머지 네비게이션들은 필요에 따라 설치하여 사용한다. import { NavigationContainer } from '@react-navigation/native'; 네비게이션을 사용하기 위해서 최상단에 선언되야 하며, NavigationContainer 컴포넌트로 감싸진 자식 컴포넌트에서 네비게이션이 동작할 ..

React native에서 무한스크롤 구현하기 (FlatList 사용)

FlatList는 ScrollView처럼 많은 양의 데이터를 처리할 수 있게 해준다. react에서 map을 쓰는 것 처럼 FlatList를 사용할 수 있고, 추가적으로 다양한 기능을 제공받을 수 있다. FlatList에서 필수적으로 필요한 props는 renderItem와 data다. 또한 map의 key를 설정해주는 것처럼 FlatList에서는 keyExtractor로 key를 설정해준다. onEndReached를 통해서 리스트에 끝에 도달했을 때 실행될 함수를 설정할 수 있고, 이를 통해서 무한스크롤을 구현할 수 있다. 스크롤 뷰가 리스트의 맨 끝에 도착하면 새로 다음 페이지의 데이터를 불러오는 함수를 실행시켜 무한스크롤을 구현한다. onEndReachedThreshold를 통해 마지막 컨텐츠의 어..