'React & React Native '에 해당되는 글 64건

실습시 안드로이드 개발환경 설정에 삽질을 해서 내용을 정리해봅니다. 

•  JDK 설치 

      brew 통해서 설치할수도 있는데, 나는 이미 JDK 깔려있어서 설치를 하지는 않았다. 

•  안드로이드 Studio

       https://developer.android.com/studio/  다운받아설치한다.

      설치 옵션에서 커스텀을 선택하여 아래에 옵션을 선택하여설치한다. 

• Android SDK
• Android SDK Platform
• Performance (Intel ® HAXM)
• Android Virtual Device

• 안드로이드 SDK 설치 

     안드로이드 Studio 를 실행한후 구성(Configure) 선택하고 SDK 관리자를 선택한다음 

     아래에 화면에서 SDK Platforms 탭에서 버전에 맞는 Platforms을 선택하고, SDK Tools 선택하여  아래와 같이 선택해서 설치한다.

• ANDROID_HOME 환경변수 설정 

편집하여 아래와 같이 환경 변수를 추가한다. 

환경변수가 추가됬는지 확인한다. 

• Android Device 등록 및 실행하기 

     react-native 명령어로 프로젝트를 생성한후 안드로이드 Studio를 실행하여 프로젝트를 Open 한다.

     Tools -> ADV Manager 를 실행한후 적당한 Devices를 추가한후 에뮬레이터를 실행한다. 

     Device 설정은 다음 링크를 참조한다. 

     https://developer.android.com/studio/run/managing-avds?hl=ko

• react-native run-android 명령어로 프로젝트를 실행한다. 이때 Android 에뮬레이터가 실행되기 전에 이를 수행하면 아래와 같이 오류메세지가 뜬다. 
  

참고 : https://facebook.github.io/react-native/docs/getting-started.html

Mac OS 업데이트 후 react-native init 명령어로 프로젝트 생성후 디버깅을 하니 아래와 같은 에러가 나면서 시뮬레이터가 정상동작하지 않게되었다.

오류메세지에 나와있는데로 조치를 했는데도 정상동작하지 않아서 구글신에게 물어보던중 아래와 같은 해답을 발견하였다. 

매번 프로젝트 생성시 명령어를 수행해야되니 좀 번거롭기는 한듯 -ㅅ-

출처 : 

https://stackoverflow.com/questions/52486219/unable-to-resolve-module-babel-runtime-helpers-interoprequiredefault

https://stackoverflow.com/questions/51684918/meteor-error-cannot-find-module-babel-runtime-helpers-builtin-interoprequired

화살표함수 ES6에 새로 추가된 기능이다. 

function 키워드 없이도 함수를 만들 수 있으며, return을 사용하지 않아도 식을 계산한 값이 자동으로 반환된다. 

화살표(=>)를 사용하면 모든 함수 정의를 한줄에 끝낼 수 있다. 

function 키워드를 없애고, 화살표가 어떤 값을 반환하는지 지정해주기 때문에 return도 없앴다. 또다른 장점은 함수가 파라미터를 단 하나만 받는 경우 파라미터 주변의 괄호를 생략해도 된다.

파라미터가 2개 이상이면 괄호가 필요하다.

여러줄을 사용해야될경우는 함수 본문 전체를 중괄호로 둘러싸야한다.

React Native 실습중 해당에러가 나는데, 이는 현재 등록된 패키져의 정보를 찾을수 없다는 내용이다. 

A프로젝트를 react native 명령어로 실행이 된상태에서 , 다른 프로젝트를 react native 명령어로 실행하면 위와 같은 에러가 발생한다. 

이전에 실행된 launchPackager 를 종료하고 앱을 실행하면 정상적으로 실행된다.

날씨앱 실습시 다양한 에러와 마주치곤했다. ㅠㅠ

구글링을 해보니 ios/build 폴더를 삭제하고 다시 실행하면된다는 계시글을 발견하고 해봐였으나, 여전히 실행되지않았다.

결론만 말하면 설치되고 설정된 노드버전이 문제가 됬었다. node 설치를 여러버전을 설치를 했었는데, node default 버전이 6.0버전이어서 실행이 정상적으로 동작하지 않았던듯하다. 

