Per ardua ad astra.

SafeAreaView들어가며리액트 네이티브(React Native)의 SafeAreaView 컴포넌트에 대해 간단하게 정리해 본다. SafeAreaView개념React Native에서 화면 상단의 상태바나 노치와 같은 UI 요소로부터 콘텐츠가 겹치지 않도록 자동으로 안전한 영역을 설정해 주는 컴포넌트SafeAreaView 컴포넌트를 사용하면 다양한 기기에서 콘텐츠가 적절하게 배치되고, 화면 가장자리나 상단의 중요한 UI 요소에 가려지지 않게 된다. 주요 기능노치, 상태 바, 하단의 홈 바 등과 같은 화면 요소가 있는 디바이스에서 콘텐츠가 겹치지 않도록 자동으로 여백을 추가해 준다.다양한 화면 크기와 해상도에 따라 안전 영역을 자동으로 인식하고, 이에 맞게 여백을 적용해 준다. 사용 방법React N..

Alert API들어가며리액트 네이티브(React Native)에서 기본적으로 제공하는 Alert API에 대해 정리해본다. Alert API개념사용자가 알림을 띄울 수 있도록 도와주는 API기본적으로 네이티브(iOS와 Android) 알림 다이얼로그를 표시하는 데 사용된다.사용자가 알림을 확인하거나 취소할 수 있도록 버튼을 구성할 수 있으며, 다양한 설정 방법을 지원한다. 사용법기본 사용법Alert는 React Native에서 내장된 객체로, alert() 메서드를 통해 알림을 띄울 수 있다.import { Alert } from 'react-native';Alert.alert('알림 제목', '알림 메시지'); 버튼 추가하기Alert는 기본적으로 [확인] 버튼만 제공하지만, 여러 버튼을..

npm install vs. expo install들어가며리액트 네이티브(React Native) Expo 프로젝트에서 패키지를 설치하는 방법으로 npm install과 expo install 2가지 방법이 있다.이 2가지 방법의 차이점을 간단하게 정리해본다. 패키지 설치 명령어1️⃣ npm install$ npm install 패키지명Node.js 패키지 관리 명령어npm(Node Package Manager)을 사용하여, 프로젝트의 package.json 파일에 정의된 패키지들을 설치한다.Expo 프로젝트에서 npm install을 사용하면, Expo와 관련된 버전 호환성 문제를 직접 해결해야 할 수 있다.Expo가 요구하는 특정 버전의 패키지와 호환되지 않을 수 있으므로 호환성 문제를 일..

환경 변수 파일 사용하기 (react-native-dotenv)들어가며리액트 네이티브(React Native)에서 환경 변수 파일(env)을 사용하는 방법을 정리해본다.react-native-dotenv 라이브러리를 이용하여 환경 변수를 사용하는 방법이다. 방법1️⃣ react-native-dotenv 패키지 설치하기터미널에 아래 명령을 실행하여 프로젝트에 react-native-dotenv 패키지를 설치한다.$ npm install react-native-dotenv # yarn add react-native-dotenv 2️⃣ .env 파일 생성하기프로젝트 최상단 경로에 .env 파일을 생성하고 환경 변수를 설정한다.API_URL=https://api.example.comAPP..