Per ardua ad astra.

React Native 플랫폼 별로 요소에 그림자 효과 넣기 (Android, iOS, Web)

플랫폼 별로 요소에 그림자 효과 넣기 (Android, iOS, Web)들어가며리액트 네이티브(React Native)에서 플랫폼 별(Android, iOS, Web)로 요소에 그림자 효과를 넣는 방법을 간단하게 정리해본다.  방법① AndroidAndroid에서는 elevation 속성을 사용해서 요소에 그림자 효과를 넣어줄 수 있다.style={{ elevation: 5, // 숫자가 클수록 그림자가 진해진다. backgroundColor: 'white', // 배경색 있어야 그림자가 보이므로 넣어준다. borderRadius: 10,}} ② iOSiOS는 elevation 속성이 인식되지 않는다.따라서 다음과 같은 4가지 속성을 사용하여 요소에 그림자 효과를 넣어줄..

React Native 아이콘 사용하기 (＠expo/vector-icons)

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

React Native 커스텀 폰트 사용하기 (expo-font)

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

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

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..

카메라 권한 요청 메시지 표시 방법 (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..

blurOnSubmit 속성과 submitBehavior 속성들어가며리액트 네이티브(React Native)의 TextInput 컴포넌트에서 사용할 수 있는 blurOnSubmit 속성과 submitBehavior 속성에 대해 정리해본다. blurOnSubmit 속성개념우선 blurOnSubmit 속성은 다음과 같이 TextInput 컴포넌트에서 사용할 수 있다. { setIsFocused(false); Keyboard.dismiss(); }}/> blurOnSubmit 속성은 TextInput 창 텍스트를 입력하고, 엔터(Enter) 버튼을 누르면 입력한 텍스트가 제출(Submit)되도록 해주는 속성이다.따라서 텍스트 필드가 블러 처리되게 된다.기본값은..

TailwindCSS IntelliSense 활성화하기 (VS Code)들어가며VS Code에서 리액트 네이티브(React Native)를 이용하여 애플리케이션을 만들 때, TailwindCSS IntelliSense를 활성화 시키는 방법을 정리해본다. 방법(1) Tailwind CSS IntelliSense 확장 설치하기VS Code에서 Tailwind CSS IntelliSense 확장을 설치한다. Tailwind CSS IntelliSense - Visual Studio MarketplaceExtension for Visual Studio Code - Intelligent Tailwind CSS tooling for VS Codemarketplace.visualstudio.com (2) Tailwi..

클릭 시, 리플 효과(Ripple Effect) 주는 방법들어가며리액트 네이티브(React Native)에서 요소 클릭 시, 리플 효과(Ripple Effect)를 줄 수 있는 방법을 정리해본다. 방법우선 특정 요소에 클릭 이벤트를 넣기 위해서는 Pressable 컴포넌트로 해당 요소를 감싸줘야 한다.import { View, Text, Pressable } from 'react-native';function MyComponent(props) { return ( {/* 클릭 효과를 넣을 요소를 감싸준다. */} {props.text} );} Android OSPressable 컴포넌트에 android_ripple 속성을 추가하여 요소 클릭..

FlatList들어가며리액트 네이티브(React Native)의 FlatList 컴포넌트에 대해 정리해본다. FlatList개념효율적으로 대량의 스크롤 가능한 항목을 렌더링하기 위해 사용되는 컴포넌트최적화된 가상 스크롤링 기능을 제공하여 성능 문제를 줄이고, 스크롤 시 필요한 항목만 렌더링한다.ScrollView 컴포넌트와의 차이점 주요 속성속성설명data- 렌더링할 데이터 배열(Array)을 전달- 배열의 각 요소는 렌더링될 항목의 데이터renderItem- 데이터를 어떻게 렌더링할지 정의하는 함수- 매개변수로 { item, index } 형태의 객체를 받는다.keyExtractor- 각 항목의 고유 키를 반환하는 함수- 기본적으로 item.key 또는 item.id를 사용..

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

Expo CLI vs. React Native CLI들어가며리액트 네이티브(React Native) 프로젝트 생성 방법으로 Expo CLI 와 React Native CLI 방법 2가지가 있다.이 두 방법의 차이점을 간단하게 정리해본다. Expo CLI개념리액트 네이티브로 앱을 개발할 때 사용되는 도구프로젝트 생성, 관리, 실행을 간단하게 해주는 명령줄 인터페이스(Command Line Interface)리액트 네이티브 프로젝트를 생성할 때 기본적으로 권장되는 접근 방식 새 프로젝트 생성하기$ npx create-expo-applatest # 새 프로젝트 생성 주요 특징기본 템플릿을 제공하여 초기 설정 없이 바로 앱 개발 시작 가능카메라, 위치 정보, 푸시 알림 등 네이티브 기능을 쉽게 사용할 ..