티스토리 뷰

반응형

안녕하세요. 오틸라 입니다.

 

최근에 무슨 프로젝트를 하나 진행하다보니, 하이브리드앱이 하나 필요하게 되었습니다.

 

뭘로 할까 고민하다가

 

react native로 하기로 마음 먹었습니다.

 

 

오늘은 windows10 PC에서 프로젝트 개발을 위한 환경설정부터 해보겠습니다.

 

(사실 예전에 환경설정하는건 포스팅한적이 있는데, 벌서 1년이 지나버려서, 바뀐점이 있기도하고, 또 다른방법으로 환경설정하는 방법입니다.)

 

 

1. Node.js 설치하기

 

 

 

https://nodejs.org/ko/ 사이트에 접속해서 10.15.0 LTS 버전을 다운로드 합니다. (2019년 7월 23일 기준)

 

 

 

 

계속 next....next해서 설치합니다.

 

 

 

리액트 네이티브를 설치하기 위해 커맨드창에서 명령어를 입력하면

 

 

npm이 없다고 하는데, node.js를 설치하고 나면 사용이 가능해 집니다.

 

(반드시 이전에 안되던 커맨드창이 있다면 닫고 다시 실행하시기 바랍니다)

 

 

 

이제 커맨드창에서 npm install -g react-native-cli 라고 입력하고 엔터를 치면 리액트 네이티브 설치를 시작합니다.

 

 

설치가 완료되면 프로젝트를 하나 생성해 보겠습니다.

 

명령어는

 

react-native init (프로젝트명)

 

저같은 경우는

 

react-native init AgmSmartphone이라고 했습니다.

 

 

 

완료까지 좀 시간이 걸립니다. 기다려줍시다^^

 

 

 

 

설치가 완료되면 안내를 하나 해줍니다.

 

iOS나 android로 실행하고 싶으면 프로젝트 폴더로 이동해서 run 명령어를 실행해주면 된다!

 

1. cd AgmSmartphone

2. react-native run-ios 혹은 react-native run-android

 

요건 좀있다 해볼께요.

 

 

다음은 VSCode를 설치할겁니다.

 

https://code.visualstudio.com/

 

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

 

여기 접속해서

 

 

download for windows로 다운받으면 됩니다. 

 

 

 

 

요것도 그냥 다음다음 해서 default값으로 설치합니다.

 

 

 

VSCode를 실행한다음

 

File - open folder에서 아까 만든 프로젝트 폴더를 엽니다.

 

 

 

프로젝트 구조나, 필요한 extension은 차차 설치하면서 설명할께요.

 

일단은 기본구조는 위와 같으며, 제일 메인이 되는 파일은 App.js입니다.

 

 

이제 여기서 아까

 

react-native run-android를 해볼겁니다.

 

 

휴대폰을 직접 USB로 연결해서 디버그가능하게 해놔도 되고, 

저같은 경우는 android studio 설치하면서 emulator를 하나 만들어 놨습니다.

geny motion이나 다른거 쓰셔도 됩니다.

어쨌든, 실제 휴대폰 또는 에뮬레이터가 연결되어야 합니다.

 

 

 

 

 

흠...예전에 에뮬레이터를 다 지웠나....;;;;;;

 

안드로이드 스튜디오를 실행해서 에뮬레이터를 보니, 하나도 없네요 ㅎㅎ

그래서 지금 새로 받고 있습니다. ㅋ

 

 

 

저같은 경우는 api29짜리 설치하다가 다시 그냥 오레오버전 api26 짜리로 하나 설치했습니다.

 

그리고 실행합니다.

 

 

한번 실행된 이후에는 빨리빨리 부팅이 되는데, 최초실행이라 시간이 좀 걸리네요.

스마트폰 부팅까지 좀더 기다려줍니다 ㅠㅠ

 

 

 

 

이제 이 상태에서 커맨드창에 react-native run-android를 해봅시다.

 

 

 

 

cd agmsmartphone 한 다음

react-native run-android를 하면 node.js 가 발동합니다.

 

 

 

허용해주고~ 계속 ㄱㄱ

 

 

노드 js 가 잘 돌아간다고 따로 창이 하나 떠줍니다.

 

 

 

그리고 커맨드창에서도 뭔가 다운로드하면서 겁내 바빠집니다 ^^

 

(요것도 시간이 꽤 오래 걸립니다. 최초에만)

 

 

 

 

음....

 

 

 

 

이상하네요. 안드로이드 개발하던 PC였는데 왜 다 날라갔지.....아까 에뮬레이터도 없드만..

 

지금 저는 ANDROID_SDK_ROOT가 없다고 build failed가 떴습니다.

 

최초 설치하시는 분들도 저와같은 증상일꺼에요 SDK가 없거나 환경변수를 안만들어놔서 그래요.

 

SDK가 없으신분들은 설치하시고, 환경변수가 없으면 아래와 같이 추가해줍니다.

 

 

 

(환경변수 편집 이후에는 커맨드창을 또 닫고 새로 열어야 적용됩니다.)

 

 

 

이제 빌드가 성공되었고,

 

에뮬레이터를 보면

 

 

 

요렇게 로딩하다가

 

 

요렇게 첫화면이 나옵니다.

 

 

프로젝트상에 App.js파일의 내용을 수정하고, 에뮬레이터에서 R을 두번 눌러주면 바로 바뀐게 적용된다고 하니 여기까지 해보겠습니다.

 

 

VSCode에서 App.js파일을 열어 아래와 같이 수정했습니다.

 

 

스템 원이라고 적었네요 -0-

 

뭐 어쨌든 저렇게 적고 저장하고, 에뮬레이터에서 RR 눌러주면!!!

 

 

 

 

다시 빌드하거나, 이런과정없이 바로 수정된게 보여집니다.

 

이 상태에서 이제 하이브리드 작업을 시작하면 되겠습니다.

 

여기까지 리액트 네이티브를 개발하기 위한 환경설정이었습니다.

 

반응형
댓글