default 노드버전을 변경하고 react natvie 재실행해본다. 

리액트 날씨 앱을 연습하다가 다음과같은 에러가 발생하였다.  import 정보가 누락될경우 해당에러가 발생한다. 

<Fragment> 란 무엇인가하면 , React는 최소하나의 엘러먼트가 필요하다. (보통 div를 사용한다.) Fragment를 쓰면  DOM 별도의 노드를 작성하지않고 하위앨리먼트를 그룹화 할 수 있다.

https://reactjs-kr.firebaseapp.com/docs/fragments.html

리액트 네이티브는 iOS와 안드로이드에서 동작하는 네이티브 모바일앱(이하 '앱')을 만드는 자바스크립트 프레임워크이다. 리액트 네이티브는 사용자가 인터페이스를 만드는 페이스북의 자바스크립트 라이브러리인 리액트에 기반을 두고 있다. 하지만 브라우저가 아닌 모바일 플랫폼이 타깃이다. 웹 개발자가 익숙한 자바스크립트 라이브러리를 이용하면서 겉모습과 실제 동작까지 진짜 네이트브인 모바일 앱을 만들 수 있다. 게다가 작성한 코드 대부분을 플랫폼 간에 공유할 수 있어서 리액트 네이티브를 이용하여 손쉽게 iOS와 안드로이드 앱을 동시에 개발할 수 있다. 

  공식 리액트 네이티브 프로젝트는 iOS와 안드로이드에서 모두 동작하는 모바일 앱을 작성할 수 있게 해준다. 커뮤니티 프로젝트를 이용하면 리액트 네이트브로 윈도우, 우분투 , 웹 등 다른 플랫폼에서 동작하는 앱을 만들 수 있다. 리액트 네이티브는 Cordvoa 나 Ionic과 같은 기존의 크로스 플랫폼 앱 개발 방법과는 눈에 띄는 차이점이 있다. 바로 대상 플랫폼의 표준 렌더링 API를 사용한다는 점이다. 자바스크립트, HTML, CSS 를 사용하여 모바일 앱을 만드는 기존의 방법들은 웹뷰를 이용하여 렌더링을 한다. 이러한 방식은 앱을 실행하는데 있어서 성능을 떨어뜨리는 단점이 존재한다. 네이티브 UI를 사용하지 않을뿐 이를 흉내낼 뿐이며 결과는 어색하기만 하다. 애니메이션과 같은 아주 섬세한 부분에 대한 리버스 엔지니어링이 엄청나게 들며 이는 쉽게 구식이 되어버린다. 

  리액트 네이티브는 개발자가 작성한 마크업을 플랫폼에따라서 그에 상응하는 진짜 네이티브 앨리먼트로 전환한다. 리액트 메인 UI쓰레드와 분리되어 실행되어 성능상의 이점이 존재한다.  리액트 네이티브의 렌더링 갱신주기는 리액트와 같다. props와 state가 변경될때 리액트 네이티브는 뷰를 다시 렌더링 한다. 리액트 네이티브와 브라우저에서 실행하는 리액트의 가장 큰 차이점은 HTML , CSS 마크업이 아니라 대상 플랫폼의 UI 라이브러리를 이용하여 렌더링한다는 점이다. 개발 경험과 크로스 플랫폼 개발 가능성이라는 두가지 면에서 리액트 네이티브는 지금까지의 모바일 앱 개발 방법보다 진보했다고 할 수 있다.

발췌 빠른 모바일 앱 개발을 위한 React Native 2/E [이종은 저 ]

프로젝트 생성방법은 2가지가 있다.

• Create React Native App
• expo에서 제작한 도구
• 자바스크립트로 작성된 앱만지원한다. (네이티브X)
• react-native init
• react-native 팀의 공식 도구
• native 모듈을 사용하게되면 필수이다.

1) Create React Native App 설치 

create-react-native-app 을 이용하여 앱프로젝트 생성하기 

2) React-native 개발환경 설정 (전형적인방법)

• node.js
• 리액트네이티브
• ios 개발환경 (Mac OS,  XCode)
• 안드로이드 개발환경 (JDK, 안드로이드SDK, 안드로이드 스튜디오)