이번에 새로운 업무로 React Native를 사용한 App 개발에 들어갑니다.
개발환경 설정에서 많은 어려움을 겪어 다음번에는 좀 더 쉽게 설정하기 위해 기록을 남기려고 합니다.
* 블로그를 작성하는 당시기준으로 버전들을 명시하였습니다. 참고바랍니다.
1. 개발 프로그램 설치
- nvm
- node.js
- npm
- Android Studio
- JAVA
- Visual Studio Code
- React Native CLI
위 프로그램들을 우선적으로 설치해야 합니다. 이때 빨간색으로 표시된 프로그램들을 잘 설치해야합니다.
- Android Studio 설치
developer.android.com/studio 여기 사이트에 들어가서 설치를 하면 되는데, 설치 완료 후
중요한 부분은 Configure 에서 SDK Manager / AVD Manager 설정입니다.
우선 SDK Manager에서 너무 최신 버전말고 그 전 버전(10Q) 정도로 하여 설치를 추천합니다.
이때 Show Package Details를 체크하여,
- Android SDK Platform 29
- Sourcess for Android 29
- Intel x86 Atom_64 System Image
- Google APIs Intel x86 Atom_64 System Image
- Google Play Intel x86 Atom System Image
5개는 설치를 하는 것이 좋습니다.
그 다음 AVD Manager 에서 가상디바이스를 설정하게 됩니다.
보시고 적당한 것을 사용하시면 됩니다. 다만 디바이스를 선택하고 다음 페이지에서 옵션들을 선택하는데 SDK Manager로 설치한 프로그램으로 설정하시면 됩니다.
여기서 끝이 아닙니다. 마지막으로 환경변수 설정을 해주어야 합니다.
injunech.tistory.com/229 이 블로그 글처럼 환경변수를 설정해 주어야 합니다.
환경 변수 설정은
그 다음 Path 설정도 필요합니다. Path를 더블클릭하여 새로만들기를 누르고 아래 사진처럼 4개를 만들어 줍니다.
이렇게 하면 Android Studio 에 대한 설정을 완료하였습니다.
- JAVA 설치
이제는 JAVA를 설치해보도록 하겠습니다.
www.oracle.com/kr/java/technologies/javase-downloads.html Oracle 사이트에서 설치를 진행할 수 있습니다.
저는 11버전으로 설치를 하였습니다. 다만 설치를 끝내고 보니 13버전도 같이 설치가 되어있었는데, 신기하게도 Java 버전을 확인해보니 13버전이 사용중이게 되었습니다. 버전확인은 java -version 명령어를 통해 확인 가능합니다.
잡설이 길었네요. 여튼 여기서 설치를 완료하였다면, JAVA도 마찬가지로 환경변수 설정을 해주어야 합니다.
minstar0410.tistory.com/3 이 블로그글을 참고하여 변수 설정을 진행하시길 바랍니다.
- React Native CLI 설치
마지막으로 React Native CLI 설치에 대해서 알아보겠습니다.
간단합니다.
npm install -g react-native-cli명령어를 통해 설치를 진행하면 됩니다.
설치가 완료되었다면, 이제 React Native CLI 사용하여 프로젝트를 만들어 보도록 하겠습니다.
react-native init 프로젝트명 --version X.XX.X참고로 뒤의 버전은 안 넣어도 프로젝트를 만들 수 있습니다.
프로젝트를 생성했다면 해당폴더를 VScode로 열고 Package를 설치해줍니다.
npm install이때, 중요한 점은 npm을 사용한다면 @react-native-community 가 설치가 안됩니다.
이 Tool은 오직 Yarn으로만 설치가 가능합니다.
github.com/facebook/react-native/tree/master/packages/eslint-config-react-native-community
이 주소를 참고하여 설치를 진행해주시길 바랍니다. 애초에
yarn install이 명령어를 사용한다면 문제가 발생되지 않을 것으로 예상합니다.
자 이제 마지막입니다.
Android Studio 를 사용하여 가상 디바이스를 실행합니다. 이후
react-native run-android이 명령어를 통해 가상디바이스에 React Native를 실행할 수 있습니다.
이때, 혹시나 무슨 에러가 뜰 수도 있는데 그게 gradle 문제일 수도 있습니다.
해결 방법은 neptune297.tistory.com/66 이 블로그를 참고하셔서 아래처럼 바꿔주면 됩니다.
이상으로 React Native 개발 환경 설정에 대한 글을 마치도록 하겠습니다.
저는 위의 과정들을 해결하면서 최종적으로 개발 환경 설정을 마칠 수 있었습니다.
만약 제가 하신것처럼 했는데도 불구하고 안된다면 얼른 구글 검색을 하시길 바라겠습니다.
그럼 모두 열심히 개발하세요~!