React Native 앱 제작기 #1 | 리액트 네이티브? 개발 환경 설정하기

안녕하세요! 바울랩 '오현규' 연구원 입니다.

지금부터 , React Native(v0.61)를 활용한 '제주코딩베이스캠프' 앱 제작기를 포스팅 해볼게요:)

'제주 코딩 베이스 캠프'앱은 HTML, CSS, JavaScript , Python 등,

바울랩에서 제작한 여러 프로그래밍 강좌들을 제공해주는 앱입니다.

하단에 주소 남깁니다. (많은 사용 부탁해요! (●'◡'●))

제코베(제주코딩베이스캠프) 앱 주소

먼저, React-Native가 무엇인지에 대해서 간단히 설명 드릴게요!

React Native란?

리액트 + 네이티브

리액트를 사용해 네이티브 앱(Android , Ios 앱)을 동시에 만들수있다라는 것!

문득 이런 생각이 들 수도 있겠네요!

" 어떻게 리액트로 네이티브 앱이 만들어지는거지? "

.... 저만 궁금했던걸까요..?? ( ´･･)ﾉ(.\_.\`)

리액트 네이티브 코드가 각 Android , Ios의 네이티브 코드로 바뀌는 걸까요?

.

.

.

아닙니다!! (╯°□°）╯︵ ┻━┻

간단히 설명하자면 '리액트네이티브'에서 쓰이는 View, FlatList, ScrollView 등 이러한 요소들이

Android , Ios 개발에 쓰이는 UI빌딩 블록들과 공유되기 때문입니다!

React-native 작업화면

Android Studio View 작업 화면(Native 코드)

이렇게 UI블록을 공유하기 때문에 프로그램이 런타임될때,

각 OS에 해당하는 View요소들로 UI가 렌더링이 되는 것입니다.

이제 개발 환경 세팅을 시작 하겠습니다!

가장 번거롭고 중요한 개발 환경 세팅 과정입니다.

(컴퓨터 설정마다 어떤 에러가 튀어 나올지 모르니깐요.. 분명 잘따라했는데 싶다가도~)

리액트 네이티브 공식페이지에 들어갑니다.

React-Native 공식 문서

맥OS를 사용하신다면 macOS탭으로 가서 가이드를 따라가면 됩니다!

Mac에 Homebrew처럼 Window 전용 패키지 관리툴인 Chocolatey를 깔아주시구요

cmd에서 다음 명령어를 사용해 node js, python2, jdk(8버전 이상)을 다운받아줍니다.

choco install -y nodejs.install python2 jdk8

개발은 React를 사용하지만 결과물은 네이티브 앱이 빌드되기때문에

Android Studio도 설치를 해줍니다.( 현재 Android 9 (Pie)SDK를 설치하면 되겠네요)

)

우측 하단 클릭!

SDK Manager 선택!

)

가이드에 명시된 SDK버전과 상세 옵션이 설치가 되었는지 잘 확인해주세요!

환경세팅 필수구요.

이제 React Native 앱 개발에 필요한 모든 요소들이 설치됐으니,

본격적으로 프로젝트 파일을 생성해보겠습니다!

편집기는 VScode 사용합니다(대세라구요!)

Visual Code 실행 후 본인이 원하는 루트에서 아래 명령어를 실행합니다.

npx react-native init )

init 명령어를 실행이 완료되면 아래처럼 앱 개발의 필요한 요소들이 생성됩니다!

이제 생성된 프로젝트 파일을 실행해 볼텐데요,

두 가지 실행방법이 있어요. 우린 AVD로 실행 해보려합니다.

1. 안드로이드 스튜디오 가상머신(AVD) 실행

2. 디바이스로 직접 실행 ( Android 디바이스와 연결해주시면 됩니다.)

**AVD로 실행하는 방법입니다.**

안드로이드 스튜디오에서 'AVD Manager'탭에 들어가 가상머신을 생성하고 실행해줍니다.

(Android 9.0 Pie로 설치해주세요)

이렇게 가상머신이 켜지는 걸 볼수가 있습니다.

그 다음으로 가상머신이 연결이 되었는지 확인해줘야겠죠?

adb devcies

디바이스에 직접 연결하신분들은 디바이스 정보가 뜰것입니다

생성된 프로젝트 파일로 이동후, 명령어를 실행합니다.

npx react-native run-android (npx를 안쳐도 cli가 내장되어 있어서 그런지 명령어가 먹히네요)

다음과 같은 화면이 뜨면 초기 개발 환경 세팅이 완료된 것입니다!

수고하셨습니다! 다음 게시글로 가볼게요~~

from http://paullab.tistory.com/26 by ccl(A) rewrite - 2020-03-07 14:21:21