Study (4) 썸네일형 리스트형 [React-Native] 디바이스 크기에 따른 반응형 UI 구현 방법 (moderateScale, Dimensions, useWindowDimensions) moderateScale 다양한 화면 크기와 해상도에 대응하기 위해 사용되는 함수import { Dimensions } from 'react-native';const { width, height } = Dimensions.get('window');// 작업 환경 Size 설정const guidelineBaseWidth = 375; const guidelineBaseHeight = 667;// 너비 기준 크기 조정 함수const horzScale = (size: number) => (width / guidelineBaseWidth) * size;// 높이 기준 크기 조정 함수const vertScale = (size: number) => (height / guidelineBaseHeight) * size;.. [React-Native] 기본 태그 종류 (View, Text, Image 등) React-Native를 통한 개발은 처음이라 개발에 들어가기 전 조금이라도 친숙해지기 위해 주로 사용되는 기본 태그들에 대해 살펴보았다. React Native의 주요 태그 정리🙄ViewReact-Native에서 UI를 구축하는 가장 기본적인 구성 요소html의 태그와 유사한 역할을 함View 안에 여러 View가 올 수 있음 (중첩 가능)View 내부에 텍스트 컴포넌트가 아닌 텍스트 노드가 위치할 수 없음import { View, Text } from 'react-native';const MyComponent = () => { return ( Hello, React Native! );};/**=======================================*//.. [React-Native] 공부 목적 / 환경 세팅 (mac, node, Xcode, iOS, Android) * React Native를 공부하는 배경Java를 통해 안드로이드 개발은 해봤으나, swift를 통해 iOS까지 개발은 힘들 것 같음 * 리액트 네이티브웹 앱을 만들어서 네이티브 앱처럼 배포하는 ReactNative나, Flutter 존재=> Flutter는 예전에 한번 사용해 봤으나, dart라는 언어를 깊게 배우지 못해 개발에 어려움이 있을것으로 예상=> 현재 더 익숙한 JavaScript(TypeScript)를 사용하는 ReactNative를 통해 개발 예정 * 학습 목표! 웹 기술을 바탕으로 모바일 앱을 만들어보자 * 특징- JS로 작성했지만, 네이티브 코드로 랜더링된다!- Corss-Platform - 공통적으로 쓰고, 일부만 android/ios로 구현- 코드 저장 시 바로 적용됨 (FAS.. 앱 개발 유형별 특징과 차이점 (웹 앱, 네이티브 앱, 하이브리드 앱) 웹 앱 :데스크톱/모바일 디바이스의 인터넷 브라우저에서 엑세스 할 수 있는 애플리케이션URL을 통해 접근 가능장점 : 빠른 업데이트 배포 : 앱 심사 없이, 다양한 기기에서 접근 가능 : 운영체제, 기기와 상관 없이 브라우저만 있으면 실행 가능단점 :오프라인 기능이 제한적 : 인터넷 연결이 필수로, 네트워크가 끊기면 기능이 제한됨네이티브 기능 제한 : 브라우저 제약으로 인해 디바이스의 카메라, GPS 등 기능 제한됨 네이티브 앱 :디바이스에 다운로드하여 설치할 수 있는 앱특정 플랫폼(iOS, Android 등)에 맞게 개발된 애플리케이션으로 플랫폼의 성능과 하드웨어를 최대로 활용 가능장점 : 모든 플랫폼 기능에 접근 가능 : 카메라, GPS 등 디바이스 기능 활용 가능높은 성능 : 플랫폼에 최적화된 코드.. 이전 1 다음