[ReactNative] 리액트 네이티브 build하기

 

 

react-native를 설치해준 후 vscode에서 생성한 폴더를 열어주었다.

 

다음으로 인스타 앱을 만드는 데 필요한 이미지와 비디오 파일들을 assets폴더에 넣어주었다.

src폴더 안에 components와 screens 폴더도 생성해준 후 실질적으로 앱을 구성하는 데 사용하는 소스코드를 작성해줄 영역을 만들어줬다.

 

폴더 구조 생성

 

 

다음으로 screens폴더 안에 인스타 앱 스크린을 위한 파일들을 생성해준다.

 

생성한 각 파일안에 기본 구조를 다음과 같이 작성해주고 만약 에러 줄이 뜬다면 .eslintrc 파일에 prettier 조건을 작성해주면 된다.

'prettier/prettier': 0,

 

screens폴더 안 파일 기본 구조 및 에러 해결 코드

 

 

이로써 인스타 앱을 만들기 위한 전체 구조를 생성해줬다.

 

다음으로 react navigation을 이용해서 라우팅을 구현해보겠다.

 

 

먼저, react navigation을 이용하기 위해 필요한 모듈들을 설치해야한다.

 

터미널에서 다음 명령어를 사용해 설치를 진행해주었다.

 npm install @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs @react-navigation/material-top-tabs 

 

 

모두 설치한 후에는 index.js 파일에서 AppRegistry가 있는데 이는 리액트 네이티브 앱을 실행하기 위한 JS 진입점이다.

App루트 컴포넌트는 AppRegistry.registerCComponent에 자신을 등록해야하며, 기본 시스템은 앱의 번들을 로드한 후 runApplication을 호출해 실제로 앱을 실행하게 된다.

 

 

app.js 최상위 컴포넌트에서 라우팅을 위한 소스코드를 작성해주겠다.

그전에 tab과 stack의 차이점에 대해서 먼저 살펴보고 가겠다.

 

1. stack navigator
: 리액트네이티브 앱이 스택을 사용해 화면간 전환할 수 있는 방법 제공
ex. 로그인->가입 화면 이동->가입화면이 로그인 화면 위에 쌓임->뒤로 이동 시 가입 화면이 스택에서 꺼짐 / 버튼->페이지 이동

2. tab navigator
: 화면 하단이나 상단에 tab이 있는 네비게이터, 다른 화면 사이 전환에 사용, 스크린을 컴포넌트로 사용하거나 스택을 컴포넌트로 사용할 수 있다.
ex. 하단바

 

 

이제 하단바 tab을 위한 코드를 작성해보겠다.

app.js에서 Tab.Navigator를 작성해주었다.

 

tab을 만드는 데 필요한 screens 컴포넌트들을 import해준 후 다음과 같이 코드를 작성했다.

 

Tab.Navigatior

 

 

다음으로 Stack.Navigator도 작성했다.

마찬가지로 필요한 컴포넌트들을 import했고, 네비게이션을 만들어주었다.

Stack.Navigator

 

 

728x90

 

 

여기까지 코드를 작성한 후 앱이 정상적으로 실행되는지 build를 해보려고 한다.

 

윈도우 환경에서 안드로이드 앱을 구현하려고 하기 때문에 npm run android 명령어를 통해 build를 시도했다.

 

 

그러나,

오류가 생겼다....

 

 

구글 검색을 통해 여러 방법을 시도해보고 수정해봤으나 계속해서 새로운 에러들이 생겼다...

해결하는 데 너무 힘들어서 눈물이 날뻔도 했다....😂

 

 

집요하게 시도한 끝에 결국 에러를 해결할 수 있었다.

계속해서 에러가 JDK와 관련된 에러가 발생해서 공식 홈페이지에서 버전에 맞는 JDK버전을 찾아보았고, JDK17버전 이상이 필요하다고 해서 먼저 JDK17버전을 새로 다운받았다.

 

 

다음으로 JAVA환경변수도 새로 추가해주었다.

 

C:\Program Files\Eclipse Adoptium\jdk-11.0.22.7-hotspot\bin 로 되어있던 경로를

 

C:\Program Files\Java\jdk-17 => JAVA_HOME이라는 시스템 변수로 변경하여 저장했다.

 

 

 

JDK버전을 변경해준 후 환경 변수 설정까지 새로 만들어준 후 다시 build를 시도했다.

 

 

결과는🔥🔥

.

.

.

.

.

 

드디어 성공했다...!! 너무 기뻤다.....드디어 안드로이드 스튜디오가 실행이 됐다...!!!

 

build successful

 

 

 

 

빌드 오류를 해결하느라 진이 다빠졌다...

빌드까지는 성공했으니 나머지 인스타 앱 구현은 다음 글에서 작성해보도록 하겠다.