React Native CLI 개발환경 구축 (window버전)

앞서 말했듯이 React Native CLI를 사용하기 위해선 초기에 개발환경을 구축해야한다고 하였는데, 이번 글에서는 React Native CLI의 개발환경을 구축하는 방법에 대해서 정리 해보고자 한다.
 
 
 

1. Node.js 설치하기

 
React Native는 Javascript를 기반으로 하기에 Javascript 언어를 브라우저 외부화경에서 사용할 수 있게 런타임 환경을 세팅해주는 Node.js를 설치해줘야 한다. 또한, React Native를 통해 앱 개발 도중 필요한 패키지들이 있을 때 이를 쉽게 다운로드하거나 관리해주는 기능을 제공하는 npm (Node Package Manager)을 다운로드 해줘야하는데 다행히 npm은 node.js안에 내장되어 있기 때문에 node.js만 설치해주면 npm은 자동으로 설치된다.
 
그렇다면 Node.js를 설치하는 방법에 대해 자세히 설명해보도록 하겠다.
 
 

구글 URL검색창에 'https://nodejs.org/en' 라고 입력해주거나 해당 링크로 접속한다.

Node.js — Run JavaScript Everywhere

 
 
 

링크 접속화면

 
 
해당 화면으로 접속했다면 DOWNLOAD 버튼을 눌러준다. 참고로 LTS버전이 좀 더 안정화된 버전이므로 LTS버전을 다운로드 받는 것이 권장된다.

 
 
 

 
 
 

 
Setup파일을 다운로드받아 실행했다면 NEXT버튼을 난사해준다.
 
그후 Install 버튼을 눌러 설치해주면 다운로드는 끝난 것이다.

 
 
 
 

 
 
 
 

 
 
 

다운로드가 끝났다면, 제대로 다운로드되었는지 확인해보기 위해 윈도우버튼+R키를 눌러 cmd창을 연 후, cmd창에 'node -v'을 입력하여 설치된 node.js의 버전을 확인해보도록하자.
 
다운로드한 버전이 뜬다면 제대로 설치된 것이다.

 
 

윈도우버튼 + R

 
 
 
 

2. NVM 설치하기 (선택)

NVM이란 Node Version Manager의 약자로 Node.js의 버전을 관리해주는 도구이다. Node.js의 여러버전을 관리하는데에 있어 유용하기에 React Native를 통해 여러 프로젝트를 동시에 작업해야하는 경우에 굉장히 유용하다. 하지만 꼭 깔아야만 하는 것은 아니기에 선택적으로 설치하면 좋을 것 같다.
 
아래에선 NVM을 설치하는 방법에 대해 자세히 알아보도록 하자.
 
 
 
 

구글 URL검색창에 'https://github.com/coreybutler/nvm-windows' 라고 입력해주거나 해당 링크로 접속한다.

 

 
 
 
 
 

해당 링크로 접속했다면 스크롤을 내려 'download now'라는 파란색 버튼을 클릭하여 아래 화면으로 들어간 후 역시 스크롤을 내려 다운받고싶은 버전의 setup.zip 압축파일을 다운로드 받도록하자.

 
 
 
 

 
 
 
 
 

압축파일을 다운받아 setup.exe 파일을 실행했다면 Node.js와 마찬가지로 Next버튼을 난사해주자.

 
 
 
 

 
 
 
 
 

설치를 완료했다면 마찬가지로 윈도우+R키를 눌러 cmd창을 열어 'nvm' 이라고만 입력하여 제대로 설치되었는지 확인해보자. 아래와 같이 Running version이 제대로 뜬다면 제대로 설치된 것이다.
 
 
 
 

 
 

3. Android Studio 설치하기

대표적인 안드로이드 앱 개발 프레임워크인 Android Studio를 다운로드 해보기 전에 Android Studio는 React Native CLI를 사용할려하는데 이건 왜 설치하는 것인지 궁금해할 수 있으니 (제가 그랬습니다 ㅎㅎ) 그점에 대해서 짚고 넘어가고자한다. 
 


Android studio를 사용하는 이유
 
