TIL - React Native (윈도우로 환경설정 및 첫 프로젝트)

jake·2022년 1월 30일

reactnative

reactNative

목록 보기

4/11

책 리액트 네이티브를 다루는 기술과 공식문서를 보면서 빠르게 익혀보자~

https://reactnative.dev/docs/environment-setup#installing-dependencies
리액트 네이티브 스타트 공식문서

리액트 네이티브란?

자바스크립트와 리액트 라이브러리를 사용해 네이티브 앱을 만들수 있게 해주는 기술
리액트 네이티브를 사용하면 리액트에서 사용하는 기술을 웹 브라우저가 아닌 환경에서 사용가능하다.
리액트 네이티브는 아래 2가지 환경에서도 구동할 수 있는 앱을 만들수 있다. 주로 모바일 앱에 사용하지만 VR, 윈도우 TV등에서도 사용가능하다.
Apple - IOS
Google - Android
즉, 자바스크립트로 IOS, Android환경에서 구동하는 애플리케이션 구현가능하다는 얘기다.
리액트 네이티브를 사용해 만든 프로젝트에는 JavaScriptCore라는 자바스크립트 엔진이 탑재되어있다. 이 엔진을 통해 자바스크립트 로직을 앱내에서 실행 시켜주는 것이다. JavaScriptCore 참고사이트
리액트 네이티브에 내장되어있는 컴포넌트는 네이티브 환경에서 사용되는 컴포넌트들과 연동되어있다. 때문에 내장된 Text라는 컴포넌트를 사용하면 IOS, Android환경에서도 사용가능하다.
JSX로 작성하고 리액트 네이티브로 만든 앱 안에 내장된 스레드가 이를 인식해 어떤 네이티브 컴포넌트로 보여줘야할지 연산 후 화면에 보여주는 것이다.
리액트 네이티브는 네이티브 플랫폼의 API를 자바스크립트로 호출할 수 있게 해준다. 날짜선택, 클립보드, 키보드제어 같은걸 자바스크립트로 구현한다는 얘기다. 하지만 네이티브 플랫폼의 모든 API를 사용가능한 것은 아니고 호출할 수 있는 API는 리액트 네이티브 라이브러리 안에 API래퍼(Wrapper)가 내장되어있지만, 동영상 재생 , 카메라촬영, 파일선택기능은 자체적으로 탑재되어있지않다. 대신! 리액트 네이티브는 네이티브 플랫폼의 코드(자바, 코틀린, 오브젝트-씨, 스위프트)로 작성한 기능을 자바스크립트로 연동해 호출할 수 있게 해주는 도구를 제공한다!
(자체적으로 탑재되지 않은 기능을 사용할 때 대부분 서드파티 라이브러리를 설치해 원하는 기능을 구현하지만 특정 상황에서 자바나 오브젝트-씨 같은 언어로 직접 구현해야할 때도 있다는 것을 알아두자!)

작업환경준비 (윈도우기준)

리액트 네이티브의 가장 큰 장점은 자바스크립트 코드를 작성해서 IOS, Android환경에서 구동되는 애플리케이션을 개발할 수 있는것이 장점이다.
하지만 IOS앱은 다른 운영체제에서는 컴파일이 안되기 때문에 리액트 네이티브로 두가지 운영체제를 만들어보고싶다면 애플의 맥OS를 사용하는 것을 권장한다. 맥북사자.(물론 리눅스,윈도우 환경에서도 IOS앱개발 및 릴리스를 할 수는 있는데 권장되지는 않는다)

설치순서

1. node.js와 npm설치하기

node.js : 웹브라우저가 아닌 환경에서도 자바스크립트 코드를 실행할 수 있게 해주는 Chrome V8 Javascript 엔진으로 빌드된 런타임이다.
node.js 설치사이트

npm : Javascript 프로젝트를 위한 패키지를 관리하는 도구이다. npm은 node.js를 설치할 때 자동으로 설치된다.

