먹고놀고생각하고

RC 카 만들기 이벤트에 당첨되서 micro:bit 를 사용한 쪼그마한 RC 카를 득템했다 !

이걸로 뭘 만들어서 더욱 게을러져 볼 지 고민 중 ... 'ㅅ' 

그럼 먼저 micro:bit 이 무엇인지, 어떻게 코딩하는지 알아보자 !!

"What is micro:bit?"

 micro:bit 는 영국의 BBC에서 2015년 3월, ‘Make it Digital’ 이라는 프로젝트를 공개하면서 부터 시작되었다. 코딩교육을 목적으로 개발된 micro:bit 는 Arduino나 Raspberry Pi 와 비슷한 아주 작은 프로그래밍 가능한 컴퓨터다. 

 쉽고 재미있게 학습하고 가르치도록 고안된만큼, 정말 다양한 것들을 코드화하는 데 필요한 모든 기능을 갖추고 있으며, 가능성은 무궁무진하다. 

 그럼 micro:bit 의 사양과 사용가능한 센서들을 확인해보자.

- LED 25(5*5) 개 

- 버튼 2 개

- Physical connector pin

- Light 센서, 온도센서

- 모션 센서 (가속도센서, 지자기센서)

- 라디오 및 블루투스를 통한 무선 통신

- USB 인터페이스

"Components on the board"

1. LEDs

 LED는 발광 다이오드 (Light Emitting Diode)를 말한다.  25개의 개별 프로그래밍 가능 LED 가 있어 간단한 출력장치로 활용 가능하다. 텍스트, 숫자 및 이미지를 표시 할 수 있다.

2. 버튼

 전면에 두 개의 버튼이 있다. :A와 B로 표시된 이 버튼을 사용해서 코드를 트리거 할 수 있다.

3. Pins

 micro:bit의 에지 커넥터에는 25 개의 외부 커넥터가 있으며,이를 '핀'이라고 부릅니다. 핀으로 모터, LED 또는 기타 전기 부품을 프로그래밍하거나 코드를 제어 할 추가 센서를 연결하십시오.

4. Light 센서  (광 센서)

 화면의 LED를 반전시켜 입력이되면 LED 스크린이 기본 광 센서로 작동하여 주변 광을 감지 할 수 있습니다.

5. Temperature Sensor (온도 센서)

 이 센서를 통해 micro : bit는 현재 주변 온도를 섭씨 온도로 감지 할 수 있습니다.

6. Accelerometer Sensor (가속도 센서)

 가속도 센서는 가속도를 측정해서 micro:bit 가 움직일 때를 감지한다. 또한 흔들림, 기울기 및 자유 낙하와 같은 다른 동작도 감지 할 수 있다.

7. Compass (지자기 센서)

 지구 자기장을 감지해서 micro:bit 가 어느 방향을 향하고 있는지 감지 할 수 있습니다. 나침반은 사용하기 전에 보정해야 한다.  뒤에 설명할 코딩 방법 중 하나인 JavaScript Blocks Editor의 경우 'calibrate compass' 블록을 사용해서 보정가능하다. Python 에서 나침반을 보정하려면 compass.calibrate ()를 사용하면 된다.

 보정이 시작되면 micro:bit 가 "원 그리기" 또는 "기울여서 화면 채우기" 를 요청한다. 원의 윤곽선을 그릴 때까지 또는 화면 전체를 채울 때까지 micro:bit 를 기울여 화면 중앙의 점을 움직여서 센서 보정해야 한다.

8. 라디오 

 라디오 기능을 사용하면 micro:bit  간 무선으로 통신 할 수 있다. 라디오를 사용하여 다른 micro:bit 에 메시지를 보내거나 멀티 플레이어 게임을 만드는 등의 작업을 수행 할 수 있다.

9. Bluetooth

BLE (Bluetooth Low Energy) 안테나는 micro:bit 가 블루투스 신호를 송수신하도록  한다. 이렇게하면 micro:bit 가 PC, 폰 및 태블릿과 무선으로 통신 할 수 있으므로 마이크로 비트에서 휴대 전화를 제어하고 전화기에서 무선으로 코드를 무선으로 보낼 수 있다.

