지금까지 웹으로만 프로젝트를 했는데 앱으로 프로젝트를 한번 해보고 싶기도 하고 욕심이 있어서 강의 또는 인터넷을 보면서 시작해보았습니다.
React Native
리액트 네이티브를 개발하기 위해서는 두 가지의 방법이 사용할 수 있습니다.
- Expo
- React-Native-Cli
처음 시작할 때는 Expo를 사용하다가 익숙해지면 React-Native-Cli를 사용하라고 다들 말하지만 Expo를 사용하면 제공되는 라이브러리가 한정적이고 용량이 크다는 단점이 있습니다.
또한 저 같은 경우는 이미 안드로이드 스튜디오가 설치가 되어있어 React-Native-Cli로 바로 넘어갔습니다.
간단히 장단점을 보면 다음과 같이 정리할 수 있습니다.
| React-Native-Cli | Expo | |
|---|---|---|
| 장점 | 🛠️ Native 모듈 사용 자유도가 높습니다. 🛠️ 모듈 직접 제작 가능합니다. 🛠️ 원하는 언어로 추가 작성이 가능합니다. 🛠️ 빌드 제어 가능합니다. | 🛠️ 앱을 쉽게 만들고 빌드 가능합니다. 🛠️ Android Studio 또는 XCode 설치가 필요 없습니다. 🛠️ 다양한 API 지원을 합니다. 🛠️ 파일이 자동으로 관리합니다. |
| 단점 | 🛠️ 프로젝트 환경 구축 및 개발 시간이 필요합니다. 🛠️ 각각의 라이브러리 설치가 필요없습니다. 🛠️ Android Studio 또는 XCode 설치가 필요합니다. | 🛠️ 제공되는 API만 사용이 가능합니다. 🛠️ 빌드 시간이 소유됩니다. 🛠️ 제공해주는 기능과 모듈만 사용가능합니다. |
설치
안드로이드 기준으로 설치를 해봅시다. (IOS는 맥이 없습니다..)
- Node 설치
- React Native Cli 설치
- JDK 설치
- Android Studio 설치
Node 설치
React를 사용하기 위해 Node를 설치해줘야 합니다.
먼저 Node 설치 해줍니다.
버전 같은 경우는 상황에 맞게 골라서 설치해 줍시다.
Node 버전 확인
CDM에서 버전을 확인해줍니다.
node -v 
React-Native-Cli 설치
React-Native-Cli환경으로 개발하기 위해 설치해줘야 합니다.
CDM에서 명령어로 React-Native-Cli를 설치해 줍니다.
npm install -g react-native-cliReact-Native-Cli 버전 확인
react-native -v
JDK 설치
안드로이드 스튜디오는 Java를 사용해야 하기 때문에 JDK를 설치해줍니다.
상황에 맞게 운영체제의 JDK를 설치해줍니다.
- 저 같은 경우에는 처음에는 최신 버전을 설치했지만 호환이 안되서 11로 갔다가 17버전에서도 가능하다길래 17 버전을 설치했습니다.
환경변수 설정
여기서 설치만 해주고 끝이 아니라 환경 설정까지 해주셔야 끝입니다.
내 PC -> 우클릭 속성 -> 고급 시스텀 설정 -> 환경 변수 으로 들어와줍니다.
사용자 변수를 설정해줍니다.
만약 자바가 설치 되어 있고 새로 설치했다면 변수 값만 변경 해줍니다. 없으면 새로 만들기로 하나 만들어줍니다.
변수 이름 : JAVA_HOME
변수 값 : JDK 설치 위치
- 저 같은 경우는
C/Program Files/Java폴더에 JDK가 설치 되었습니다.
JDK 버전 확인
위에서 환경변수 설정을 잘해주셨다면 java 버전을 확인할 수 있습니다.
java -version
Android Studio 설치
이제 안드로이드 예뮬레이터를 사용하기 위해 Abdroid Studio를 설치해줘야 합니다.
설치가 끝나셨다면 Android SKD에서 설치를 하나 더 해주셔야 합니다.
일단 환경변수를 해줘야 하는데 Android Studio에서 설치하나만 해줍니다.
More Actions를 눌러주면 해당 버튼들이 보이는데 SDK Manager로 들어가줍니다.
그럼 SDK들을 볼 수 있는데 여기서 SDK Tools로 들어가주고 다음에 보이는 것들을 설치해줍니다.
- Android SDK Build-Tools 35 -rc2
- Android SDK Command-line Tools (latest)
- Android Emulator
- Android SDK Plaform-Tools
환경변수 설정
Android Studio도 환경변수 설정을 해줘야 합니다.
JDK에서 환경변수 설정했던것 처럼 환경 한경 변수에 들어가줍니다.
그리고 시스템 변수에서 설정을 해줍니다.
변수 이름 : ANDROID_HOME
변수 값 : SDK 설치 위치
- ANDROID SDK는 Andorid Studio에서 설치해준 것입니다.
그리고 사용자에 대한 사용자 변수 Path에서 새로 만들어줍니다.
- C:\Users\사용자\AppData\Local\Android\Sdk\tools
- C:\Users\사용자\AppData\Local\Android\Sdk\platform-tools
- C:\Users\사용자\AppData\Local\Android\Sdk\emulator
- C:\Users\사용자\AppData\Local\Android\Sdk\build-tools
Android Studio 버전 확인
위에서 설정을 잘 해주셨다면 버전을 확인할 수 있습니다.
adb --version
신규 프로젝트 생성
이제 설치는 끝났고 프로젝트를 생성해서 잘되는지 확인해줍니다.
npx react-native@latest init 프로젝트명그리고 서버를 먼저 실행 해주고 예뮬레이터를 실행 해줘야 합니다.
- 패키지에 맞게 명령어를 입력해줍니다. (npm, yarn 등)
- 서버를 시작해줍니다.
npm run start-
그리고 나서 해당 OS에 맞게 명령어를 입력해줍니다.
-
예물레이터를 켜줍니다.
Virtual Device Manager를 눌러준후 예물레이터를 하나 만들어줍니다.
- 이제 예뮬레이터를 실행 해줍니다. (예뮬레이터가 켜져있어야 작동)
npm run android오류
제 상황은 처음에 프로젝트 폴더 위치를 바탕화면에 테스트를 해봤는데 오류가 났습니다.
- C:\Users\xksxk\OneDrive\바탕 화면\폴더 이름\프로젝트 이름
이 오류가 뭔지 검색도 해보고 다시 설치도 해보고 했는데 해결하지 못했습니다.
그런데 Android Studio에서 Java로 모바일 프로젝트를 할때에도 폴더 위치가 다르면 제대로 실행이 잘되지 않았습니다.
- C:_Android\프로젝트 이름
그래서 C드라이브에서 프로젝트를 생성했을 때는 괜찮았던 기억이 생각나서 C드라이브에 폴더를 생성하고 그 폴더에 프로젝트를 생성하니깐 오류 없이 잘 됬습니다.
아무래도 폴더 경로에 한글이 포함되서 오류가 생긴거 같습니다.
참고