단축키
node -v 현재 사용하고있는 노드 버전확인
npm -v 현재 npm 버전확인(최신 버전으로 업데이트는 npm install -g npm@latest)
nvm install 깔고싶은버전
nvm use 사용하고싶은 버전
nvm ls - 현재 깔려있는 노드 버전들
nvm이 안되면 nvm깔고 해보자 (nvm설치참고사이트)
npm install -g yarn (yarn으로 패키지를 깔아서 쓰자 훨씬빠르고좋다)

2. JDK 설치하기

안드로이드 앱 개발을 위해 필요한 JDK(Java Developement Kit)을 설치해야한다.
윈도우에서 JDK를 설치하려면 Chocolatey이라는 패키지 매니저를 사용하는것이 권장된다. Chocolatey를 다운로드하는 방법은 아래 사이트를 참고하자.
Chocolatey 설치법 참고사이트
(Chocolatey 설치를 완료했다면 Powersell, netFramework, window Terminal등을 설치했을 것이다.)

JDK를 설치하기위해
1. 관리자권한으로 window Terminal을 켜고 choco install -y openjdk8을 입력해준다. (공식 사이트에 11버전 쓰라고해서 변경했다. openjdk에서 11버전 다운받고 파일 저장 후 환경변수랑 path변경해야된다.)

2. window Termianl을 종료한뒤 다시 열어서 javac -version을 입력해서 JDK가 설치됐는지 확인한다.

3. 안드로이드 스튜디오 설치하기

안드로이드 앱 개발을 위해 안드로이드 스튜디오도 설치해야한다.
설치방법은 모든 운영체제가 동일하다.
안드로이드 스튜디오 설치 참고사이트에서 install type까지 참고하고 저는 custom으로 진행했습니다. 평범한 standard로 진행하시고 싶으시다면 참고사이트를 보고 진행하시면 됩니다!

추가적으로 공식사이트에서 Android 10 (Q) SDK 를 설치해야한다고한다. 사이트 참고해서 설치하자. 공식사이트

안드로이드 설치사이트에 가서 다운로드한다.
다운로드 후 설치 순서

넥스트클릭
AVD가 없으면 안드로이드 스튜디오로 작성한 프로그램을 바로 테스트를 할 수 없습니다. 체크 후 next
설치 경로설정
시작메뉴에 폴더생성할지 물어보는 것이다. install 클릭
install 완료 후 next
완료 후 실행
Android Studio 실행하면 아래와 같이 뜬다. Do not import settings 체크 후 ok
정보수집을 위해 google에 메세지 보내게 허용할거냐는 뭐 메세지뜨는데 저는 don't send눌렀고 next클릭
Custom으로 선택 후 next
기본값 그대로 next
UI는 취향에 따라 선택 후 Next
아래와 같이 선택 후 next클릭 (Android virtual Device는 이미 설치되서 선택이안됐다. 혹시라도 설치 안되신분들은 이것도 클릭하셔야합니다.)
안드로이드 에뮬레이터의 램을 선택해주는 것인데 내 컴퓨터의 성능에 따라 자동으로 추천하는 RAM용량을 설정해준단다. next클릭
왼쪽에 sdk-license와 preview-license를 클릭 후 둘 다 Accept 후 finish 클릭
finish 누르면

안드로이드 스튜디오가 실행된다~~

4. 안드로이드 환경변수 설정하기

안드로이드 개발 환경을 준비하기 위해 안드로이드 관련 환경 변수들을 설정해야한다. 당연히 윈도우 이글은 윈도우기준~

내 pc 우클릭 속성
고급 시스템 설정
환경변수 클릭
시스템 변수쪽 새로만들기 클릭
ANDROID HOME 으로 변수를 만들고 위치는
안드로이드 스튜디오들어가서 crtl + alt + shift + s눌러서 나타나는 sdk가 설치되어있는 경로를 복사해서 넣어주면된다. (공식사이트에 있는거 복사해도된다.)
path도 지정해야한다. 아래는 공식사이트

5. VS Code 설치하기

Vs code설치사이트에서 설치하면 된다. 다른거 쓰시던 에디터가있다면 그거 써도 괜찮습니다.

Xcode와 CocoaPods설치 (맥북사면)

