React Native day1 환경설정

KJK·2022년 9월 6일
0

이 포스트는 공식문서 0.70v를 읽으면서 작성했습니다.
잘 모르겠는 부분은 원문도 첨부했습니다.

Setting up the development environment

모바일 개발 경험이 없다면, Expo Go를 이용하는게 가장 쉽습니다. Expo는 ReactNative로 만들어진 도구 및 서비스이며, 많은 기능이 있지만, 가장 중요한 것은 빠르게 Native 앱을 시작할 수 있는 것입니다. 최신 버전의 NodeJS와 핸드폰만 있으면 실행할 수 있습니다.

모바일 개발에 익숙하다면, React Native CLI를 사용하기 원할것입니다. Xcode 및 Android Studio가 있는 환경이라면 몇 분만에 실행 가능하지만, 설치되어 있지 않는 경우 시간이 걸릴 수 있습니다.

Expo Go Quickstart

npx create-expo-app AwesomeProject

cd AwesomeProject
npm start # you can also use: npx expo start

React Native 실행하기

App을 실행하려면 Expo Go가 ios나 android에 설치되어 있어야 하고, 컴퓨터와 동일한 네트워크에 연결되어 있어야 합니다.
Android는 Expo Go 어플에서 QR코드를 스캔하고, IOS에서는 내장된 IOS용 QR 스캐너로 스캔해야 합니다.

App 수정하기

성공적으로 App이 실행되었다면, App.js 파일을 수행해 봅시다.
App이 자동으로 reload되는것을 확인할 수 있습니다.

Now what?

Expo 공식 홈페이지를 통해 도구 관련 질문을 찾아보거나, Expo Discord를 통해 도움을 요청할 수 있습니다.

Expo에 issue를 물어보기 전에 이미 그 issue에 대한 답변이 있는지 살펴보세요.

React Native에 대해 더 알고 싶다면 The Basics > introduction 페이지를 확인하세요.

Running your app on a simulator or virtual device

Expo Go는 IOS, Android native SDK 없이 핸드폰만 있으면 React Native 앱을 실행할 수 있습니다.
iOS 시뮬레이터 또는 Android 가상 장치에서 앱을 실행하려면 "React Native CLI QuickStart" 지침을 참조하세요.

설정이 완료되면 npm run android를 실행하여 Android 가상 장치에서 앱을 실행하거나 npm run ios(macOS만 해당)를 실행하여 iOS 시뮬레이터에서 앱을 실행할 수 있습니다.

주의사항

Expo Go 앱은 시작하기에 좋은 도구입니다.

개발자가 프로젝트를 신속하게 시작하고 아이디어를 실험하고(ex Snack) 마찰을 최소화하면서 작업을 공유할 수 있도록 돕기 위해 존재합니다.
Expo Go는 Expo SDK의 모든 모듈로 구성된 풍부한 기능의 네이티브 런타임을 포함하여 이를 가능하게 하므로 모듈을 사용하려면 npx expo install로 패키지를 설치하고 앱을 다시 로드하기만 하면 됩니다.

단점은 Expo Go 앱에서 사용자 정의 네이티브 코드를 추가할 수 없다는 것입니다.

Expo SDK에 내장된 기본 모듈만 사용할 수 있습니다. Expo SDK 외부에서 사용할 수 있는 훌륭한 라이브러리가 많이 있으며 고유한 기본 라이브러리를 구축하고 싶을 수도 있습니다.

원문: You can leverage these libraries with development builds, or by using "prebuild" to generate the native projects, or both. Learn more about adding native code to projects created with create-expo-app.
라이브러리를 개발빌드를 사용하거나, "prebuild"를 사용해 native projects를 생성할 수 있습니다. create-expo-app에서 native code 추가하는 방식을 배우세요.

create-expo-app은 Expo SDK에서 지원하는 최신 React Native 버전을 사용하도록 프로젝트를 구성합니다.
React Native 지원하는 Expo SDK Version 확인하기

React Native를 기존 프로젝트에 통합하는 경우 Expo SDK 및 개발 빌드를 사용할 수 있지만 네이티브 개발 환경을 설정해야 합니다. React Native에 대한 기본 빌드 환경을 구성하는 방법에 대한 지침을 보려면 "React Native CLI Quickstart"를 확인하세요.
React Native CLI Quickstart 설명 위치: Environment setup > "React Native CLI Quickstart" 버튼
React Native CLI Quickstart는 우선 Expo부터 익힌 뒤 작성예정

한줄요약

create-expo-app

profile
찍먹하자

0개의 댓글