[React-Native] React Native CLI 프로젝트 생성. (아무것도 없는 상태로 리액트 네이티브 시작하기)

이번에는 아무것도 없는 상태로(bareborn) 프로젝트를 만들어서 실행 할 수 있도록 해 볼 것이다.

원하는 폴더 안에서 아래의 명령어로 프로젝트를 생성한다.

npx @react-native-community/cli@latest init testpin20241226

 

명령어 실행 시 아래와 같이 설치가 친행된다.

현재 기준 cli 버전은 15.1.3. 

react-native 버전은 0.76.5 이다.

 

원하는 버전이 있을 시 아래와 같이 생성한다.

npx @react-native-community/cli@X.XX.X init testpin20241226 --version X.XX.X

 

react-native-community/cli 란 리액트 네이티브 개발에 필요한 다양한 작업들을 간소화 해준 Command Line Interface 이다.

 

주요 역할은 아래와 같다.

# 프로젝트 생성
npx react-native init MyApp

# 빌드 및 실행
npx react-native run-android
npx react-native run-ios

# 디버깅
npx react-native start

# 네이티브 코드 연결
npx react-native link

# 그외 라이브러리 설정 등

 

 

Expo Cli 와 차이점

 

vscode 를 이용하여 생성된 프로젝트 폴더를 열어보면 아래와 같은 구조가 나올 것이다.

 

.eslintrc.js - ESLint의 설정 파일로, 프로젝트에서 사용할 규칙(rule), 플러그인(plugin), 확장(extension) 등을 지정

.gitignore - Git 연동 시 제외할 파일을 설정

.prettierrc.js - Prettier 설정파일

.watchmanvonfig - 어플리케이션 변경 감지 설정

app.json - 어플리케이션 구성, 설정 정보(앱 이름, 아이콘, 패키지 정보, android and  ios 설정)

App.tsx - Entry Point 파일, 구조와 초기 컴포넌트를 정의

babel.config.js - 바벨 설정 파일 (바벨은 최신 자바스크립트와 타입스크립트를 사용 할 수 있게 해줌)

Gemfile - Ruby 기반의 의존성 관리 파일.  iOS 개발에서 CocoaPods 의존성을 관리할 때 사용됨

index.js - Entry Point 파일, 초기화 입 App 컴포넌트를 등록. AppReginstry 를 이용하여 네이티브 런타임에 앱을 연결.

jest.config.js - jest 테스트 환경 설정

metro.config.js - 기본 번들러인 Metro Bundler 설정 파일, 특정 파일 확장자 추가. 경로 재설정 등을 담당

package-lock.json - Node.js 의 의존성 정보를 잠굼으로써 정확한 버전을 보장

package.json - Node.js 의 의존성, 스크립트, 메타 데이터등을 정의

README.md - 프로젝트 설명 문서. 프로젝트 소개, 설치 방법, 사용법, 개발 가이드 등을 기술

tsconfig.json - TypeScript 설정 파일로, 컴파일 옵션과 경로 별칭 등을 정의

 

명령어를 입력하여 시작해보자.

npm start
# or yarn start

 

a 를 입력하여 안드로이드 에뮬레이터를 실행하여 설치 해 보자. 

안드로이드 스튜디오가 설치되어 있어야지 가능하다.

 

 

 

조금(많이)기다리면 설치가 완료되고 다음과 같은 화면이 어플리케이션에 뜰 것이다.

 

 

실제 디바이스에 연결

기기를 컴퓨터에 연결 한 후 아래 명령어를 입력하면 현재 연결된 디바이스가 나온다.

adb devices

 

 

 

adb -s RFCR50HH67Y reverse tcp:8081 tcp:8081

 

만약 unauthorized 이면 아래와 같이 나올 것인데

선을 빼서 연결해둔 휴대폰을 해제

 

adb kill-server

 

이후 휴대폰에서 '개발자 옵션' - 'USB 디버깅 권한 승인 취소'

 

C:\Users\[유저명]\.android 폴더에서 아래 두 파일을 삭제 해 준다.

 

adb devices를 다시 입력하면 아래와 같이 device라고 뜨는 것을 볼 수 있다.

 

다시 명령어를 입력하여 포트 리버스를 지정 해 주자.

adb -s RFCR50HH67Y reverse tcp:8081 tcp:8081

 

이후 yarn android 를 입력하면 휴대폰에 어플리케이션이 깔리는 것을

볼 수 있을 것이다.