[Android] React-Native 시작 하기

환경

windows10(x64) 

VScode

 

1단계 chocolatey 설치

Ubuntu 나 SentOS를 에서 apt-get 이나 yum 을 사용해서 패키지를 설치하는데 

chocolatey은 윈도우에서 그 역할을 해준다.

 

cmd(명령프롬프트)창을 관리자권한으로 오픈한뒤 아래의 커맨드를 입력해주자.

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "[System.Net.ServicePointManager]::SecurityProtocol = 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

 

 

2단계 Node.js 와 python 설치

설치가 완료 되었다면 chocolatey을 이용해서 Node.js 와 Python을 설치 해보자.

 

Node.js 설치

 

choco install nodejs-lts

설치가 완료 되었다면 제대로 설치가 되었는지 Node.js와 npm 버전을 체크해보자

node -v

npm -v

 

 

python 설치 

 

 

 

choco install python

설치가 완료 되었다면 제대로 설치가 되었는지 버전 확인을 해보자

python --version

 

나는 안드로이드 스튜디오와 JDK가 설치 되어 있어서 나머지 과정에 대해서는 생략하겠다.

이후에 해야할것.

- JDK 설치

- Android Studio 설치

- JDK, Android Studio SDK 환경변수 등록

- Android 가상머신 생성 

 

 

3단계 React-native 설치 

npm 으로 React-native 설치를 해보자 

 

expo-cli 와 react-native-cli 두가지가 있는데 둘의 차이점은
expo는 빌드도구로서 빠르게 프로젝트를 개발하기 편하게 다양한API와 모듈들이 기본적으로 내장되어있고 배포 또한 빠르게 할 수 있다.

react-native-cli는 네이티브코드로 작성된 모듈과의 연결이 가능하고 원한다면 expo 패키지도 설치 할 수 있다.

그리고 expo 보다 자유도가 높기 때문에 많은 것을 할 수가 있다. 그래서 나는 react-native-cli 를 설치했다.

npm install -g react-native-cli

설치를 하고 나서 react-native가 제대로 설치가 되었는지 버전을 확인해보자

npm react-native --version

 

버전이 나온다면 제대로 설치가 되었다.

 

 

 

4단계 프로젝트 생성 및 시작

이제 간단하게 프로젝트를 만들어보자.

 

VScode가 없다고 가정하에 프로젝트를 만들어 보겠다.

내가 프로젝트를 생성하고 싶은 곳에 폴더 하나를 생성한다.

그리고 나서 주소창을 클릭해보면 폴더 경로가 나타난다. 경로를 드래그로 복사한 뒤

cmd(명령프롬프트)를 실행한다.

cd (폴더 경로 붙여넣기)

이동 한뒤에 프로젝트를 생성 해주자 

 

react-native init (프로젝트명)

 

 

프로젝트가 생성이 완료 되었다!

 

 

프로젝트 폴더로 이동한 뒤 프로젝트를 실행해보자.

 

 

실행하게 되면 일정 커맨드 창 2개가 나타나며 프로젝트 빌드가 끝나면 애뮬레이터에 빌드한 앱이 실행된다.

 

 

짠~! 리액트 네이티브 기본화면이 반겨준다!

 

 

 

참고 사이트

 

https://harrythegreat.tistory.com/entry/ReactNative-expo%EB%9E%80

[React-Native] expo란?

https://wordbe.tistory.com/entry/expo-expobare-react-native-CLI-%EC%B0%A8%EC%9D%B4

expo, expo(bare), react-native CLI 차이

https://ssilook.tistory.com/entry/REACT-NATIVE-React-Native%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C-vs-Expo-%EB%B9%84%EA%B5%90

[REACT NATIVE] React-Native(리액트 네이티브) vs Expo 비교

https://dev-yakuza.posstree.com/ko/react-native/install-on-windows/#chocolatey-%EC%84%A4%EC%B9%98

윈도우(Windows)에 react native 개발 환경 구축하기

https://docs.chocolatey.org/en-us/choco/setup

Chocolatey Software Docs | Setup / Install

https://kutar37.tistory.com/entry/chocolatey-%EC%9C%88%EB%8F%84%EC%9A%B0-%ED%8C%A8%ED%82%A4%EC%A7%80%EB%A7%A4%EB%8B%88%EC%A0%80

chocolatey : 윈도우 패키지매니저