이 글은 Windows(윈도우) 에서 설치하는 방법이다.
1. 직접 스마트폰으로 React-Native를 실행하는 방법
2. Visual Studio Code를 통한 React-Native 프로젝트 개발
3. 안드로이드 스튜디오를 통한 React-Native 실행하는 방법
위 3가지를 다룰 것이다.
기본 React Native 설치하는 방법
2018/11/11 - [Develop/React Native] - React Native 설치 Windows, Android Studio 사용하기.
Expo 가 v31.0.0 이 되면서 홈페이지에 XDE설치하는 것이 사라지고 Expo SDK를 설치하는 것이 생겼다.
예전의 강의들을 찾아보면 죄다 XDE를 설치하라고 되어있는데, XDE를 설치하고 싶다면 v29이하에서 설치할 수 있다.
https://docs.expo.io/versions/latest/
위 사이트에 접속해서 v29.0.0 의 Installation 메뉴엔 XDE를 설치 하는 것이 있다.
하지만 이 글은 최신버전인 v31.0.0 을 설치하는 방법이다.
1. https://docs.expo.io/versions/latest/ - 사이트에 접속하여 Installation 메뉴에 들어간다.
그리고 Node.js가 없다면 Node.js를 먼저 설치한다.
2. Node.js 가 정상 설치되었다면
package.json 파일을 만들어야한다. (안만들고 바로 expo설치하니까 없다고 에러가 뜰 수도 있음)
1 | <code class="hljs"><span class="hljs-built_in">npm</span> --version <span class="hljs-built_in">npm</span> install express <span class="hljs-built_in">npm</span> init -y</code>
|
이렇게 하면 package.json 파일이 생성되며 생성된다면 아래와 같이 입력한다
1 | <code class="hljs perl">{ <span class="hljs-string">"name"</span>: <span class="hljs-string">" "</span>, <span class="hljs-string">"version"</span>: <span class="hljs-string">"6.4.1"</span>, <span class="hljs-regexp">//</span>처음에 <span class="hljs-number">1.0</span>.<span class="hljs-number">0</span> 이라고 되어있는 걸 최신 버전에 맞게 수정 <span class="hljs-string">"description"</span>: <span class="hljs-string">""</span>, <span class="hljs-string">"main"</span>: <span class="hljs-string">"index.js"</span>, <span class="hljs-string">"scripts"</span>: { <span class="hljs-string">"test"</span>: <span class="hljs-string">"echo \"Error: no test specified\" && exit 1"</span> }, <span class="hljs-string">"keywords"</span>: [], <span class="hljs-string">"author"</span>: <span class="hljs-string">""</span>, <span class="hljs-string">"license"</span>: <span class="hljs-string">"ISC"</span> } </code>
|
다음 Windows의 cmd창을 열어 아래의 명령어를 입력한다.
1 | <code class="hljs coffeescript"><span class="hljs-built_in">npm</span> install -g expo-cli</code>
|
이러면 expo설치는 끝이난다.
3. expo 설치를 한후 react-native 프로젝트를 만든다.
1 | <code class="hljs csharp">expo <span class="hljs-keyword">init</span> test-app </code>
|
하면 프로젝트를 고를 수 있다 빈프로젝트로 시작하기와 아닌 걸로 시작하기. 위는 키보드의 화살표 커맨드로 선택할 수 있으며
엔터를 하면 프로젝트가 생성된다.
프로젝트 생성 후
cd test-app npm start 또는 expo start
실행을 하게되면
QR코드가 생성된다.
이 QR코드를 안드로이드 휴대폰에 Expo라는 앱을 깔아서 스캔하면된다.
4. Expo 어플리케이션 설치
※ 주의할점 스마트폰과 컴퓨터의 네트워크 환경이 같은 환경에 있어야 어플리케이션이 실행됩니다.!! 같은 환경이 아니라면
7번으로
Play스토어에 들어가서 Expo라는 앱을 설치한다. 그 후에 어플리케이션을 실행한다.
그리고 위 사진에 Scan QR Code를 클릭하고 위의 QR코드를 스캔하면
위와 같이 빌드를 한다. 맨 처음 빌드할 땐 조금 느리기때문에 기다린다.
빌드가 성공하면 위와 같이 되며 Expo를 이용한 React-native 설치 및 실행이 기본적으로 끝이난다.
(아래 Visual Studio Code로 프로젝트를 한번 간단하게 만져 볼 거기 때문에 종료시키지말고 기다린다.)
5. React Native Visual Studio Code
React Native 의 에디터로 atom, vscode, sublimetext 등이 있지만 vscode가 가장 빠르다고 한다. 그래서 vscode를 사용한다.
https://code.visualstudio.com/ 옆의 홈페이지를 통해 간단하게 설치를 할 수 있다.
다음 Visaul Stuido Code를 연다 연다음 아까 만든 test-app 프로젝트를 추가한다.
6. App.js 에 들어가서 글 수정하고 Ctrl+s 를 눌러 저장을 해본다.
아래의 Open up App.js ~~~~부분을
아래 테스트!!! 처럼 하고 바로 Ctrl+s를 눌러 저장을 해보자
저장을 했으면 다시 스마트폰의 어플리케이션 화면을 보면 테스트!!! 라고 바로 바껴져있다.
실시간으로 바로바로 바뀌는 것을 Expo라는 것을 통해 확인 할 수 있다.
7. Expo Android Studio
https://developer.android.com/studio/install?hl=ko 사이트에 접속하여 안드로이드 스튜디오를 우선 설치한다.
Tools - SDK Manager에 들어간다.
설치후 React Native 는 4.1 부터 지원하므로 필자는 9.0과 8.1를 설치했다.
그리고 SDK Location을 복사한다.
복사한 SDK LOCATION을 환경변수에 추가한다 ANDROID_HOME 그리고 JAV_HOME이라는 환경변수를 추가한다
JAVA_HOME은 c드라이브의 programfile에 java폴더의 jdk 폴더 경로를 추가한다. (C:\Program Files\Java\jdk1.8.0_191)
그리고 SDK Tools에 들어가 체크되어있는 것들을 설치한다.
그리고 Tools - AVD Manager에 들어가서
Create Virtual Device를 통해 ADV를 설치한다 필자는 API Ver 28을 설치했다. 그리고 Action의 시작버튼을 클릭하면 가상에뮬레이터가 실행된다.
마지막으로 다시 cmd창에서
아래의 명령어를 입력한다.
1 | <code class="hljs sql">npm run android 또는 expo <span class="hljs-keyword">start</span> <span class="hljs-comment">--android </span></code>
|
설치후 성공적으로 테스트!!! 화면이 에뮬레이터에 뜨는 것을 확인할 수 있다.
