React Native 프로젝트 생성부터 스마트폰 실행까지 완벽 가이드🚀

안녕하세요, 이번 포스팅에서는 React Native를 활용해 앱을 개발하는 방법을 소개합니다. React Native는 크로스 플랫폼 개발이 가능해 iOS와 Android 앱을 동시에 개발할 수 있는 효율적인 프레임워크입니다. 특히 Expo를 사용하면 더욱 간단하게 프로젝트를 시작할 수 있습니다.

이 글에서는 React Native 프로젝트를 생성하고, 웹과 스마트폰에서 실행하는 방법을 자세히 알아보겠습니다.

1) 프로젝트 생성

1-1. node.js 설치

먼저 node.js 설치가 필요합니다.

다음 포스팅을 참고하여 node.js를 설치해주세요.

node.js 설치 방법

Node.js 18.15 버전 기준으로 진행하겠습니다.

설치할 디렉토리를 만든 후 해당 디렉토리에서 다음 명령어로 Expo를 설치합니다.

1-2. Expo 설치

Expo는 React Native 프로젝트를 쉽게 시작하고 관리할 수 있도록 돕는 도구입니다. 글로벌로 Expo CLI를 설치하려면 다음 명령어를 실행하세요:

> npm install -g expo-cli

1-3. 프로젝트생성

> expo init 프로젝트명

blank 또는 blank ( Typescript ) 권장드립니다. 저는 blank로 진행하겠습니다.

설치가 완료되면 해당 디렉토리로 이동합니다.

2) 실행

실행 > npm start

QR코드 및 실행옵션들이 나오는데, w를 입력하여 웹으로 먼저 실행해봅니다.

웹 실행

스마트폰 실행

정상적으로 실행이 됐네요. 그럼 스마트폰으로 실행해보겠습니다.

react-native 프로젝트를 스마트폰으로 실행하기 위해서는 두가지 방법이 있습니다.

1) expo앱을 설치 후 위 QR코드를 통하여 실행 ( 이 방법은 같은 wifi 이용 시 실행 가능)

2) 네이티브 방식으로 빌드

안드로이드 스튜디오 설치 및 SDK 설정이 되어 있어야 합니다. (아래 링크 참조)

안드로이드 설치 및 SDK설치

2-1. Expo EAS CLI 설치

npm install -g eas-cli
  

2-2. Expo 빌드 설정

빌드를 시작하려면 Expo 계정에 로그인해야 합니다.

eas login
  eas build:configure
  

로그인 및 빌드(중간에 플랫폼 선택나오면 안드로이드)가 끝나면 apk파일 생성

※ 빌드되는데 시간이 꽤 소요됩니다.

> eas build --platform android --profile preview

터미널에 나오는 링크를 클릭하면 apk파일 다운로드가 가능하며, 스마트폰으로 설치 및 실행하면 됩니다!

개발서버에 소스update

> eas update --branch preview --message "Updating the app"

android만 적용

> eas update --branch preview --message "Updating the app" --platform android

필요에 따라 추가하거나 수정해야 할 부분이 있으면 말씀해주세요!

읽어주셔서 감사합니다. 😊