iOS 프로젝트를 만들기위해 설치하는 도구이다. 맥북아니면 안된다...
나중에 설치하자. 추가로 Watchman도 맥북에서만 지원된다.

Watchman 설치하기 (맥북사면)

Watchman은 페이스북이 만든 파일 모니터링 도구로 맥북에서만 지원된다... 필수 설치는 아니지만 파일을 모니터링 하면서 변화가 생겼을때 특정작업을 처리할때 사용한다. 더욱 높은 성능으로 파일을 모니터링 할 수 있으니까 권장된다.

이로써 윈도우로 리액트 네이티브 사용 환경설정이 끝났고 프로젝트를 한번 만들어보자~

새 리액트 네이티브 프로젝트 만들기

리액트 네이티브를 만들 폴더를 만들고 터미널을 열어
npx react-native init LearnReactNative를 입력해준다.
공식문서에서는 npx를 사용하여 프로젝트를 만드는것을 권장한다.

추가적으로 특정버전이나 커스텀 템플릿으로 프로젝트를 만들 수 있다.

내가 만든 폴더에 LearnReactNative라는 디렉터리가 만들어지며 리액트 네이티브 프로젝트 관련파일들이 준비된다.
준비된 파일에서 package.json을 보면 script부분이 아래와 같이 설정된 것을 볼수있다.

이렇게 스크립트가 설정되면 yarn을 통해 명령어를 실행할 수 있다.
yarn <스크립트 이름> <스크립트 이름> 부분에 android, ios, start를 넣으면 된다.

strart는 Metro를 구동하는 스크립트이다. Metro는 리액트 네이티브를 위한 자바스크립트 번들러이다.
자바스크립트 파일을 모두 읽고 올바른 순서로 하나의 파일로 합쳐주고 네이티브 앱에서 실행준비를 해준다.

android나 ios 스크립트를 사용하면 새로운 터미널에서 start 스크립트가 자동 시작되기때문에 start 스크립트를 직접 사용하는일은 드물다.

아래 이미지는 공식문서 Metro와 yarn에 대한 얘기
Metro는 자바스크립트파일 번들러로 내 코드를 하나의 자바스크립트 파일로 만들어준다.
yarn 써도된단다.

만들어놓은 프로젝트를 안드로이드 환경에서 구동하는 방법을 알아보자.

애플리케이션을 빌드해 실제 기기에서 구동할 수 있고,
안드로이드 시뮬레이터에서 구동할 수도 있다.

먼저 시뮬레이터로 구동하는 방법을보자.

안드로이드 스튜디오에서 만들어놓은 LearnReactNative디렉토리에 android를 선택해서 열어준다. (처음에 좀 오래걸린다)

그 다음 AVD(android virtual device manager)를 클릭해서 Create device를 선택해준다.

원하는 기기를 선택하고 next를 누른다. Pixel2를 선택했다.

시스템이미지 선택화면이 나오는데 맨위에 API32의 Download를 선택한다.
내이미지에 Download가 안보이는 것은 글을 쓰기전에 이미 받아서 없다. (안드로이드가 업데이트 될때마다 API뒤의 레벨 숫자가 계속 바뀐다.)

Download가 완료되면 Finish

그 다음 Next클릭

Finish 클릭

AVD Manager에 이제 가상 디바이스가 만들어졌다. 플레이 버튼을 누르면
안드로이드 시뮬레이터가 구동된다.

이제 다시 VS Code로 돌아가서 LearnReactNative 폴더를 연다.
그리고 터미널 (ctrl + 백틱)을 열고 yarn android 명령어를 실행해보자. ADV에서 가상 디바이스의 화면이 바뀌었다!!
(원래 윈도우는 PSSecurityException 오류가 발생 한다는데 나는 오류없이 정상적으로 작동했다. 오류가난다면 Powershell을 관리자모드로 실행 후 Set-ExcutionPolicy Unrestricted를 입력 후 다시 yarn android를 입력하면 정상작동 할 것이다. 추가적으로 Android SDK platform을 설치하지 않았다면 (내기억에 custom으로 설치했던거같다.) 오류가 난다. 이거는 나중에 오류가 난다면 그때 다시 찾아보자)