[React Native] 1. 개발 환경 설정

필요한 도구 설치

 

1. Node.js 

• React Native CLI와 패키지 관리를 위해 필요

http://xpay.nexigroup.com/monetaweb/3ds2/gatheringDeviceInfo

 

 

2. 패키지 매니저

• npm 또는 yarn을 사용
• Node.js를 설치하면 npm은 기본적으로 포함된다

 

 

3. React Native CLI

• React Natvie 프로젝트를 생성하는 도구

npm install -g react-native-cli

 

 

4. 안드로이드 스튜디오 & Xcode 설치

• Xcode는 App Store에서 다운가능
• 안드로이드 스튜디오

https://developer.android.com/studio

Android 스튜디오 및 앱 도구 다운로드 - Android 개발자  |  Android Studio  |  Android Developers

 

 

5. Expo CLI 설치

• 필수 사항은 아니지만 React Native를 처음 배우거나 간단한 앱을 만드는 경우, 프로젝트 생성과 코딩과정을 단순화해주고 테스트 및 공유가 간편한 환경을 제공해주기 때문에 추천한다.
• Expo 방식으로 시작한 프로젝트는 나중에 필요시 React Native 워크플로우로 변경할수 있어 유연한 개발이 가능하다.

npm install -g expo-cli

 

설치후 새 프로잭트 생성

npx create-expo-app NewProject

 

*프로젝트 생성 과정에서 프로젝트 템플릿을 선택하라는 메세지가 나오면 blank 템플릿을 선택하면 된다.

 

프로젝트 실행

cd MyNewProject
npm start

 

실행하면 Expo 개발도구가 열리고 QR 코드가 표시된다.

QR 코드를 스캔하면 스마트폰에서 프로젝트를 미리 볼수 있다. (스마트폰에는 Expo Go라는 앱을 따로 설치)

 

 

React Native 주요 폴더와 파일:

• App.js 또는 App.tsx : 앱의 진입점. 여기서 코드를 작성해 시작해 나간다.
• assets/ : 이미지, 폰트 등 리소스 요소들을 저장한다.
• node_modules/ : 설치된 패키지가 저장된 폴더
• package.json : 프로젝트의 의존성과 스크립트가 정의된 파일