본문 바로가기

React Native/React Native 강좌

React Native 강좌 - 1강 실행환경 조성하기

안녕하세요 대부분 잘 알고 계시는 React Native 강좌를 시작해보려고 합니다.

대부분 인터넷에 있는 글은 영상을 기반으로 해서 짧은 시간에 배워보려고 하시는 분들께 정보를 제공하고자 합니다

 

 

먼저 실행 환경을 조성해 보려고 합니다

 

1) 실행 환경

 - OS : Window 10

 - React Native 환경

 

2) 설치과정

 

2-1) Choco 패키지 관리자

  윈도우에서는 리눅스나 우분투와 다르게 apt 같은 패키지 관리자가 존재하지 않습니다. 따라서 다음 단계에서 Python, Node.js 등을 편리하게 설치하기 위해서는 Choco 패키지 관리자를 설치해야 편리하게 진행 할 수 있습니다 

 

 Choco : https://chocolatey.org/

 

Chocolatey - The package manager for Windows

Chocolatey is software management automation for Windows that wraps installers, executables, zips, and scripts into compiled packages. Chocolatey integrates w/SCCM, Puppet, Chef, etc. Chocolatey is trusted by businesses to manage software deployments.

chocolatey.org

 

 위 경로에서 다운로드 한 후 설치하시면 됩니다.

 이 후 apt-get install 같은 명령어로 사용해주기 위해서 환경변수를 등록해야 합니다.

 

 윈도우 Powershell 을 실행 한 후 사이트에서 제공하는 명령어를 입력합니다 (변경될 수 있으니 사이트를 참조하세요)

Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((NewObject System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

 

이후 powershell 이나 cmd에서 choco -v 를 입력했을때 버전이 출력된다면 완료된 것입니다.

choco -v

 

2-2) Node.js 설치

React Native는 Node.js 를 사용합니다. 따라서 저희도 React를 이용해서 앱을 만들어 보기 위해선 Node.js 를 설치해야 합니다. Choco를 성공적으로 설치한 유저분들이고 리눅스를 사용해 보셨다면 다음 단계도 쉽게 따라오실 수 있습니다.

 

choco -y install node.js.install

 

2-3)  React Native Cli 설치

npm을 이용해서 React Native Cli를 설치합니다

npm install -g react-native-cli

 

여기까지 따라오셨다면 거의 끝났습니다. 사실상 리액트 네이티브를 사용하기 위한 준비는 끝났다고 생각하시면 되는데요. 하지만 안드로이드 앱이든 ios 앱이든 실제 디버깅을 해볼 환경을 조성하는 것도 필요하기 때문에 안드로이드 스튜디오를 깔아서 가상 머신을 컴퓨터에 설치하도록 하겠습니다.

 

 

2-4) 안드로이드 스튜디오 설치

이 과정은 인터넷 사이트에 더 잘 나와 있기 때문에 생략하도록 하겠습니다. 이번 포스트에서 사용할 버전은 최신버전인 3.5.3 버전 (2020년 1월 기준) 을 사용하도록 하겠습니다. 편의를 위해 설치 링크를 제공합니다

https://developer.android.com/studio/install?hl=ko- 안드로이드 스튜디오 설치

 

설치가 완료된 뒤 아무 프로젝트나 시작하고 보면 Tools 메뉴 바를 클릭합니다

AVD Manager 를 열면

위와 같은 창이 뜨게 됩니다. Create Virtual Device 를 클릭합니다.

아무 기기나 사용하셔도 무방하지만 저는 Pixel 3 XL - Android Q 를 사용하겠습니다. 

 

설치가 완료되면 

위와 같은 새로운 기기가 추가되며 Action 란에서 재생 버튼을 누르게 되면 가상 머신이 실제로 동작하는 것을 확인하실 수 있습니다.

 

여기까지 읽어주셔서 감사하고 다음 포스트에서는 실제 처음 화면을 구성하는 법에 대해서 알아보도록 하겠습니다.