Jetson Nano, PCA9685, L298N, DC-Motor 4륜구동 자동차

Jetson Nano를 얹어서 완성된 자동차

Jetson Nano를 충동적으로 구입하고 (http://practical.kr/?p=125) 테스트를 해본 후 뭘 만들까 고민을 하다가 자동차를 만들어 볼까? 생각을 했다. 전년도에 라즈베리파이를 이용해서 자동차를 만들려고 구매해 두었던 4륜 자동차 바디가 그대로 있어서 여기에 젯슨나노를 얹어 보기로 했다.

실패한이유

근데 생각해 보니 그때 라즈베리 기반의 자동차를 만들다 그만둔 이유가 라즈베리파이의 Digital I/O 의 숫자가 부족하다는걸 알고 나서였다. 바퀴하나를 구동하려면 모터드라이브 컨트롤러를 써야하는데 주로 L298N을 많이 사용한다. 대략 아래와 같은 연결로 모터 두개를 움직일 수 있다.

전원부를 제외하고 모터 4개를 구동하려면 12개의 DIO를 사용해야 한다. 라즈베리에서 IO를 모두 끌어쓰면 대충 맞긴한데 이러면 다른 작업을 전혀 할 수가 없다. 그래서 주로 2륜 구동으로 자동차를 만드는게 아닌가 하는 생각을 하고 바퀴를 새로 사기가 싫어서 그냥 그만 두고 말았다.

PCA9685

이렇게 생겼다

그래도 젯슨은 뭔가 좀 다르겠지 싶었지만 라즈베리와 젯슨나노의 IO Pin 구조는 거의(?) 동일하다. 그런데 스터디중 Nvidia – Jetbot 에서는 PCA9685 라는 컨트롤러를 쓰고 있었다. 젯슨과 I2C로 통신을 하고 16개의 dio 채널을 가진 PWM 컨트롤러 였다. 대략 아래의 그림과 같이 문어발(?)을 만들 수 있다.

https://cdn-shop.adafruit.com/datasheets/PCA9685.pdf

이걸 활용하면 젯슨나노에서는 4핀의 I2C 입출력 만으로 4개의 모터를 구동할 수 있고 나머지핀들은 다른용도로 활용할 수도 있다. 택배비 포함해서 2개에 만원정도니까 비싸지도 않다.

검색을 해보면 주로 서보모터를 운용할때 사용하는데 DC모터를 제대로 컨트롤 하려면 아래 그림과 같이 L298N과 함께 연결해줘야 한다.

자동차의 하체

하체의 중간에 PCA9685를 놓고 앞뒤로 L298N 모터 컨트롤러를 연결했다.모터 구동을 위한 별도의 전원은 9V 건전지를 사용했는데 조립중 테스트에서는 별 문제 없이 바퀴가 잘 돌았는데 다 조립하고 중량이 무거워지니 전후진이 안되었다. 그래서 9V 건전지 두개를 병렬로 연결했다. 움직이긴 하는데 힘이 없었다. 역시 전기 자동차는 배터리가 중요하다. 한개 더 달던지 해야 한다.

하체 조립중
하체 조립완료

차체조립

조립후

짧은 목표가 조립 & 이동 이었기 때문에 가지고 있던 이런저런 부품들을 모아 모아 모니터, 젯슨나노 & 모니터 전원을 위한 충전 배터리 향후 사용할 카메라까지 조립을 했다.

소프트웨어

검색을 해보니 PCA9685를 활용하는 대부분의 셈플들이 서보모터 구동용이라 찾기가 쉽지는 않았는데 다행히 원래 보드 제작사에서 만든 파이썬용 라이브러리가 있었다. 링크참조

https://github.com/adafruit/Adafruit_CircuitPython_Motor

https://cdn-learn.adafruit.com/downloads/pdf/adafruit-16-channel-servo-driver-with-raspberry-pi.pdf

위 라이브러리를 기반으로 아래와 같은 코드를 만들어 자동차를 움직여 봤다. 잘 움직인다.

import time
import busio

from board import SCL, SDA
from adafruit_pca9685 import PCA9685
from adafruit_motor import motor

i2c = busio.I2C(SCL, SDA)

pca = PCA9685(i2c, address=0x40)
pca.frequency = 100

pca.channels[0].duty_cycle = 0xFFFF
pca.channels[5].duty_cycle = 0xFFFF
pca.channels[6].duty_cycle = 0xFFFF
pca.channels[11].duty_cycle = 0xFFFF

motor1 = motor.DCMotor(pca.channels[1], pca.channels[2])
motor2 = motor.DCMotor(pca.channels[3], pca.channels[4])
motor3 = motor.DCMotor(pca.channels[8], pca.channels[7])
motor4 = motor.DCMotor(pca.channels[10], pca.channels[9])

print("Forwards slow")
motor1.throttle = 0.5
motor2.throttle = 0.5
motor3.throttle = 0.5
motor4.throttle = 0.5
time.sleep(3)

print("Forwards")
motor1.throttle = 1
motor2.throttle = 1
motor3.throttle = 1
motor4.throttle = 1
time.sleep(3)

print("Backwards")
motor1.throttle = -1
motor2.throttle = -1
motor3.throttle = -1
motor4.throttle = -1
time.sleep(3)

print("Backwards slow")
motor1.throttle = -0.5
motor2.throttle = -0.5
motor3.throttle = -0.5
motor4.throttle = -0.5
time.sleep(3)

print("Stop")
motor1.throttle = 0
motor2.throttle = 0
motor3.throttle = 0
motor4.throttle = 0
time.sleep(3)

print("Spin freely")
motor1.throttle = None
motor2.throttle = None
motor3.throttle = None
motor4.throttle = None

pca.deinit()

위 소스와 키입력으로 전, 후, 좌, 우로 이동하는 소스를 아래 링크에 공유 했다.

https://github.com/bipark/jetson-nano-car

실제 젯슨 나노의 GPU를 기반으로 자동차와 함께 할 수 있는 일들이 많을것 같은데 그건 다음에 해보기로 하고 오늘은 여기까지…

Jetson Nano, 전원, Wifi, Case, Setup, Inference

엔비디아의 Jetson Nano를 구입했다. 최근 좀 저렴한 2GB 모델의 릴리즈 소식을 들었지만 기존 4GB 모델을 구입했다. 충동적으로 구입했기 때문에 특별한 사용 목적은 없고 그저 어떤 성능이 나오는지 Development Kit 수준이 어느정도 인지 알고 싶었다.

구입은 아래 링크에서 했는데, 그동안 읽었던 글들에서 기본 모델에는 Wifi 없고 4A짜리 전원 공급장치가 필요하다고 해서 구입하는김에 Wifi 장비와 별도의 4A 전원공급장치, 그리고 케이스도 구입했다. 케이스를 별도로 구입한 이유는 아래에 보면 알게 되겠지만 Wifi 안테나가 꽤 큰 사이즈인데 케이스가 없으면 마땅히 붙여놓을 곳이 없어보여서 였다.

https://www.devicemart.co.kr/goods/search?keyword_log_flag=Y&search_text=jetson&q=jetson&x=0&y=0

위와 같이 두개의 디바이스로 분리 할 수 있다. 나중에 조립을 마치고 MicroSD를 좀 더 큰 사이즈로 바꾸려고 보니 완전히 다시 분해를 해야만 했다. 라즈베리파이가 그렇게 쉽게 SD를 바꿀수 있는것에 비해 너무 불편했다. 설계 미스!

그리고 아래 Wifi 모듈 커넥터는 위의 두개 디바이스 사이에 숨겨져 있다. 이것도 설계 미스! 너무 불편하다.

아래 동영상을 참조해서 Wifi를 연결했다. 다행히 소프트웨어 셋팅을 해줄 필요는 없다. 자동으로 인식 했다. 다른 블로그에서는 다이소에 가면 오천원짜리 USB 랜카드를 연결해도 된다고 했다. 그게 나을 수도 있다. 랜카드와 안테나 가격이 3만원이다.

조립을 하는 김에 가지고 있던 라즈베리파이 카메라를 연결했다. 아무래도 동영상 인식에는 카메라가 꼭 필요할것 같다.

조립을 마치고 Micro-USB에 전원을 연결해서 부팅을 했는데 계속해서 전원이 부족하다는 메세지가 나와서 배럴잭으로 4A 아답터를 통해서 전원을 연결했는데도 연결이 되지 않았다. 알고보니 배럴잭 뒤에 있는 J48 핀을 연결해야 배럴잭을 통해서 전원이 연결되는 것이었다. 4A 아답터 연결후에는 전원이 부족하다는 메세지는 나오지 않았다.

배럴잭이 있는 별도의 직류전원 장치 4A – 7200원

메탈 케이스 28,000원 – 후면

케이스가 그리 효율적이지 않은 구조였지만

조립해놓고 나니 그래도 케이스를 사길 잘했다는 생각이 들었다.

일단 조립완료 하고 부팅을 해봤다.

아래 링크에서 시작하면 된다. 순서대로 따라서 MicroSD를 준비해서 디바이스에 꽂고 부팅하면 우분투 화면을 만날 수 있다.

https://developer.nvidia.com/embedded/learn/get-started-jetson-nano-devkit

실제 DNN 기반의 추론테스트를 위한 라이브러리 셋팅은 아래 링크에서 코드와 같이 진행해야 하는데 전체 설치까지 대략 1시간이 넘게 걸린다. 학습모델 선택을 바꾸면 좀 더 걸릴 수도 있다.

https://github.com/dusty-nv/jetson-inference/blob/master/docs/building-repo-2.md

$ sudo apt-get update 
$ sudo apt-get install git cmake libpython3-dev python3-numpy 
$ git clone --recursive https://github.com/dusty-nv/jetson-inference 
$ cd jetson-inference 
$ mkdir build $ cd build 
$ cmake ../ 
$ make -j$(nproc) 
$ sudo make install 
$ sudo ldconfig

설치가 완료되면 아래 링크의 코드를 이용해서 실제 추론 테스트를 해볼 수 있다.

https://github.com/dusty-nv/jetson-inference/blob/master/docs/imagenet-example-python-2.md

셈플로 제공되는 곰돌이 이미지는 당연히 잘 인식되었고 다른 이미지를 이용해서 추론을 해보니 꽤 빠르게 잘 인식되었다.

ESP32, MicroPython, MQTT

아래와 같은 삽질을 했다. 삽질은 기록이라고… 대충 정리함

ESP32에서 MicroPython을 언젠가 한번 사용해봐야지 하고 있었는데 기왕 하는 김에 MQTT까지 연결해봤다.

  1. ESP32 에 MicroPython을 설치한다.
  2. ESP32에서 MicroPython으로 MQTT Client를 만든다
  3. 맥북에 MQTT 서버를 설치한다
  4. 맥북에서 Python을 이용해서 MQTT Client를 만든다.
  5. ESP32 – 맥북사이의 MQTT Client와 데이터를 주고 받기 테스트

ESP32에 MicroPython 설치하기

ESP32에 MicroPython을 설치하려면 firmware를 다운 받아서 설치해야 한다. 다운로드는 아래 링크에서 받을 수 있다. 가지고 있는 하드웨어에 맞게 버전을 선택해서 다운 받으면 된다.

https://micropython.org/download/esp32/

다운받은 파일을 설치하기 위해서는 esptool을 사용할 수 있다.

$ pip install esptool

https://github.com/espressif/esptool

디바이스가 연결된 포트를 확인하고 (ex: /dev/tty.SLAB_USBtoUART) 아래와 같이 firmware를 설치한다.

기존데이터를 지우고
$ esptool.py --port /dev/tty.SLAB_USBtoUART erase_flash 

설치한다
$ esptool.py --chip esp32 --port /dev/ttyUSB0 write_flash -z 0x1000 esp32-idf3-20200902-v1.13.bin

ESP32에 MQTT Client 만들기

개발은 VSCode를 이용해서 Pymakr 라는 Extension을 설치하고 코드를 쓰고 업로드와 실행 테스트를 할 수 있다. 설치하면 VSCode 아래 메뉴바에 Run, Upload등의 메뉴를 확인할 수 있다.

Pymakr은 아래 링크 참조
https://marketplace.visualstudio.com/items?itemName=pycom.Pymakr

아래 코드는 https://randomnerdtutorials.com/micropython-mqtt-esp32-esp8266/ 에서 참고 했다. boot.py는 ESP32 가 시작할때 Wifi에 연결하고 main.py에서 MQTT Client를 생성해서 데이터를 수신한다.

boot.py

import time
from umqttsimple import MQTTClient
import ubinascii
import machine
import micropython
import network
import esp
esp.osdebug(None)
import gc
gc.collect()

ssid = 'SSID'
password = 'PASSWORD'
mqtt_server = '192.168.0.7'
client_id = ubinascii.hexlify(machine.unique_id())
topic_sub = b'hello'
topic_pub = b'notification'

station = network.WLAN(network.STA_IF)
station.active(True)
station.connect(ssid, password)

while station.isconnected() == False:
   pass

print('Connection successful')
print(station.ifconfig())

main.py

def sub_cb(topic, msg):
    print((topic, msg))

def connect_and_subscribe():
    global client_id, mqtt_server, topic_sub
    client = MQTTClient(client_id, mqtt_server)
    client.set_callback(sub_cb)
    client.connect()
    client.subscribe(topic_sub)
    print('Connected to %s MQTT broker, subscribed to %s topic' % (mqtt_server, topic_sub))
    return client

def restart_and_reconnect():
    print('Failed to connect to MQTT broker. Reconnecting...')
    time.sleep(10)
    machine.reset()

try:
    client = connect_and_subscribe()
    client.publish(topic="hello", msg="Send By ESP32")
except OSError as e:
    restart_and_reconnect()

while True:
    try:
        new_message = client.check_msg()
        if new_message != 'None':
            client.publish(topic_pub, b'received')
        time.sleep(1)
    except OSError as e:
        restart_and_reconnect()

맥북에 MQTT 서버 설치

MQTT 서버는 상세정보는 아래 링크에서 참조 할 수 있고 주로 IOT 장비의 네트웍을 구성하는데 많이 사용한다. 나는 brew를 이용해 모스키토(Mosquitto)를 설치했다.

https://medium.com/@jspark141515/mqtt%EB%9E%80-314472c246ee

서비스 설치
brew install mosquitto

서비스 실행
brew services start mosquitto

서비스 중지
brew services stop mosquitto

맥북에서 송, 수신을 확인 할 수 있는 MQTT Client

Python용 MQTT 패키지를 먼저 설치한다.

https://pypi.org/project/paho-mqtt/

$ pip install paho-mqtt

Subscribe.py

import paho.mqtt.client as mqtt

def on_connect(client, userdata, flags, rc):
print ("Connected with result code " + str(rc))
client.subscribe("hello")

def on_message(client, userdata, msg):
print ("Topic: ", msg.topic + '\nMessage: ' + str(msg.payload))

client = mqtt.Client() 
client.on_connect = on_connect 
client.on_message = on_message 
client.connect("192.168.0.7", 1883, 60) 

client.loop_forever()

Publish.py

import paho.mqtt.client as mqtt

mqttc = mqtt.Client("python_pub") 
mqttc.connect("192.168.0.7", 1883) 
mqttc.publish("hello", "Hello Billy")
mqttc.loop(2)

Publish.py를 실행하면 Subscribe.py와 ESP32에서 “Hello Billy” 메세지를 수신하는 것을 확인 할 수 있었다.

내가 개발에 사용한 플러터 패키지

플러터 (Flutter)를 이용해서 앱을 개발하는데 패키지는 필수불가결한 요소입니다. 물론 온전히 기본제공하는 위젯(Widget)과 기능만으로 목적하는 기능을 구현할 수도 있겠지만 기본으로 지원하지 않거나 특별한 디자인과 기능을 원하는 요구사항을 만족시키기는 기본 패키지만으로는 매우 어렵습니다. 하지만 공개된 패키지를 잘 사용하면 쉽고 빠르게 목표물에 도달 할 수도 있습니다.

이 글에서는 내가 스캐니(Scanny – http://practical.kr/?p=71) 를 개발하면서 사용한 패키지들을 용도 위주로 정리했습니다. 여러 패키지들을 테스트해서 검토하고 실제 사용해서 릴리즈까지 해봤으니 개발자들에 도움이 되길 바랍니다.

패키지 검색 & 설치

플러터 패키지 검색은 https://pub.dev 에서 키워드를 입력하면 됩니다. 검색 결과에서 Popularity 숫자가 높은것을 선택하면 비교적 안심하고 쓸 수 있습니다. 하지만 자신에게 맞는것을 확인 하려면 결국 설치 해보고 테스트 해보는것이 최선입니다. 일반적으로 github 리파지터리에 셈플 프로젝트가 있으므로 다운 받아서 실행해보고 자신의 프로젝트에 적용하는 것이 좋습니다.

설치는 검색 결과에서 Installing 탭에 있는 dependencies아래에 있는 패키지명과 버전을 복사해서 자신의 프로젝xm 안에 pubspec.yaml 파일에 붙여넣고 터미널에서 아래와 같이 입력하면 설치됩니다.

> flutter pub get

그리고 실제 사용할 코드에서 아래와 같이 Import 해서 사용합니다.

import 'package:url_launcher/url_launcher.dart';

pub.dev 에는 패키지가 굉장히 많습니다. 기존에 iOS/Android를 지원하던 많은 오픈소스 패키지를 Flutter에 맞도록 포팅했기 때문에 거의 필요한건 웬만하면 다 있다고 생각하면 될것 같습니다.

개발에 사용한 패키지 목록

아래는 최근 릴리즈한 스캐니(Scanny)를 개발하며 사용 피키지 목록과 개략적인 설명

Provider - https://pub.dev/packages/provider

상태관리에 거의 필수적으로 쓰는 패키지
image_picker - https://pub.dev/packages/image_picker

사진촬영 과 사용자 앨범에서 이미지를 가지고 올때 쓴다. 파라메카 옵션을 카메라와 앨범을 선택 할 수 있고 해상도 조정도 가능합니다
http - https://pub.dev/packages/http

http 통신을 위해 사용합니다. Rest Api- GET, POST들을 이것으로 했습니다. 또한가지 많이 사용하는 패키지가 Dio(https://pub.dev/packages/dio)가 있는데 장단점이 있고 내가 보기엔 Dio가 조금 더 좋아보이지만 http를 먼저 사용하기 시작해서 그냥 이걸로 쓰고있습니다. 다음엔 Dio를 고려해볼 생각입니다.
photo_view - https://pub.dev/packages/photo_view

이미지 조회용 - 여러장의 이미지를 좌우 스와이프로 조회 할 수 있습니다. 이미지 앨범을 만들때 유용합니다.
modal_progress_hud - https://pub.dev/packages/modal_progress_hud

통신중이거나 처리중에 모달로 대기화면을 만들때 사용했습니다. 이런류의 프로그래스 컨트롤은 워낙 많지만 단순한게 제일 좋다고 생각합니다.
event_bus - https://pub.dev/packages/event_bus

컨트롤러 사이에 데이터를 주고 받을때 쉽게 사용할 수 있는 데이터버스. 사용상에 주의할 점은 싱글톤으로 개발해야 한다는 점입니다. 이벤트버스 클래스를 별도로 만들고 한번만 생성되도록 만들어야 데이터를 주고 받을 수 있습니다. 
toast - https://pub.dev/packages/toast

제목 그대로 토스트 - 간단한 메세지를 뿌립니다. 역시 심플한게 최고죠
path_provider - https://pub.dev/packages/path_provider

폴더명을 얻어올때 사용했습니다. 파일 읽기, 저장할때. pub.dev에 보면 Favorite아이콘이 붙어 있는 패키지가 있는데 이것도 그렇습니다. 좋은거라는 말이겠죠? ^^;
image_crop - https://pub.dev/packages/image_crop

말그대로 이미지 잘라내는 용도
flutter_cache_manager - https://pub.dev/packages/flutter_cache_manager

캐시된 파일을 읽어서 앨범에 저장하거나 공유하는 용도로 사용했습니다.
공유(Share)는 과거 버전에서는 소셜별로 기능별로 구현해야 했지만 최근 프레임워크가 통합관리되어 개발은 편해졌지만 커스터마이즈가 어려워진건 불만요소. 하지만 개발은 편합니다. 사용자 인터페이스도 일관성이 있고.. 아래 두가지 패키지가 미묘하게 기능이 달라서 두개를 한꺼번에 쓰게 되었습니다. 여기도 중국 개발자들이 많네요 중국어 코맨트... 영어로 좀 쓰지 말입니다. 번역기 좋은데 ㅋ

share_extend - https://pub.dev/packages/share_extend
esys_flutter_share - https://pub.dev/packages/esys_flutter_share
keyboard_attachable - https://pub.dev/packages/keyboard_attachable

UI 만들면서 좀 어려웠던것이 키보드와 뷰의 연동이었는데 앱의 키보드가 올라오면 하단의 버튼바가 같이 올라와야 하는데 기존에 디자인과 충돌이 있어서 이걸 사용했는데 구현방법에 차이가 있어서 디자인에 일관성이 나오지 않아 좀 애를 먹었지만 해결은 했습니다.  
easy_localization - https://pub.dev/packages/easy_localization

다국어 지원 - 다국어용 패키지가 많은데 이게 비교적 사용하기 쉽습니다. 언어별로 json 파일을 만들면 됩니다. 이말은 다른건 그보다 복잡하다는 말입니다. 스캐니는 일단 영어, 한글만 지원했습니다. 
url_launcher - https://pub.dev/packages/url_launcher

주어진 URL Schemes에 따라 브라우저를 띄우거나 이메일 클라이언트를 자동으로 호출해 줍니다. 매우 편해요.
package_info - https://pub.dev/packages/package_info

프로젝트 정보 - 버전, 패키지 이름, 빌드번호 등을 자져올 수 있습니다.

플러터 패키지는 잘 쓰면 매우 유용합니다. 하지만 너무 많고 옥석을 골라내기가 힘들기 때문에 꽤 많은 시간을 투자해서 나만의 패키지들을 구성하는게 중요한것 같습니다. 위에 사용한 패키지들의 실제 동작은 아래 링크의 앱 – 스캐니(Scanny) – 에서 확인 할 수 있습니다.

https://apps.apple.com/kr/app/id1529856835

박병일

스캐니(Scanny) – 아이폰용 스캐너앱

저는 개인적으로 개발언어를 스터디 하는 방법으로 마켓 릴리즈를 목표로 제품을 하나 만들어가며 스터디하는 것을 좋아합니다. 목적이 분명하면 생각보다 빠르게 프레임워크의 구조와 내용을 파악할 수 있습니다. 플러터(Flutter)를 스터디하기 시작하면서 벌써 세번째 앱을 앱스토어 릴리즈 했는데요. 앞의 두개는 이것을 만들면서 앱스토어에서 플러터가 어떻게 업로드 되고 돌아가는지를 확인하기 위해 짬짬이 만든것 이었습니다.

스캐니(Scanny)는 폰카메라를 이용해 문서를 촬영해서 자동으로 문서를 인식하고 사진내에서 문서만 추출해서 노이즈를 제거하는 등의 전처리를 거치고 최종적으로 OCR을 위한 깨끗한 문서를 만들어 문자인식(OCR)을 하거나 PDF로 변환하는 기능을 가진 앱입니다.

책을 단위별로 스캔하기위하여 폴더 시스템의 UI를 만들어 책단위 혹은 챕터 단위로 스캔을 할수도 있습니다. PDF 출력을 위하여 리스트에서 전체를 선택하거나 일부 그리고 드랙 & 드롭으로 순서를 바꾸어 PDF를 만들 수도 있습니다.

촬영한 문서는 OCR 문자인식 기능을 이용하여 한글/영문을 자동인식하여 텍스트로 변환하여 저장하고 공유할 수 있습니다. 향후 더 많은 언어를 지원할 계획입니다.

https://apps.apple.com/kr/app/id1529856835

앱은 무료 아닙니다. 4,900원입니다. 광고 없습니다. 현재 목표는 앞으로 10년간은 업그레이드를 하려고 생각하고 있습니다. 아래 링크에서 확인하세요.


둘째가 만들어준 아이콘

이 앱은 플러터를 이용해 개발되었기 때문에 당연히 안드로이드를 지원합니다. 플레이스토어에 런칭도 할 수 있습니다. 앞의 테스트 앱에서 테스트 해봤습니다. 하지만 앱의 기능상 카메라에서 문서 인식 기능이 매우 중요한데 안드로이드에서 약간 불안정한 상황이 발생하고 있어서 좀더 보완을 거친후에 업로드 하려고 생각중입니다.

위의 글은 스토어 런칭 광고성 글입니다. 여기서부터는 개발자 입장입니다. 플러터(Flutter)는 모바일 개발을 위한 다할나위없이 훌륭한 도구입니다. 기본적으로 아이폰과 안드로이드를 동시에 지원하는 멀티 플랫폼 개발툴이구요. 참! 최근에는 베타상태 이긴 하지만 웹과 윈도우도 지원하기 시작했습니다. 그리고 프레임워크가 수년째 접어들면서 패키지 라이브러리와 개발자 생태계도 아주 훌륭해 졌습니다.

개인적으로는 지난 수년간 React & Vue 들을 통하여 상태(State)와 그 상태의 변경이 익숙해져 있었기 때문에 여럽지 않게 적응 했을 수도 있지 않았을까 싶지만 네이티브만 개발하던 개발자라면 Provider와 State 에대한 개념이 약간(?)은 걸림돌이 되지 않을까 싶기도 합니다만 매우 좋은 도구이고 충분히 투자 할만한 가치가 있다고 생각합니다.

Change Log

2020-11-13 : V1.0 Initial Release
2020-11-19 : V1.1.0
컬러문서 스캔 기능 추가

iOS/Swift – iCloud Drive에 파일 업로드 하기

2011년 4월에 애플 앱스토어에 업로드한 Fake Location이 어뷰징 요소가 있다는 이유로 2020년 4월에 스토어에서 강제로 퇴출당했다. 이걸 마지막으로 앱스토어에 판매중인 앱이 한개도 남지 않게되어 새로운 앱을 하나 만들기로 했다.

몇일간 남는 시간을 쪼개어 그럭저럭 보이스를 녹음하고 플레이하는 작업을 하고 있었는데 알수 없는 문제에 봉착했다. 녹음된 보이스 파일은 아이폰에 저장되어야 하고 옵션으로 iCloud Drive에 저장되어야 해서 iCloud에 저장하는 기능을 추가 했는데 파일은 분명히 저장이 되고 원격 플레이까지 정상적으로 되는데 iCloud Drive에 폴더와 파일이 보이지 않는 문제가 발생했다.

알고보면 간단한 문제였지만 문제라는게 항상 그렇듯 모르면 괴로울 뿐이다. 게다가 코드 문제라기보단 설정(?) 문제라면 해결후 허무함까지 동반한다.

아이폰 로컬 폴더 얻기

아이폰 로컬 도큐먼트 폴더를 얻는 방법은 아래의 코드로 저장할 파일을 생성 할 수 있다. 생성된 audioFilename을 AVAudioRecorder에 넘겨주면 녹음이 완료된후 파일이 생성되는 것을 확인 할 수 있다. 아래 코드의 결과로 대략 이런 로케이션이 얻어진다.

file:///var/mobile/Containers/Data/Application/9F57DEC2-3A40-40AA-9EC5-5D104E94053F/Documents/voice.m4a

let saveFilename = "voice.m4a"
let path = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask).first
let audioFilename = path!.appendingPathComponent(saveFilename) 

iCloud Drive 원격 폴더 얻기

원격 폴더를 얻는 방법은 약간의 설정작업을 해야한다. Xcode의 Signning & Capability탭에서 +Capability 탭을 선택하여 iCloud 사용설정을 해야한다. 물론 이걸 하려면 개발자 계정이 필요하다.

설정방법

위와 같은 설정을 해주면 .entitlement 파일이 생성된다. 그리고 아래 코드를 이용하면 iCloud Drive 폴더에 파일을 생성 할 수 있다. 파일명이 아래처럼 생성된다. 레코딩 결과가 생성된 파일명으로 잘 저장되었다.

file:///private/var/mobile/Library/Mobile%20Documents/iCloud~com~*****/Documents/voice.m4a

let saveFilename = "voice.m4a"
let path = FileManager.default.url(forUbiquityContainerIdentifier: nil)?.appendingPathComponent("Documents")
let audioFilename = path!.appendingPathComponent(saveFilename) 

그런데 폴더가 보이지 않는다

iCloud Drive에 파일을 업로드 했으니 당연히 나의 맥북 Finder 에 iCloud Drive에 오디오 파일이 보여야 하는데 보이지 않았다. 여기에 보이지 않으면 파일을 복사하거나 이동 시킬 수 없다. 난감하네… 그래서 3일을 까먹었다. 결론적인 이야기지만 클라우드에 파일을 업로드 하고 사용자가 손대지 못하게 하려면 여기까지만 하면 된다. 물론 아이폰의 설정 – iCloud – 저장공간관리 – (앱) – 에서 삭제 할 수는 있다.

문제의 해결은 매우 간단했다. info.plist에 아래와 같은 Key값을 추가 해주면 된다. 물론 key는 각자의 것을 사용해야 한다. 개발자가 코드로 문제를 해결 못하고 설정때문에 몇일씩 까먹고 나면 매우 허무해진다. ^^; 이건 아래의 stackoverflow 링크의 중간쯤에 ‘난 이렇게 해결했어’ 가 있었는데… 글타래가 길어서 대충 읽고 넘어가느라 못본거 였던것 뿐이었다. 결국 3일째 모든 대답들을 다시 꼼꼼히 읽고 다 시도해 보고서야 문제를 찾을 수 있었다. 교훈은 좀 더 꼼꼼해 져야 한다.. 정도?

<key>NSUbiquitousContainers</key>
<dict>
    <key>iCloud.net.redacted.docTest</key>
    <dict>
        <key>NSUbiquitousContainerIsDocumentScopePublic</key>
        <true/>
        <key>NSUbiquitousContainerSupportedFolderLevels</key>
        <string>Any</string>
    </dict>
</dict>

https://stackoverflow.com/questions/25203697/exposing-an-apps-ubiquitous-container-to-icloud-drive-in-ios-8

이 설정을 추가하면 아이폰의 파일앱 그리고 계정이 연결된 맥북 또는 다른 컴퓨터에서 생성된 폴더와 파일을 확인 할 수 있다.

이 프로젝트는 현재 대략 20% 정도 진행되었다. 시작만 해놓고 마무리는 하지 못한 일들이 너무 많아서 이제는 외부에 공표를 해가며 스스로를 채찍질을 해보려고 하고는 있지만 과연 마무리를 할 수 있을지는 잘 모르겠다. 블로그 한개 썻으니 그나마 보람이 있는것일까?

React Native 다시 공부하기

React Native는 이미 2017년에 버즈아트에서 나름 빠르게 도입해서 프로젝트에 성공적으로 적용했던 적이 있었다. 링크참조(http://practical.kr/?cat=6) 그때 버전이 v0.45 수준이었는데 3년이 지난 지금도 React Native는 v0.61에 머물러 있다. 대체 언제쯤 v1.0을 내놓으려나…

2020년 현재 여전히 크로스(멀티)플랫폼(iOS, Android)을 지원하는것은 매력적이고 그동안 꽤 많은 기술적 진보가 있었을 것이라는 생각을 염두에 두고 다시 한번 공부를 시작해 볼까? 하는 생각에 연습용 프로젝트를 하나 만들기 시작했다. 이글을 쓰는 이유는 프로젝트를 만들고 보니 기억 나는게 하나도 없어서 뭘 했는지 정리하기 위함이다.

모바일 멀티플랫폼

잠시 멀티 플랫폼 이야기를 하고 넘어가보자. 최근 2~3년 사이에 모바일 플랫폼 개발과 관련한 프레임워크는 전통적인 Swift기반의 Xcode, Java & Kotlin 기반의 Android Studio와 더불어 Dart 기반의 Flutter, C# 기반의 Xamarin 등이 쏟아지며 개발툴 전성시대가 열린것 같다. 성능도 많은 향상을 보여서 거의 네이티브 성능을 따라오는 수준까지 도달한 것으로 보인다. 어떤것을 선택해도 크게 문제가 없을것으로 생각된다. 하지만 역시 가장 좋은것은 손에 익은것이 아닐까 싶다.

나 개인적으로는 오래도록 사용해온 Obj-C 기반의 Xcode가 가장 좋지만 이건 멀티 플랫폼이 아닌지라(iOS만지원) 제외하고 최근 2~3년간 JavaScript 특별히 Vue.js / Node.js를 사용해 오고 있었기 때문에 JS 기술을 그래도 활용할 수 있는 React Native에 끌리는건 당연한 선택일 수 밖에 없다. 하지만 처음 접하는 모바일 멀티 플랫폼 개발이라면 Dart/Flutter이 좀더 낫지 않을까 하는 생각인데 이유는 구글의 개발자 문서 지원이 매우 좋고 React Native에 비하여 좀 더 좋은 실행 성능을 내고 있다고 알려져 있기 때문이다.

Getting-Started

프로젝트 시작은 여기서 한다. Expo를 이용하는 방법과 Cli 툴을 이용하는 방법이 있는데 나는 Cli 툴을 이용하여 프로젝트를 생성 했다. Expo를 쓰면 폰에 직접 앱을 올려서 바로 결과를 볼 수 있고 Cli툴을 쓰면 Xcode 및 각종 도구를 깔아서 시뮬레이터에서 테스트를 할 수 있다. 나중에 스토어용으로 빌드를 하기 위해서 후자의 방법으로 설치하는 것이 좋다. 하지만 간단한 테스트는 Expo가 훨씬 편하다.

https://reactnative.dev/docs/getting-started

Navigation

앱을 만들려면 기본적으로 메뉴 시스템이 있어야 한다. 모바일 시스템에서 메뉴 시스템은 보통 Tabbar – Navigation, Drawer – Navigation 두가지 중에서 선택하는 것이 일반적인 선택이다. 한동안 Drawer 메뉴가 유행을 하다가 최근 다시 Tabbar 시스템이 유행인것 같아서 나는 Tabbar 시스템 기반으로 했다.

네비게이션 라이브러리는 ReactNavigation을 사용했다. 아마 개발자들이 가장 많이 사용하는 메뉴 시스템이고 Tabbar와 Drawer를 모두 지원한다.

https://reactnavigation.org/docs/getting-started

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import Home from './src/Home';
import Profile from './src/Profile';
import Settings from './src/Settings';

const Tab = createBottomTabNavigator();

export default function App() {

  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={Home}/>
        <Tab.Screen name="Profile" component={Profile}/>
        <Tab.Screen name="Settings" component={Settings}/>
      </Tab.Navigator>
    </NavigationContainer>
  );
}

코드의 결과로 아래와 같은 메뉴 시스템이 나왔다. 메뉴에 아이콘을 넣거나 좀더 예쁘게 꾸미려면 https://reactnavigation.org/docs/tab-based-navigation 를 참조하자.

Rest API Communication

Rest API 서버에서 데이터를 가지고 와서 목록 형태로 보여주는 것은 axios를 이용한다. https://github.com/axios/axios 를 참조한다. 컴포넌트가 마운트 될때 API 서버에서 데이터를 가져와서 state에 저장했다.

import axios from "axios";

...

componentDidMount() {
 axios.get("https://jsonplaceholder.typicode.com/users")
  .then(res =>{
   this.setState({ persons:res.data });
  });
}

FlatList – 목록보여주기

모바일 화면의 대부분은 목록(List)이다. 상하스크롤을 통하여 데이터 리스트를 조회 하고 화면을 선택하면 상세화면으로 진입하는 구성이 대부분이다. 이 리스트는 스크롤이 계속되는 특성상 화면에 보이는 만큼만 메모리 관리를 하지 않으면 너무 많은 메모리를 사용해서 앱을 다은 시키는 원인이 된다. React Native의 FlatList는 자동으로 메모리 관리를 해주기 때문에 필수적으로 쓰는 컴포넌트이다.

대략 아래와 같이 연결한다.

function Item({item, navigation}) {
 return (
   <View>
    <Text>{item.name}</Text>
   </View>
 )
}
....

render() {
 return (
  <View>
   <FlatList
    data={this.state.persons}
    renderItem={({item})=><Item item={item}/>}
    keyExtractor={item=>item.id}
   />
  </View>
 )
}
FlatList 결과화면

상태관리(Store)

React Native의 상태 관리는 Redux로 하는것이 기본이다. 하지만 Redux의 구조와 사용법이 직관적이지 않아서 좀더 직관적으로 쓸 수 있는 MobX를 사용했다. Redux와 MobX의 비교와 관련해서 우아한 형제의 기술블로그에 좋은 자료가 있어서 링크에서 자세한 정보를 얻을 수 있다.

https://woowabros.github.io/experience/2019/01/02/kimcj-react-mobx.html

MobX는 매우 직관적으로 Store를 사용할 수 있는데 이것은 마치 Vue.js의 Store 처럼 단순하게 사용할 수 있다. 사실 그에 비하면 Redux는 너무 복잡한 구조를 가진것이 사실이다. 대략 아래와 같은 코드를 이용하여 두개의 페이지에서 동일한 값의 증가를 확인 할 수 있다.

import {observable} from 'mobx';

class CounterStore {
 @observable counter = 0;
 
 increment() {
  this.counter++;
 }

 decrement() {
  this.counter--;
 }
}
export default new CounterStore();
import React, {Component} from 'react';
import { observer } from 'mobx-react';
import { StyleSheet, Text, View, Button } from 'react-native';

import CounterStore from '../../mobx/store'

@observer
export default class HomeScreen extends Component {
 render() {
  return (
   <View >
    <Text style={{fontSize: 60}}>
     {CounterStore.counter}
    </Text>
    <Button
     title="Increase"
     onPress={() => CounterStore.increment()}
    />
   </View>
  )
 }
}

Source Code – GitHub

아래 링크에서 위의 셈플 프로젝트의 소스코드는 아래 링크에서 다운로드 할 수 있다.

https://github.com/bipark/react_native_study

관련 링크

React 스터디 – https://ko.reactjs.org/docs/hello-world.html

Components – https://reactnative.dev/docs/activityindicator

Navigation – https://reactnavigation.org/docs/getting-started

Axios – https://github.com/axios/axios

Awesome React Native – https://github.com/jondot/awesome-react-native

리액트 프로젝트에서 MobX 사용하기 – https://velog.io/@velopert/MobX-2-%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90%EC%84%9C-MobX-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-oejltas52z

React에서 Mobx 경험기 (Redux와 비교기) – https://woowabros.github.io/experience/2019/01/02/kimcj-react-mobx.html

카카오 로그인 모듈 – https://github.com/react-native-seoul/react-native-kakao-login

OpenCV를 이용한 Face Detection & Blur

Face Detection & Blur

OpenCV 공부중에 주말 프로젝트로 만들어본 Go 언어 기반 얼굴인식 기능 및 블러 처리 프로그램입니다.

얼굴인식 – 이미 학습된 Caffe 기반의 딥러닝 얼굴인식 모델을 활용하여 인식하고 인식된 얼굴 부분을 블러 처리하여 웹요청에 응답합니다.

API 서버 – Go Gin 기반으로 웹 프론트에 용청에 응답을 처리

프론트 – Vue.js & Axios 등으로 Go 서버에 이미지를 전송하고 결과를 받아서 화면에 뿌려줍니다.

Open Source

이 프로젝트의 소스코드는 아래 링크를 참조하세요.

https://github.com/bipark/go-opencv-caffe-facedetect-blur

의존성

실행방법

GraphQL + MySQL 데이터 가져오기 스터디

네이버에 개발자 모집 공고를 보다가 React Native 개발자를 구하는데 GraphQL 기반의 백엔드 프로그래밍 역할도 필요하다는 것을 보고 놀랐다. 세상이 진짜 변하긴 했다.

물론 프론트 개발자가 백엔드를 동시에 작업할 수 있으면 매우 생산성이 높고 문서작업 & 협의 과정 없이 빠르게 서비스를 만들수 있다. 나는 Node.js 와 Vue.js를 이용해서 그런방식으로 작업을 하고 있는데 매번 프론트에서 엔드포인트가 필요할때마다 Node에서 api를 만들고 그걸 받아서 쓰고 있지만 프론트에서 이걸 끝내는 방법이 없나 하는 생각은 늘 하고 있던 차였다.

GraphQL이 이걸 해줄 수 있다고 해서 공부를 해봐야지 한게 벌써 두해를 넘기고 있기도 하고 여러가지 문서를 읽어 봤지만 역시 만들어 보는게 최고라… 그게 뭔지는 대충 아래 링크로 퉁치고 Hello World 와 좀 더 실제적인 Mysql DB에서 데이터를 읽어와서 뿌려주는데까지 한번 해보기로 했다.

Node.js & Express.js 로 서버를 구성하면 빠른방법으로 Hello World를 찍어 볼 수 있다.

> express --view=pug
> npm install express-graphql graphql

Express Generator를 이용해 프로젝트를 생성하고 npm으로 express-graphql, graphql을 설치했다.

var express = require('express');
var graphqlHTTP = require('express-graphql');
var { buildSchema } = require('graphql');

var app = express();

var schema = buildSchema(`
  type Query {
    hello: String
  }  
`);

var root = {
  hello: ()=>{
    return 'Hello World'
  },
};

app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true
}));

