리액트 네이티브] 0. (1). Window 환경으로 React Native 준비하기

(사용하는 책 : 처음 배우는 리액트 네이티브)

 

 

사실 리액트 네이티브를 개발하려면 그냥 Mac에서 개발하는 것이 쌍방 고생 안하고 좋은 길이긴 하지만 한낮 주니어 스타트업 개발자에게 맥이란 사치같은 것.. 하지만 몸값을 위해서 투자는 해야겠지 (눈물)

맥 환경은 ^-^ ...... 맥을 사면 그 때 생각하기로 하고(맥북에어 M1 사고싶다), 지금은 윈도우 환경으로 개발할거라 그냥 Expo로 개발할거다.

Expo는 여러 장점이 있는데, 가장 큰 장점은 안드로이드든 ios든 Expo 앱을 깔고 그냥 그 앱의 카메라로 Expo QR코드를 인식하면 자동적으로 해당 앱을 빌드해준다는 것이다. 게다가 선을 굳이 필요로 하지 않는다. 안드로이드 기준으로, 개발 할 때 애플리케이션 모음에 지저분하게 여러 앱이 남는 것이 못마땅했는데 그러지 않게 되니까 공기계가 있다면 이것도 괜찮지 않을까 하는 생각이 들었다.

 

대신 Expo의 단점이라면 Expo가 제공해주는 API만 사용 가능하며 네이티브 모듈을 필요로 할때 CLI 모듈로 변경해야하는데, 이렇게 변경하고 나면 이후에 Expo로 프로젝트를 사용할 수 없으며 CLI로만 사용할 수 있다는 점이 있겠다. 

 

Window에서 앱을 개발할 때는 다음과 같은 것이 필요하다.

1) Node.js

2) Python

3) JDK

4) Android Studio

5) Expo

 

 

1) Node.js

 

먼저 나처럼 막... 뭐.. 어.. 다양하게 찍먹(?) 해보는 사람들은 Node 깔아놓고 까먹었을 수도 있다. 그러니 먼저 깔린것부터 확인합시다.

명령 프롬프트를 켜서 

node --version

을 입력해보자. 만약 버전이 나온다면 당신은 이미 깔려있는 것.. 

근데 node 명령을 수행할 수 없다고 하면 깔리지 않은 것이므로 node.js 홈페이지를 들립시다.

https://nodejs.org/ko/

Node.js

 

node.js 설치할때 그냥 stability 한 것으로 설치합시다... ㅎ

설치 후 마지막으로 node --version을 통해 설치가 제대로 되었는가 확인해봅시다.

 

 

2) Python

 

리액트 네이티브는 파이썬을 기반으로 움직이기 때문에 파이썬을 설치합시다.

https://www.python.org/downloads/

Download Python

파이썬 - 다운로드 페이지로 들어가 최신버전 파이썬을 설치해줍시다.

 

 

3) jdk 다운로드

 

일단.. 확인을.. 해봅시다?

java --version
javac --version

버전이 있다면 설치한 것이고, 명령어가 없다고 하면 설치 안한겁니다. 설치합시다.

자바는 오라클이 인수한지 꽤 됐습니다 ㅎ 그래서 오라클 홈페이지에서 설치를 받아야 합니다.

 

https://www.oracle.com/java/technologies/downloads/

설치 후 환경변수를 설정해야합니다.

Window10 환경이면 검색창에 시스템 환경 변수 편집 바로 검색하시고, 검색창이 없다면 시작 - 설정(톱니 모양) - 시스템 - 정보 - 고급 시스템 설정 - 환경 변수로 들어갑니다.

 

시스템 변수 새로 만들기에서,

 

변수 이름 : JAVA_HOME

변수 디렉터리 : 자바가 설치된 곳(대체로 C:\Program Files\Java\jdk-14.0.X)

 

입력한 다음 시스템 변수의 Path 변수에서 값을 추가합니다.

%JAVA_HOME%\bin

 

확인을 누르고 명령 프롬프트를 켜서 다시 한 번 버전 확인을 해보세요. 명령 프롬프트가 켜져있었다면 껐다가 다시 실행해주세요.

 

 

4) 안드로이드 스튜디오

 

안드로이드 스튜디오는 가상기기를 사용하기 위함입니다.

먼저 안드로이드 스튜디오가 설치되어 있고, 환경변수가 설정되어 있다면, 명령 프롬프트로 한번 확인해보세요.

adb --version

만약 안드로이드 스튜디오를 설치했는데, 이게 안뜬다면 환경변수가 설정이 안 된 것입니다.

Window10 환경이면 검색창에 시스템 환경 변수 편집 바로 검색하시고, 검색창이 없다면 시작 - 설정(톱니 모양) - 시스템 - 정보 - 고급 시스템 설정 - 환경 변수로 들어갑니다.

 

변수 이름 : ANDROID_HOME

변수 디렉터리 : APPDATA 속 Android 설치 위치(C:\Users\UserName(변경하세요)\AppData\Local\Android\Sdk)

 

변수 이름이 설정됐다면 Path를 설정해줍시다.

C:\Users\UserName(변경하세요)\AppData\Local\Android\Sdk\platform-tools

 

변경이 완료 됐으면 adb --version을 통해 변수 설정을 확인합니다(명령 프롬프트가 켜져있다면 끄고 다시 켜기).

 

만일 앱 개발이 처음이라 안드로이드 스튜디오가 처음이라면 설치를 해야겠습니다.

https://developer.android.com/studio?gclid=Cj0KCQjwkIGKBhCxARIsAINMioKxjyhsUY3Dq0NTqRmrtbuC9J8OkfJPaLbeKDj4iRUX-660dgqyyXQaAmSkEALw_wcB&gclsrc=aw.ds 

Download Android Studio and SDK tools  |  Android Developers

안드로이드 스튜디오 패키지를 다운받고 설치합니다.

설치 후 열면 필요 파일까지 추가로 다운 받고 나면 안드로이드 스튜디오가 열립니다.

 

필요한 안드로이드 SDK 버전 파일을 다음과 같이 설치합니다.

 

 

① 에뮬레이터 설정

만약 에뮬레이터를 이미 설정해놨거나, 저처럼 일반 Pysical Device를 사용하는 경우면 괜찮습니다.

그러나, 에뮬레이터가 없다면 설정하셔야 합니다.

 

앞서 안드로이드 SDK 버전 설치할때와 경로가 같습니다. 다만, 다음 탭 SDK Tools를 선택합니다.

다음 툴을 선택하고 ok를 눌러줍시다.

 

다운로드가 완료되면, 오른쪽 상단에 안드로이드+휴대폰 같은 아이콘을 누르고, Create Virtual Device를 선택합니다.

 

필요한 기기(화면 크기와 dpi를 보고 기기를 선택해주세요)를 선택해주세요.

 

기기의 버전을 선택합니다.

 

에뮬레이터의 이름과 모양을 선택하고 Finish를 선택합니다.

 

마지막으로 다시 한번 우측 상단의 휴대폰+안드로이드 아이콘을 클릭하고, 화살표 버튼을 눌러 에뮬레이터를 실행합니다.

 

 

5) Expo

https://expo.dev/

Expo

다음 Expo에 회원가입을 합니다. 그러면 자동적으로 Expo Project 화면이 뜹니다.