React Native 환경 설정하기
지난 React Native 시작하기 글에 이어서 오늘은 react-native 환경 설정 하는법을 알아 보겠습니다. React Native 환경 설정은 공식 문서를 보고 해도 되지만 공식 문서의 설명은 살짝 부족하였고 환경 설정을 할 때 자잘한 오류들을 해결한 과정을 설명하려 합니다.
이 글은 2024-04-27 에 업데이트 되었습니다.
React Native를 시작할 수 있는 방법
React Native 공식문서에서는 React Native를 시작할 수 있는 방법으로 Expo CLI와 React Native CLI 를 사용할 수 있다고 쓰여져 있었습니다.
Expo CLI
Expo는 Android, iOS 및 웹에서 기본적으로 실행되는 앱을 위한 오픈 소스 프레임워크로 Expo는 모바일과 웹의 장점을 결합하고 실시간 업데이트, 앱 즉시 공유, 웹 지원 등 앱 구축 및 확장을 위한 많은 중요한 기능을 지원합니다.
장점
간편한 설정: 복잡한 환경 구성이 필요 없으며,
Expo앱을 통해 직접 모바일 장치에서 테스트할 수 있습니다.자동 업데이트:
JavaScript및asset업데이트를OTA(Over-The-Air)업데이트로 배포할 수 있습니다.내장된
API와 컴포넌트: 카메라, 위치 정보, 알림과 같은 기능을 쉽게 사용할 수 있는 내장API가 많습니다.
단점
네이티브 코드 접근 제한:
Expo는 커스텀 네이티브 모듈을 추가할 수 없으므로,Expo가 제공하지 않는 기능을 사용하고 싶다면 이점이 제한적일 수 있습니다.크기:
Expo앱은 추가적인 라이브러리를 포함하므로 앱의 크기가 커질 수 있습니다.
React Native CLI
React Native CLI 는 더 많은 커스터마이징과 제어를 원하는 개발자에게 적합합니다. 이 도구를 사용하여 생성된 앱은 네이티브 코드를 직접 수정할 수 있으며, 필요한 경우 자신만의 네이티브 모듈을 추가할 수 있습니다.
장점
- 완전한 제어: 앱의 모든 측면을 제어할 수 있으며, 네이티브 코드에 직접 접근하여 수정할 수 있습니다.
- 유연성: 필요에 따라 네이티브 모듈과 타사 라이브러리를 추가하여 사용할 수 있습니다.
단점
- 복잡한 설정: 모든 네이티브 의존성을 직접 관리해야 하며,
Xcode또는Android Studio를 사용하여 추가 환경 설정을 해야 합니다. - 유지 보수의 어려움: 네이티브 코드를 포함하기 때문에, 앱의 유지 보수가 더 복잡할 수 있습니다.
- 복잡한 설정: 모든 네이티브 의존성을 직접 관리해야 하며,
사실 Expo로 환경설정 하는 법은 이 글을 쓸 필요도 없이 매우 짧기 때문에 당연히 React Native CLI로 환경 설정 하는 법을 작성할 예정입니다.
시작하기 전에
react-native를 설치하고 설정하기 전에 몇 가지 필수 조건을 확인해야 합니다. 이 글에서는macOS가 아닌 Window 11 환경을 기준으로 설명하겠습니다.
시작 하기
Node.js 설치하기
React Native 개발을 시작하기 위해서는 Node.js와 npm(Node.js의 패키지 매니저)이 필요합니다. Node.js 공식 웹사이트에서 최신(안정화) 버전의 Node.js를 다운로드하고 설치합니다.
설치가 완료되면, 터미널에서 다음 명령어를 통해 설치된 Node.js와 npm의 버전을 확인할 수 있습니다:
1
2
node -v
npm -v
JDK 설치
자바 프로그래밍 언어로 소프트웨어를 개발할 때 필요한 소프트웨어 개발 환경을 말합니다. JDK는 자바 애플리케이션을 개발, 컴파일, 실행하기 위한 필수 도구와 라이브러리를 포함하고 있습니다.
반드시 17버전 이상을 설치해 주세요 저는 11버전으로 설치 하였으나 오류가 발생하였습니다!
저는 JDK22 버전의 x64 MSI Installer 를 설치하였고 설치를 완료하면 이제 환경변수 설정을 해줘야 합니다.
환경변수 설정하기
Window 11기준으로 작업 표시줄에 시스템 환경 변수 편집을 검색하고 환경 변수를 클릭합니다.
- 이제 새로 만들기를 추가하여 변수이름에는 JAVA_HOME 값에는
JDK의 설치 위치 C:\Program Files\Java\jdk-22 를 입력하고 확인 버튼을 누르면 됩니다.
- 마지막으로 시스템 변수의
Path를 선택하고 편집을 클릭하고 새로 만들기를 클릭 후 설정했던 환경변수인 %JAVA_HOME%\bin를 적고 확인 버튼을 눌러 줍니다.
버전 확인하기
모든 설정을 마치셨다면 다음의 명령어를 통해 설치가 정상적으로 완료 되었는지 확인하실 수 있습니다.
1
java --version
Android Studio 설치
React Native CLI를 통해 생성된 프로젝트를 Android Studio에서 제공하는 Android 에뮬레이터로 테스트하기 위해 Android Studio를 설치합니다.
SDK Setting
Android Studio설치를 완료하셨으면 이제 Settings에서 SDK Mannager 버튼을 클릭합니다.
- 그리고 아래의 스크린 샷 처럼 SDK Tools의 체크박스를 체크하고 Apply버튼을 눌러 줍니다. 그리고 아래의 스크린 샷에 표시되어있는 SDK경로를 복사 해 줍니다.
환경 변수 설정하기
마지막으로 이전의 JDK와 마찬가지로 환경변수를 설정해 줍니다.
Window 11기준으로 작업 표시줄에 시스템 환경 변수 편집을 검색하고 환경 변수를 클릭합니다.
- 이제 아까 복사해뒀던
SDK경로를 사용자 환경 변수와 시스템 변수에 ANDROID_HOME이라는 이름으로 설정 후 변수 값에 복사한 값을 넣어 줍니다.
- 마지막으로 시스템 환경 변수의
Path를 누르고 편집을 누른 후 새로 만들기로 %LOCALAPPDATA%\Android\Sdk\platform-tools 경로를 새로 추가해 주면 됩니다.
나의 첫 React Native App
이제 모든 환경 설정이 끝났으면 첫 React Native 프로젝트를 만들어 보겠습니다. 자신이 프로젝트를 시작할 위치에 다음과 같은 명령어를 실행합니다.
1
npx react-native@latest init 프로젝트 명
이전에 글로벌
react-native-cli패키지를 설치한 경우 예상치 못한 문제가 발생할 수 있으므로 다음의 명령어로 제거해 주세요! 예상치 못한 오류가 발생할 수 있습니다.
npm uninstall -g react-native-cli @react-native-community/cli
- 설치가 완료되면 터미널에서 아래의 명령어로 프로젝트를 실행합니다.
1
2
cd 내가만든 프로젝트 이름
npm start
- 그러면 아래와 같은
Metro가 터미널에서 실행되면a를 누르시면 됩니다.
- 다음으로
Metro가 실행되면 다시Anroid Studio로 돌아가Virtual Device Manager버튼을 누르고 재생 버튼을 클릭합니다.
- 모든 설정을 마치면 아래와 같이 가상 디바이스에 Welcome to React Native 문구가 표시되면서 첫
App이 만들어졌습니다!
결론
React Native CLI로 환경설정을 하면서 공식문서의 부족한 부분을 채워보려는 느낌으로 글을 썼는데 처음 보시는 분들이 제 설명을 잘 이해하고 잘 적용하셨으면 좋겠습니다. 2024년 4월 27일 기준 공식 문서는 언제든지 바뀔 수 있기 때문에 항상 공식문서와 함께 환경을 세팅하시길 바랍니다. 😊
다음 글 부터는 React Native의 기본적인 기술들에 대해서 글을 써 보겠습니다.
참고 사이트
https://reactnative.dev/docs/environment-setup?guide=native https://dev.to/harshitaditya1/setting-up-react-native-environment-on-windows-n09