코드를 실행하고 http://localhost:3000/graphql 에 접속하면 다음과 같은 화면을 볼 수 있다. 이것은 app.use() 에서 graphiql 옵션을 true로 셋팅하면 나타나는 화면으로 GraphQL의 테스트 인터페이스이다. 여기서 api를 미리 테스트 해볼 수 있다. 자동완성 기능도 지원한다.

Hello World는 찍었다. 대충 이제 다 알았다…는 아니고 현재 가장 많이 쓰고 있는 DB인 MySQL에 연결해서 데이터를 가져오는데 까지 해야한다. Node에서 MySQL 연결과 기타 과정은 생략하고 아래와 같은 코드를 작성 했다.

var app = express();
var schema = buildSchema(`
  type Query {
    user: [User]
  }
  
  type User {
    name: String
    age: Int
    sex: String
  }  
`);

var root = {
  user: ()=>{
    return new Promise(function (resolve) {
      pool.query('select * from users', function (err, res) {
        resolve(res);
      });
    });
  },
};

app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true
}));

의의 코드를 실행한 결과로 아래와 같은 화면을 얻었다.

분명 데이터는 나왔는데 뭔가 잘못한게 아닌가 싶은 생각이 들었다. 타입도 서버에서 선언해 줘야 하고 쿼리도 서버에서 실행시킨다면 이게 기존의 REST API와 무었이 다른가? 그저 한개의 엔드 포인트를 쓴거 말고 다른게 있나 싶은 생각이 들었다.

그래서 좀 더 검색을 해봤다. 아래 링크에서 하나의 엔드포인트가 중요한 차이점이며 Query의 요청과정에서 파라메타의 차이로 결과를 다르게 가져올 수 있다는 점이 중요하다고 알려줬다.

https://www.holaxprogramming.com/2018/01/20/graphql-vs-restful-api/

결론

나는 이걸 어떻게 써야 하나 하는 문제가 고민이었는데 어차피 현재 Node.js 를 서버로 쓰고 있기 때문에 기존의 REST API에 GraphQL을 더 붙여 써도 괜찮지 않을까 하는 생각을 했다.

개발자들이 뭔가 바꾸고 싶으면 아주 갈아엎는(?) 나쁜 습성이 있지만 그러지 않아도 된다면 엔드 포인트 한두개씩 GraphQL로 바꿔도 무방할지 않을까 싶다.

소스코드는 아래 링크에 있습니다.

https://github.com/bipark/graphql_study