본문 바로가기
React Native

React Native 우분투 설치법

by swthewhite 2022. 7. 21.

React Native는 JS(자바스크립트)와 React 라이브러리를 사용해 네이티브 앱을 개발할 수 있게 하는 기술입니다.

동시에 여러 OS에 사용할 앱을 개발할 수 있다는 점(크로스플랫폼 개발)에서 많은 인기를 얻고 있죠.

 

그런 React Native를 설치하는데... 환경변수 설정하느라 많은 시간을 까먹어 버렸습니다ㅠㅠ

책만 따라가면 문제가 없을거다! 생각했던 저는 천진난만했던거더군요.

 

다른 분들은 저와 다르게, 빠르게 개발 환경을 구축하길 기원하며 글을 써내려갑니다.

 

참고로 Ubuntu 20.04 LTS 입니다.


1. Node.js 그리고 npm 설치

 

터미널에

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

를 치고 터미널 종료 후 다시 시작해주세요.

 

터미널에

nvm install --lts

를 치면 Node.js LTS 버전이 설치됩니다.

npm설치는 덤이고요.

 

*혹시라도 설치 확인을 하고 싶다면!

터미널에

node -v

하면 Node.js의 버젼이!

 

터미널에

npm -v

하면 npm의 버젼이!

 

2. yarn 설치

 

책에서는 npm보다 yarn사용을 권장하더라고요.

그래서 설치해보았습니다.

 

터미널에

npm install --global yarn

하면 설치 완료.

 

3. Java Development Kit 설치 및 세팅

 

어... 여기가 좀 많이 문제가 된 부분이였어요.

제가 개발하기로한 환경은  API 32 = Android12(S) 였기에, JDK 11이상을 필요로 한다는 에러가 계속 나왔어요...

Android Gradle plugin requires Java 11 to run. You are currently using Java 1.8.

 

제가 해결한 방법은 바로!

그냥 제일 최신 자바 설치하기ㅋㅋ...

 

https://www.oracle.com/java/technologies/downloads/

에서 JDK18을 설치해버렸습니다ㅋㅋㅋㅋ

 

JDK18 설치는 어렵지 않아요.

저는 우분투 환경이였기에 "x64 Debian Package"로 다운받아 실행시켜 설치했답니다.
( Debian Package가 젤 편하고 쉬워요ㅎㅎ )

 

 

3.1 JAVA_HOME 환경 변수 설정

 

그리고 JAVA_HOME 환경 변수를 설정해줍니다.

책에는 설명이 안되어있더라고요ㅠㅠㅠㅠ

 

일단 JDK가 어디에 있는지 알아야 해요.

/usr/lib/jvm/jdk-18

저는 요 위치에 존재했거든요.

 

해당 경로를 JAVA_HOME으로 설정해볼게요.

 

터미널에

gedit ~/.bashrc

을 치면 편집기가 나오는데

export JAVA_HOME=/usr/lib/jvm/jdk-18
export PATH="$PATH:$JAVA_HOME/bin"

을 적어주시고 저장해주세요.

 

파일 수정을 적용하기 위해

터미널에

source ~/.bashrc

를 실행.

 

이후 제대로 적용되었는지를 확인하기 위해

터미널에

echo $JAVA_HOME

을 해서 /usr/lib/jvm/jdk-18가 나온다면 성공적입니다!!!

 

 

3.2 OpenJDK

 

그래도 사실 제가 해결을 못한 것일 수도 있으니, OpenJDK설치도 같이 해주세요!

 

터미널에

sudo apt-get install openjdk-8-jdk

치시면 됩니다.

 

3.99 Brew 설치

 

다음 단계인 Watchman으로 넘어가기 전에, 패키지관리자(설치도우미!)를 먼저 설치하고 갈게요.

https://brew.sh/

 

Homebrew

The Missing Package Manager for macOS (or Linux).

brew.sh

에서 첫번째 코드를 복사해 터미널에 실행 시킵니다.

 

그리고 설치가 되면서, 뭐해달라 저거해달라 그러는데 그것도 터미널에 복사해서 실행해주세요!

( 좀 마니 피곤한 놈이더라고요 )

 

4. Watchman 설치

 

Watchman은 페이스북이 만든 파일 모니터링 도구로, 파일을 모니터링하면서 변화가 발생했을 때 특정 작업을 처리하는 용도로 사용하는 프로그램이라고 합니다.

모니터링을 위해 설치를 하는걸로 할게요.

 

터미널에

brew install watchman

하면 또 완료.

 

5. 안드로이드 스튜디오 설치 및 세팅

 

드디어 대망의 안드로이드 스튜디오입니다.

Ubuntu Software에 들어가셔서 android studio 검색하셔서 설치하시면 됩니다.

 

초기 세팅이 이제 나오죠.

SDK 설치를 진행해야 합니다.

현재 React Native에 권장되는 SDK는 바로 API 32이니, 그걸로 설치를 해봅시다.

( 설치가 덜 되었다면 Configure > SDK Manager로 가서 API 32에 해당되는 것들을 다운받아요 )

 

5.5 환경 변수 설정

 

$HOME/.bashrc 파일을 수정해 경로 설정을 하는거예요.

 

터미널에

gedit ~/.bashrc

을 치면 편집기가 나오는데

export ANDROID_SDK_ROOT=$HOME/Library/Android/Sdk
export PATH=$PATH:$ANDROID_SDK_ROOT/emulator
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools

을 적어주시고 저장해주세요.

 

파일 수정을 적용하기 위해

터미널에

source ~/.bashrc

를 실행.

 

이후 제대로 적용되었는지를 확인하기 위해

터미널에

echo $ANDROID_SDK_ROOT

을 해서 /home/bsw/Library/Android/Sdk가 나온다면 성공적입니다!!!

 

5.9 ADB 설치

 

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

진짜 요거 때문에..... 얼마나 화났는지ㅠㅠ

Error명은 "spawnSync adb ENOENT"입니다.

 

해결법은요?

 

그냥

sudo apt install adb

하면 되는거였어요...

 

필요 프로그램 설치를 습관화합시다.

( 책에서 안 나와 있었는데! )


그럼 준비는 다 되었네요!

이제 새로운 리액트 네이티브 프로젝트를 만들어 실행해볼까요!!!

그건 다음 포스팅에 이어집니다ㅎㅎ

 

 

이만 총총

댓글