Bluetooth 안테나를 사용하기 전에 마이크로 비트를 다른 장치와 페어링해야합니다. 쌍으로 연결되면 마이크로 비트로 프로그램을 무선으로 보낼 수 있습니다.

10. USB 인터페이스

 USB 인터페이스를 통해 micro USB 케이블을 통해 컴퓨터에 micro : bit 를 연결하면 장치에 전원을 공급하고 micro : bit 에 프로그램을 다운로드 할 수 있다. 

React Native의 기본적인 특징은 무엇일까?

바로 더이상 div, html , span ....등등 이 없다는 것이다.

그 말은!

우리는 return 할 component가 정해져 있다는 뜻이다. 

이것을 React Document 에서 확인할 수 있다.

위의 코드는 앞서 생성한 프로젝트의 App.js 이다.

맨 처음 import 부분을 살펴보면 

react를 import 하고 react-native 를 import 하면서, 특정한 component 들을 import 한다.

그 다음으로 class 내부를 보면 div 나 span 이 사용되지 않았다. 

여기서는 view 라는 component 를 사용하고 있다.

React Native 의 component 는 모바일 환경에 따라 native 하게 매핑된다.

이 말은, view component 를 사용하면 iOS/Android 환경에 따라 object-c 또는 java 로 변한다는 말이다.

https://facebook.github.io/react-native/docs/components-and-apis.html

위의 사이트에서 사용할 수 있는 component 들을 확인 할 수 있다.

snack expo 라는 tool 이 있다.

https://snack.expo.io/

이 tool 을 사용하면 별도의 다운로드 설치 없이 브라우저에서 코드를 테스트 해 볼 수 있다.

