Per ardua ad astra.

React Native StatusBar (react-native, expo-status-bar)

StatusBar (react-native, expo-status-bar)들어가며리액트 네이티브(React Native)의 StatusBar와 엑스포(Expo)의 expo-status-bar에  대해 간단히 정리해본다. StatusBar (React Native)개념상단 상태 표시줄(시간, 배터리, 신호 등)의 스타일, 배경색, 표시 여부 등을 제어할 수 있는 React Native 내장 컴포넌트 사용 방법import { StatusBar } from 'react-native';export default function App() { return ( );} 주요 속성속성설명플랫폼barStyle- 텍스트 색상 설정▶ default : 플랫폼별 기본 색상 (iOS ..

에뮬레이터 디바이스 자동 회전 기능 켜는 방법 (Expo)들어가며리액트 네이티브(React Native) 엑스포(Expo) 프로젝트를 에뮬레이터로 실행할 때, 디바이스 자동 회전 기능을 켜는 방법을 간단히 정리해본다. 방법(1) 애플리케이션 설정 파일(app.json) orientation 키 값 변경하기프로젝트 최상단 경로에 있는 애플리케이션 설정 파일(app.json)의 orientation 키의 값을 다음과 같이 default로 설정해준다. /app.json{ "expo": { "name": "section-02", "slug": "section-02", "version": "1.0.0", "orientation": "default", "icon": "./as..

아이콘 사용하기 (＠expo/vector-icons)들어가며리액트 네이티브(React Native) 엑스포(Expo) 프로젝트에서 아이콘(Icon)을 사용하는 방법을 간단하게 정리해본다.리액트 네이티브의 엑스포 프로젝트에서는 별다른 패키지를 설치하지 않고도 아이콘을 바로 사용할 수 있다. 방법1️⃣ 패키지 설치하기 (＠expo/vector-icons)Expo 프로젝트에서는 이미 기본적으로 ＠expo/vector-icons 패키지가 포함되어 있어서 따로 설치할 필요는 없다.하지만, 해당 패키지가 설치되어 있지 않을 경우, 아래 명령을 실행하여 설치해준다.$ expo install expo/vector-icons 2️⃣ 아이콘 세트 불러오기우선, 아이콘 세트(Icon Set)를 불러와서 해당 아이콘 세..

커스텀 폰트 사용하기 (expo-font)들어가며리액트 네이티브(React Native) 엑스포(Expo) 프로젝트에서 커스텀 폰트를 적용하는 방법을 간단하게 정리해본다. 방법 1️⃣ 패키지 설치하기폰트 사용을 위해 expo-font 패키지를 설치한다.$ expo install expo-fontexpo install 명령은 현재 Expo 프로젝트의 버전과 호환되는 패키지를 자동으로 설치해준다.  2️⃣ 폰트 파일 준비하기프로젝트의 /assets/fonts 폴더 안에, 추가할 커스텀 폰트 파일을 넣어준다.해당 폴더가 없을 경우, 새로 생성해준다. 4️⃣ 폰트 불러오기 (useFonts 훅)프로젝트 최상단에 있는 App.js 파일에 다음과 같은 커스텀 폰트를 불러오는 코드를 추가해준다.use..

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가 요구하는 특정 버전의 패키지와 호환되지 않을 수 있으므로 호환성 문제를 일..

카메라 권한 요청 메시지 표시 방법 (Expo)들어가며엑스포(Expo)를 이용하여 생성한 리액트 네이티브(React Native) 프로젝트에서 카메라 권한 요청 메시지를 표시하는 방법을 정리해본다. 방법패키지 설치터미널에서 아래 명령을 실행하여 expo-camera 패키지를 설치해준다.$ npx expo install expo-camera 앱 설정 파일 구성하기  (app.json)프로젝트의 최상단에 있는 앱 설정 파일(app.json)에 아래의 내용을 추가해준다. /app.json{ "expo": { "plugins": [ [ "expo-camera", { "cameraPermission": "Allow $(PRODUCT_NAME) t..

클립보드 기능 구현하기 (expo-clipboard)들어가며엑스포(Expo)를 이용하여 생성한 리액트 네이티브(React Native) 프로젝트에서 클립보드(Clipboard) 기능을 구현하는 방법을 정리해본다. 방법간단하게 expo-clipboard 패키지를 설치하여 클립보드 기능을 구현할 수 있다. expo-clipboard 패키지 설치하기$ npx expo install expo-clipboard 사용하기클립보드에 복사할 때는 Clipboard.setStringAsync() 함수를 사용하고, 클립보드에 있는(복사된) 값을 가져올 때는 fetchCopiedText() 함수를 사용한다.import { useState } from 'react';import { View, Text, Button..

Expo Go 앱에서 Expo 프로젝트 연결 안되는 문제 해결 방법 (There was a problem running the requested app)들어가며Expo Go 앱에서 PC에서 생성한 Expo 프로젝트를 연결할 때, 아래와 같은 오류가 발생할 때 해결하는 방법을 정리해본다. 방법① 동일한 네트워크에 연결되어 있는지 확인하기PC와 Expo Go 앱이 설치된 모바일 장치가 모두 동일한 네트워크(와이파이)에 접속되어 있는지 확인한다. ② 제어판에서 NodeJS 관련 기능 설정하기[제어판] > [시스템 보안] > [Windows Defender 방화벽] > [허용되는 앱]에서 NodeJS JavaScript Runtime 항목의 [개인], [공용]을 모두 체크해준다.