●  Android SDK를 제공함: 안드로이드 SDK란 Android Software Development Kit의 약자로, 안드로이드를 개발할 때 필요한 도구인 컴파일러, 에뮬레이터, 디버깅 도구들을 지원하는 것을 말하는데 Android Studio를 설치하면 이러한 도구들을 제공해줌
 
● 차별화된 Android 에뮬레이터가 있음 : Android Studio에는 여러 안드로이드 디바이스를 에뮬레이션할 수 있는 강력한 에뮬레이터가 포함되어 있어, 실제 디바이스가 없어도 애플리케이션을 다양한 환경에서 테스트하고 디버깅할 수 있게 됨
 
● 환경 설정과 관리 : 안드로이드 개발에 필요한 환경 변수 설정, SDK 경로 설정 등을 관리하는 통합 환경을 제공해줌
 
● 네이티브 코드 접근가능 : Android Stuio에서는 Java나 Kotlin등의 언어로 작성된 Native code를 호환하여 네이티브 코드작성을 가능하게 해줌
 
● 프로젝트 구성과 빌드 시스템 : Gradle을 기반으로 한 빌드 시스템을 사용하여, 프로젝트의 빌드 과정을 자동화하고 빌드 프로세스를 자유롭게 커스텀할 수 있게 지원해줌
 
이제 Android Studio를 왜 살치해야하는지 알게 되었다면 어떻게 다운로드받는지 아래에서 자세히 설명해보도록 하겠다.
 
 
 
 
 

구글에 Android Studio를 검색하여 밑에 Android Developers 공식 다운로드 사이트에 들어가 'Android 스튜디오 Koala 다운로드'라고 쓰인 버튼을 눌러 setup파일을 다운로드 받아보도록하자.

 
 
 
 

 
 
 
 

 
setup파일의 설치가 완료되었다면, setup파일을 실행하여 이번에도 마찬가지로 Next버튼을 난사해주면 된다.
 

 
 
 

 
 
 
 
 

안드로이드의 설치가 완료되었다면 file -> setting -> Languages & Frameworks -> Android SDK 로 들어가서 공식문서에 나와있는대로 최신버전부터 API 레벨 34용 Android SDK 까지 선택 후 OK버튼과 apply 버튼을 눌러 설치주면 된다.

 
 
 
 

 
 
 
 

 
Android SDK의 설치가 완료되었다면 상단 메뉴바의 Tools에서  Device Manager에 들어가서 아까 최신버전부터 API 레벨 34용 Android SDK 까지 설치하는 과정에서 설치되었던 vanillaIceCream을 선택하고, 모바일 에뮬레이터 세팅을 완료하자.

 
 
 

 
 
 
 

모바일 에뮬레이터(Android Virtual Device)의 세팅이 끝났다면 다음은 환경변수 설절을 해야한다. 환경변수 설정을 하기위해 시스템 속성으로 들어가서 환경변수 -> 시스템 변수에서 새로 만들기를 눌러 변수이름은 ANDROID_HOME으로 지정하고 변수값은 아까 SDK설정햇던 창에 있던 주소를 그대로 가져와주면 됨
 
+ 시스템 변수의 목록에서 PATH라는 변수는 편집 -> 새로만들기 아까 경로에서 뒤에 역슬리래쉬키 + platform-tools 추가해서 지정해주면 환경변수세팅은 끝난다.
 

 
 
 

 
 
 

 
환경변수 세팅이 끝났다면 제대로 되었는지 확인하기 위하여 cmd창에 adb를 입력했을 때 아래와 같은 화면이 출력된다면 정상적으로 환경변수 세팅을 마친 것이다.

 
 
 
 
 

 
 
 
 
 

4. React Native CLI 설치하기

마지막으로 React Native를 설치하는 하는 방법에 대해서 설명해보겠다.
 
 
 
cmd 창을 열어 npm install -g react-native-cli를 입력하자. 그러면 React Native가 설치될 것이다.

 
 
 
 

 
 
 
 

제대로 설치가 되었는지 확인하기 위해 cmd창에 react-native -version을 입력해보자.
 

 
 
 

 
 
 

 
위와 같이 버전이 뜬다면 제대로 설치된 것이다.
 

 

4. JDK설치하기

 

17버전이상의 JDK를 다운받아 JAVA_HOME환경변수설정을 해주면 됨 (스샷은 나중에 추가할예정)