snack 은 codepen 처럼 코드를 작성하고 공유할 수도 있다. (https://codepen.io/)

여기서 코드를 수정하고 Tab to Run 을 눌러 각 환경에 맞게 어떻게 component 가 변화하는지 볼 수 있다.

우측 하단에 보면 Android/iOS 를 선택 할 수 있는 tab 이 있다.

같은 코드가 환경에 따라 어떻게 바뀌는지를 확인해보자.

이렇게 환경에 따라 React Native 코드는 바뀌기 때문에 내가 return 할 수 있는 값은 view, text 와 같은 특정 component 들이며,

웹과 달리 h1, div, span, paragraph 등은 사용할 수 없다.

예를 들어 위의 코드가 React 코드였다면

이 부분이 

이렇게 쓰였어도 아무 문제가 없었을 것이다. 하지만 React Native 에서는 지정된 component 형식으로 return 되어야 하기 때문에

에러를 뱉을 것이다. 한 번 확인 해보자.

또는 

이렇게 글자만 입력해보자.

<Text> Component 로 렌더되어야한다고 에러 메세지가 뜨는 것을 볼 수 있다.

html 은 잘못된 코드를 집어넣어도 에러메세지가 뜨지 않고 동작하는 반면에 React Native 는 에러를 바로바로 출력해주기 때문에 확인이 용이하다.

이번엔 style 부분을 살펴보자.

React Native 의 디자인이 flexbox 로 가능하다는 것을 알 수 있다.

이것은 앱의 레이아웃을 css 를 사용해서 디자인 할 수 있다는 뜻이다. 최고의 조합이다!

objective-c 또는 swift 로 레이아웃을 짜려면 상당히 복잡하다.

android studio, java 도 마찬가지로 복잡하다. 그렇기 때문에 이 조합은 최고인 것이다!

이 부분을 자세히 보면, 여기서 style 이라는 object 를 만들고 있다.

그리고 StyleSheet 를 만든다. 간단히 view 에 style container 를 붙이고 있는 것이다.

요약 !

1. React Native 를 사용하기 위해서는 'react-native' 를 import 해야한다.

2. html 과 다르게 component 형식으로 render 해서 return 해준다.

3. css 와 비슷한 style 이 있다.

PC 를 끄기 전 까지 잘 동작하던 React Native 프로젝트를 다시 실행시키니 아래와 같은 에러가 발생한다.

ENOSPC 에러는 "There is no space on the drive" 라는 의미이다.

하지만 포맷한지 한 달도 안된 나의 PC ..

아래 명령어로 확인해보니 용량은 넘쳐 흐른다.

용량이 부족하지 않은데도 ENOSPC 가 발생할 경우 , 아래의 명령어로 이를 해결할 수 있다.

리눅스에서는 기본적으로 inotify를 사용하여 디렉토리에서 변경 사항을 모니터링하는데 파일 수의 limit이 걸려있다.

이를 무제한으로 풀어줌으로써 해결.

참고 사이트

https://stackoverflow.com/questions/22475849/node-js-what-is-enospc-error-and-how-to-solve/32600959#32600959

https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers#the-technical-details

이전에는 Local Development Tool  인 expo XDE를 사용했었으나, 

최근 v30.0 부터는 expo XDE 지원이 중단되고 expo CLI 를 사용하라고 되어 있다.

https://expo.io/tools

위 명령어로 설치 가능하다.

(GUI tool 에서 cmd line 만 지원하도록 변경되다니 초심자는 마음이 아프다....)

위의 명령어로 새 프로젝트를 생성해보자.

위와 같이 빈 프로젝트 / react navigation 를 선택할 수 있다.

빈 프로젝트를 선택하고 프로젝트를 생성하면 프로젝트 파일 다운로드가 시작된다. 

이것은 React Native, npm, yarn 등등 여러가지로 build에 필요한 것들이 한 번에 다운이 진행된다.

expo start를 입력하면 폴더를 스캔하고 로딩을 기다리면 프로젝트가 오픈된다.

여기서 두 가지를 확인해 볼 수있다.

첫 번째, 모바일 환경에서 확인하기

두 번째, 시뮬레이터를 사용해서 확인하기

시뮬레이터를 설치하기 귀찮으니 모바일로 확인해 보자.

사용하는 폰에서 expo 앱을 다운하고 QR code 를 스캔하면 자바스크립트를 빌드한다는 메세지를 볼 수 있다.

빈 화면에는 나의 로고를 추가할 수 있다.

첫 번째 빌드는 시간이 조금 소요된다. 이 이후부터는 변경된 Component들을 refresh 하는 것이니 첫 빌드보다는 시간이 덜 걸릴 것이다.

폰에서 빌드된 첫 프로젝트 화면을 확인할 수 있다.

이제 VSC와 프로젝트를 연결해 보자.

[File] - [Open folder] 로 가서 아까 생성한 프로젝트를 연결해주면 됨.

그리고 폰을 흔들어 주면 메뉴가 뜨는데 여기서 Reload나 여러가지를 변경해 줄 수 있다.

여기서 Live Reload 기능은 내가 업데이트를 하면 자동으로 반영해서 리프레시 해주는 것이다.

저장하고 새로고침을 하면 바로!!!!!!!반영된다. 

Hot Reloading 기능은 React Native 의 최고의 기능이라 할 수 있다.

이 기능은 이전 나의 코드를 저장하고 변경된 부분만 골라서 Reloading 하는 것이다.

Live reloading 이 앱 전체를 새로고침했다면, Hot reloading은 전체를 새로고침 하지 않는다.

변경된 그 라인만 새로고침하는 것이다.

이제 코드로 넘어가보자.

"Expo 란"

React Native로 앱을 만드는 것을 도와줍니다. xcode나 Android Studio 를 사용할 필요없이 말이지요.

xcode, Android Studio 없이도, iOS나 Android 를 위한 시뮬레이터를 관리합니다.

expo 가 없었을 때는 React Native로 xcode와 Android Studio 작업을 별도로 해야 했습니다. 

하지만 expo 덕분에 iOS와 Android 작업이 굉장히 편해졌습니다.

또한 expo client를 다운 받아서 손쉽게 앱 테스트까지 가능합니다. 물론 iOS와 Android 둘 다요.

우리가 PC환경에서 개발하고 있는 것을 모바일 환경에서 이 앱을 통해서 테스트 할 수 있어요.

덕분에 xcode, Android Studio, 계정설정 등 귀찮은 과정을 다 생략하고 

메세지보내기, 비디오녹화, 사진찍기 같은 기능을 빠르게 테스트할 수 있어요.

Expo 의 또 다른 장점은 손쉬운 업데이트 입니다.

앱을 publish 하고나서 (code push) , 앱을 업데이트 하고 싶을 때, (Native App-iOS/Android) review process( 유저에게 업데이트를 하게끔 유도하는) 가 상당히 많아요. 하지만 앱을 빌드를 하고, 앱을 릴리즈한 후, 그 수많은 업데이트 승인 프로세스를 스킵하고 내가 원하는 때마다 앱이 스스로 업데이트를 한다면?

앱을 publish 하고 나서 버그를 발견했을 때, 이를 업데이트하기 위해서 앱스토어의 승인을 기다리고 하는 절차가 필요없다는 것입니다.

전체 앱을 앱스토어에 올리는 것이 아니라, 이를 expo client에 push합니다.

그러면 client는 앱을 실행하기 위한 전체 코드를 다운 받아요.

이 말은 내가 코드를 업데이트할 때, 앱을 업데이트하는 것이 아니라, 서버에 있는 코드를 업데이트 한다는 것입니다.

그리고 앱은 실행될 때 마다, 서버에서 새로운 버전의 코드를 다운받는 것입니다.

이 덕분에 애플과 구글플레이의 모든 승인과정을 스킵할 수 있는 것이지요!!!

이를 위해서 expo client를 다운 받으면 됩니다.

"React Native 란"

네이티브 웹 어플리케이션을 빌드하게 도와주는 UI Library 입니다. 

한 가지 분명히 하고 넘어가야 할 것은, React Native는 html이나 css 어플리케이션을 생성하지 않아요.

아파치 코르도바나 아이오닉이 html, css 앱을 만드는 것과 다르죠.

React Native 는 object-c 이고, java 입니다. 

object-c 는 iOS를 위한 것이고 java는 Androrid를 위한 것이지요.

React Native 가 JS라서 헷갈려하는 사람들이 많은데, 

마지막 컴파일 할 때 각각 iOS(object-c) 와 Android(java) 네이티브 코드로 실행이 돼요.

React Native 는 어떻게 동작할까요?

우리는 JSX와 JS로 코드를 작성하고, 그 뒤에서 JS가 object-c나 java로 변환되는 것입니다.

훌륭한 Facebook의 기술로 JS와 objective-c, JS와 java가 연결되는 것이지요.

React Native 코드를 보면 React JS 와 거의 동일합니다.

다만, 차이점은 import하는 package가 'react'가 아니라 'react-native' 라는 것!!

웹에서 div나 span 이 있는 것 처럼 React Native에서는 view, text와 같은 페이스북이 만든 여러 Component들이 있고

Component 들이 Native code로 변환되는 것이지요.

React의 장점

바로 이것이죠. 자바스크립트를 활용할 수 있다 !

덧붙여 아주 큰 커뮤니티를 가지고 있어요.

또한 아주 많은 회사들이 React Native를 사용하고 있어요. (instagram, airbnb, facebook 등)

아래 사이트에서 그 대표적인 사이트들을 확인할 수 있지요.

https://facebook.github.io/react-native/showcase.html

그 중 최고의 장점은 iOS/Android 앱 사이 코드를 공유할 수 있다는 것입니다!!!!!!

조금만 수정하면 iOS/Android 앱을 둘 다 사용할 수 있으니까요.

http://facebook.github.io/react-native/docs/components-and-apis.html

위 사이트에서 React Native Component 들을 확인 할 수 있어요.

현재 버전은 0.57 이네요. 2주마다 FB에서 새로운 업데이트를 합니다.

여기 있는 모든 컴포넌트들은  iOS/Android 둘다 활용 될 수 있어요. 

물론 몇 가지는 iOS에서만, 또는 Android 에서만 사용 가능한 경우도 있지만, 

전반적으로 React Native는 개발하기 쉬워서 많이 활용되고 있어요. 웹사이트를 만드는 것 처럼요. 

레이아웃이 플렉스박스로 구현되는 것도 멋지죠. 모바일을 위한 레이아웃을 플렉스박스로 구현하면 됩니다.

>> 설치할 것

NodeJS

npm

Expo

React Native로 앱을 빌드하기 위한 툴입니다.

https://expo.io/

여기서 tool을 다운로드 할 수 있어요.

Text editor

VSC 

sublime text나 atom 보다 빠르다고 하는데 atom을 써보진 않았네요

React 는 JS 기반이라 JS language 기반 지식이 필요해요

iOS 앱을 만들고 싶으면 mac 이 필수인데, 아이폰 시뮬레이터로 테스트할 것이지만 mac이없으면 최종 테스트가 힘들어요