VS CodeSpace에서 react-native를 이용한 앱 개발 환경설정

우선 앱개발환경을 굳이 Android Studio를 쓰지 않고 VS CodeSpace에서 react-native를 통해 설정하는가에 대해서 설명하자면 현재 군복무중이라서 사지방 컴퓨터로 개발을 할 수 밖에 없는 환경이다. 하지만 사이버지식정보방에서 개발을 하게 되면 항상 개발환경을 새롭게 맞춰주어야 하기 때문에 Microsoft의 Azure를 통해 VS Code를 사용할 수 있는 VS CodeSpace에서 앱개발을 하게 되었다.

 

처음 vs codespace에서 codespace를 생성함.

처음에 Microsoft 계정을 통해 로그인을 하면 codespace를 생성해야 한다. 

Plan Name의 경우에는 프로젝트명을, 그리고 Resource Group에는 팀명을 기입하여 Codespace를 생성하였다.

그 후 프로젝트를 생성한 후 textaedit을 할 수 있는 창이 뜬다.

 

VS Codespace 첫 실행화면

VS Codespace를 실행했으면 이제 react-native를 이용한 개발환경설정을 해보려고 한다. 가장 먼저 터미널을 실행시킨다.

1. New Terminal을 실행시키는 모습

그 후 터미널에 다음과 같은 명령어를 통해 React Native Project를 생성한다.

• npm install -g react-native-cli
• cd ..
• react-native init workspace

2. 터미널을 통해서 react-native project 개발환경을 설정한다.

이 작업이 끝나면 우리는 react-native로 안드로이드 앱 개발을 하기 위해서,  Android SDK(Software Development Kit)를 설치하는 과정이 필요하다. 다시 터미널로 돌아가 다음의 명령어를 입력해서 sdk를 설치하자.

 

• cd ~
• wget https://dl.google.com/android/repository/commandlinetools-linux-6609375_latest.zip
• unzip commandlinetools-linux-6609375_latest.zip
• rm commandlinetools-linux-6609375_latest.zip
• mkdir android-sdk
• mv tools android-sdk/tools

Android SDK를 압축파일로 받은 후 android-sdk에 저장하였다.

현재 경로에 어떤 파일이 있는지 ls를 통해 확인을 하면 mkdir android-sdk로 생성한 폴더에 tools로 설치된 파일이 저장되었다는 것을 확인할 수 있었다. 그 후 우리는 이 SDK를 활용하기 위해서 다음과 같은 명령어를 이용해 실행경로(.bachrc에 추가) 를 설정해주게 된다.

• export ANDROID_HOME=$HOME/android-sdk
• export PATH=$PATH:$ANDROID_HOME/tools/bin
• export PATH=$PATH:$ANDROID_HOME/platform-tools

PATH 를 설정하고 나면 source .bashrc를 터미널에 입력하여 Path를 .bachrc에 추가시키는 작업을 한다.

Path를 설정한 후 .bachrc에 추가하여 앞으로의 작업할 때의 환경변수를 설정해준다.

이 작업이 끝나면 이제 생성된  React Native Project에서 project_root(프로젝트 이름임)/android/build.gradle파일을 이용하여 android의 버전을 확인할 수 있다.

나의 경우는 SDK Version 29로 설정되어있다.

이제 그러면 아까 설정한 path를 통해서 sdk를 설치해줄 것이다.

• 확인 후 아래 명령어를 통해 자신에게 맞는 버전의 sdk를 (예제의 경우는 Android 29버전) 설치
• sdkmanager --sdk_root=${ANDROID_HOME} "platform-tools" "platforms;android-29"

마지막에 설치할 것인지에 대해 y를 입력함으로서 Sdk29 version을 설치할 수 있었다.

 

그 후 이제 원래는 에뮬레이팅을 통해서 돌려볼 수 있겠지만 개발환경이 사이버지식정보방이라는 걸 간과하고 있었는지 VM-t가 허용되어있지 않아서 에뮬레이팅이 불가능했다. 이는 Android Studio에서도 마찬가지였기에 어쩔 수 없이 번거롭더라도 bundle file을 통해 어플리케이션을 테스트해야만 했다.

보통은 bundle 파일을 통해 배포가 되지만 빌드되는데에 시간이 오래 걸리는 탓에 보통 간단하게 테스트하는 경우에는 apk 파일을 빌드하여서 많이 사용하곤 한다. 실제로 android studio에서는 apk 파일을 이용해서도 apk 파일을 github에 push한 후 휴대폰에 다운로드받아서 테스트하곤 했지만 react-native를 이용한 프로젝트에서 빌드한 apk 파일은 서버가 연결되어있어야만 했다.

 

 

다음과 같은 작업을 통해 bundle파일을 생성해보자.

 

• mkdir android/app/src/main/assets
• package.json 수정 ( “scripts” 부분에 추가)
• "scripts": { "bundle": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res" }
• npm run bundle

package.json의 scripts 부분을 수정한 후 bundle파일을 생성해내는데 성공하였다.

이제 bundle파일을 github에 업로드를 할 것이다.

 

 

⚫ Initialize Repository - 프로젝트 이름으로 로컬 Git 저장소 생성

⚫ Publish to GitHub - 프로젝트 이름으로 Git 저장소 생성 후, GitHub로 퍼블리싱 (GitHub 계정 필요)

 

알아서 입맛에 맞게끔 고르시면 되고 그 후 사용할 Repository의 이름을 등록하여 사용할 수 있다. 나의 경우는 새롭게  Repository를 생성하여 사용하고자 하였다.

 

다음과 같이 우리가 생성한 react-native project를 담는 repo를 생성할 수 있다.