ScrollView는 콘텐츠의 길이가 모바일 기기의 화면 크기를 벗어날 때 사용자가 모든 내용을 볼 수 있도록 스크롤(Scroll)기능을 제공하는 요소입니다.구성요소ScrollView는 두 가지 부분으로 이루어져 있습니다.Container는 스크롤할 내용을 담을 공간입니다. Container의 부모는 반드시 높이가 고정되어 있어야 하며, 전체 화면보다 커질 수 없습니다.Content는 실제로 스크롤될 내용입니다. 이 부분은 전체 화면보다 커질 수 있으며, 화면을 넘어서면 스크롤 되어 내용을 확인할 수 있습니다.이에 따라 ScrollView에 스타일을 적용할 수 있는 곳도 두 가지가 존재합니다. Container의 스타일을 적용하려면 똑같이 style 값을 을 작성하면 되지만, Content의 스타일을 적..

모바일 환경에는 기기에서 우선적으로 사용하는 공간들이 있습니다. 화면 상단의 상태 표시줄(Status bar)이나 노치(Notch), 또는 화면 하단의 조작 UI 등을 예로 들 수 있습니다.앱 디자인 단계에서 해당 영역들의 크기를 고려하여 미리 공간을 확보할 수도 있지만, 기기마다 이런 종류의 공간의 사용 여부나 크기가 제각각이라 모두 고려하기에는 힘든 부분이 있습니다.때문에 ReactNative에서는 이런 공간에서부터 방해 받지 않는 안전한 공간(Safe area)을 확보하여 그 안에서 화면을 구성할 수 있도록 react-native-safe-area-context 패키지를 지원하고 있습니다.npm install react-native-safe-area-context// 혹은 expo 버전npx exp..

모바일 기기는 기종에 따라 화면의 크기나 해상도의 차이가 나는 경우가 많으며, CSS나 DOM 기능을 사용하지 않습니다. 때문에 ReactNative는 일반적인 웹 개발에서 쓰이는 길이 단위와 다른 단위를 사용합니다. 보통 웹에서 길이를 지정할 때는 px과 같은 픽셀 단위나 em & rem과 같은 텍스트 크기를 기준으로 한 단위를 사용합니다. 하지만 ReactNative는 해상도(DPI)에 따라 자동으로 스케일되는 dp(density-independent pixel)를 숫자 단위로 사용합니다. 웹모바일DOMOX스타일CSSNative 단위 px, em, remdp 이 때문에 Native StyleSheet를 tailwind의 형태로 바꿀 일이 있을 때 한 가지 신경써야 하는 부분이 있는데, tailw..

npx create-expo-app@latest 로 생성한 Expo의 기본 프로젝트는 아래와 같은 파일 구조로 이루어져 있습니다.app앱의 기본적인 구조를 정의합니다. _layout.tsx에서는 앱에 어떤 화면(페이지)들이 존재하는지 정의합니다. 이라는 이름의 컴포넌트를 사용하는데, 이는 여러 개의 화면들을 스택으로 쌓아 보여주는 것입니다. 맨 위에 오는 요소가 제일 먼저 보이는 화면이므로, 기본 템플릿에서는 (tabs) 경로의 화면이 맨 처음 보이게 됩니다. (tabs) 화면이 사라지면, modal.tsx에서 정의한 화면이 보일 것입니다. (tabs)(tabs) 하위 경로는 탭 화면을 구현한 파일들을 모아놓은 폴더입니다.이렇게 괄호()로 묶인 이름의 폴더는 URL 경로에 포함되지 않기 때문에, 이..

1. 프로젝트 생성npx를 통해 expo 프로젝트를 생성합니다.npx create-expo-app@latestOk to proceed?에 y로 진행하고What is your app named?에 생성할 프로젝트의 이름을 입력해줍니다.이후에는 필요한 패키지를 설치하게 됩니다.모든 패키지의 설치가 완료되면, 현재 경로에 입력한 이름의 프로젝트 폴더가 생성될 것입니다.2. 프로젝트 실행아래 명령어를 통해 프로젝트를 실행할 수 있습니다.npx expo// 또는npx expo start잠시 기다리면 이렇게 터미널에 QR코드가 나타나게 됩니다.모바일 기기에 Expo Go 앱이 설치되어 있다면, 해당 QR코드를 스캔하여 모바일 기기에서 앱을 실행시켜볼 수 있습니다.기본적으로 생성된 템플릿은 아래와 같이 Home(in..

Expo는 React Native 프레임워크를 좀 더 쉽고 빠르게 사용할 수 있도록 지원해주는 오픈 소스 플랫폼(도구 모음)입니다. Expo를 사용하면 모바일 앱의 빌드와 테스트가 빨라진다는 장점이 있습니다. Expo에서 지원하는 API를 적절히 활용한다면, React Native 코드를 쓰지 않아도 대부분의 모바일 앱 기능을 구현할 수도 있습니다.Expo Go 모바일 기기에 Expo Go 앱을 설치하면 개발하던 앱을 빌드과정 없이 바로 테스트해볼 수 있습니다.Expo SDK 카메라, 파일 시스템, Push 알림, 센서, 애니메이션 등 React Native에서는 직접 네이티브 모듈을 설치해야 하는 기능을 Expo는 단일 API로 제공합니다.Expo CLI 빌드에서 부터 배포과정까지 개발과정을 보조하는 ..