Cloud Computing On Demand

iOS 의 경우 Mac 과 함께 디버깅 하기 위한 궁합 및 도구가 편리하게 제공되고 있어서 어렵지 않게 Wireshark 로 기기의 패킷을 캡쳐할 수 있었습니다. 하지만 안드로이드 운영체제는 가상 인터페이스로 붙이는 방법이 없는 것처럼 보였고, 단말을 루팅하여 tcpdump 를 돌리는 것과 같은 방식들이 제안되고 있었습니다.

시험 기기로 확보한 기기가 삼성의 단말이고 제 소유가 아니다보니 루팅을 하는 것도 좀 꺼려지더군요. 그래서 찾아본 것이 바로 NOX Player 였습니다. 게임을 즐기는 사람들이면 안써본 사람이 없다는 NOX Player. 저는 게임을 하기 위해서도 아니고 안드로이드 기기의 패킷을 확인하기 위해서 NOX Player 를 처음 사용하게 되다니...

adb 를 통해 구동중인 NOX Player 의 안드로이드에 연결하기

우선 NOX Player 를 이용하여 적당한 안드로이드 이미지를 구동시킵니다. 기본적으로 Virtual Box 이지만 구동할 수 있는 이미지와 안드로이드 버전이 제한적인 것 같아 좀 아쉬웠습니다. API 버전이 안드로이드 운영체제 버전마다 차이가 있고, 이 차이가 실제 앱 구동에도 영향을 주는 것으로 알고 있습니다.

여튼, 안드로이드 운영체제가 잘 구동되면 NOX Player 로 62001 포트를 이용하여 연결이 가능해 집니다. 터미널에서 adb 를 이용하여 로컬호스트의 62001 포트로 연결을 맺어보겠습니다. 아래와 같은 명령을 사용하시면 되며, 정상적으로 연결된 경우 connected to 127.0.0.1:62001 이라는 메세지를 볼 수 있습니다. 

% adb connect 127.0.0.1:62001
adb server version (32) doesn't match this client (41); killing...
* daemon started successfully
connected to 127.0.0.1:62001

물론 iOS X Mac 과 달리 이렇게 연결했다 하여 바로 쉽게 Wireshark 로 직접 패킷을 볼 수 있는 것은 아닙니다. NOX Player 를 통해 TCP 덤프를 캡쳐해 줄 tcpdump 와 네트워크로 파일 내용을 전송해줄 netcat 을 복사하여 사용해야 합니다. 이 파일들을 이용하여 1) 파일로 떨군뒤 로컬 환경으로 복사하여 분석하거나 2) netcat 으로 전송 포트를 열어 adb 를 경유하여 wireshark 로 실시간으로 덤프를 보는 방법의 두가지 옵션을 쓸 수 있게 됩니다. 

안드로이드 기기로 tcpdump 와 netcat 파일 전송

우선 안드로이드 기기에서 구동되는 tcpdump 와 netcat 바이너리를 찾아야 합니다. 유통되는 왠만한 버전을 사용하는 것은 별 문제 없을거라 생각합니다. tcpdump 와 netcat 은 아래의 각 사이트에서 최근 버전을 다운로드 받으시기 바랍니다. (TCPDUMP : www.androidtcpdump.com/android-tcpdump/downloads, netcat : 실행파일만 받는게 좋은데... 경로를 잊어버렸습니다 ;; 찾는대로 다시 업데이트 해두겠습니다. )

안드로이드에서 사용할 유틸리티 2종이 준비되면 adb 의 push 명령을 이용하여 바이너리 파일을 NOX Player 의 안드로이드로 전송하도록 하겠습니다. 아래와 같이 가상 sdcard 의 경로 하위의 Download 폴더로 파일을 전송했습니다. 

% adb push netcat /sdcard/Download && adb push tcpdump /sdcard/Download
netcat: 1 file pushed. 27.1 MB/s (92156 bytes in 0.003s)
tcpdump: 1 file pushed. 48.3 MB/s (1889632 bytes in 0.037s)

/sdcard/Download 폴더로 전송한 파일을 다시 /system/xbin 경로로 이동시키도록 하겠습니다. 이 작업을 위해서는 adb 를 이용해 안드로이드 쉘에 접근해야 합니다. 아래와 같이 adb shell 명령을 입력하면 62001 포트를 통해 안드로이드 쉘에 접근할 수 있습니다. 일반적인 터미널에서처럼 cp 명령으로 파일을 옮기고, chmod 를 통해 실행 권한을 부여하도록 하겠습니다. chmod u+x 해도 무방합니다.

% adb shell
dream2lte:/ # cp /sdcard/Download/netcat /system/xbin/
dream2lte:/ # cp /sdcard/Download/tcpdump /system/xbin/
dream2lte:/ #
dream2lte:/ # chmod 755 /system/xbin/netcat
dream2lte:/ # chmod 755 /system/xbin/tcpdump

tcpdump 를 실행하여 pcap 파일로 패킷을 캡쳐하자

이제 패킷 덤프를 뜰 준비가 되었습니다. 일반적으로 사용하는 tcpdump 명령들을 대부분 사용할 수 있기 때문에 필요에 따라 옵션을 조합하시면 되겠습니다. 안드로이드의 모든 인터페이스로 들어오는 패킷을 캡쳐하여 /sdcard/Download 경로에 pcap 파일로 떨구는 명령의 예제는 아래와 같습니다. 캡쳐를 중지하려면 ctrl-c 등으로 중지 시그널을 보내시면 됩니다. 참 쉽죠?

dream2lte:/ # tcpdump -i any -n -s 0 -w /sdcard/Download/1557.pcap
tcpdump: listening on any, link-type LINUX_SLL (Linux cooked), capture size 262144 bytes
^C73886 packets captured
88490 packets received by filter
1864 packets dropped by kernel

캡쳐한 pcap 파일을 로컬로 전송하여 분석해보자

이제 adb 의 옵션중 pull 을 이용하여 파일을 안드로이드 환경에서 로컬 환경으로 복사해 오도록 하겠습니다. . 소스, 목적지의 순서로 파라메터를 넣으면 되겠죠? 아래는 그 예제입니다. 캡쳐를 오랫동안 하지 않았지만 포트에 상관없이 모든 패킷을 캡쳐하다보니 양이 많습니다.

안드로이드 시뮬레이터의 성능에 영향을 줄 수 있으니 로컬 환경에서와 달리 tcpdump 를 사용할 때는 포트와 같은 조건을 꼼꼼히 넣어주시는 것이 좋습니다. 캡쳐된 pcap 파일이 로컬 환경으로 복사가 완료되면 wireshark 를 이용하여 파일을 열고 패킷을 분석하시면 됩니다. 

% adb pull /sdcard/Download/1557.pcap ./
/sdcard/Download/1557.pcap: 1 file pulled. 22.1 MB/s (96239260 bytes in 4.150s)

netcat 을 이용하여 실시간으로 패킷 분석하기

파일로 이용하여 패킷을 분석하는 것은 왠지 절차가 좀 복잡해 보입니다. 그리고 실시간으로 변화를 관찰할 수 없어 캡쳐가 잘못된 경우 다시 동일한 과정을 반복해야 합니다. 정상적인 사람인 우리들은 이런 불편함을 참을수가 없습니다 ㅎㅎ 이때는 netcat 을 이용해서 캡쳐되는 파일들을 특정 포트로 노출시켜 wireshark 가 받도록 하는 방법을 사용할 수 있습니다. 

1) 우선 터미널을 두개 띄웁니다. 하나는 adb shell 로 안드로이드에서 tcpdump 를 실행하는 목적이고, 다른 하나는 adb forward 로 로컬 환경의 wireshark 로 데이터를 보내는 목적입니다.

2) 1번 터미널 - 조금전과 마찬가지로 안드로이드 쉘에서 tcpdump 를 실행해야 합니다. 이때, 캡쳐된 내용을 파일로 떨구지 말고 파이프(|)를 사용하여 netcat 이 내용을 전달 받도록 하겠습니다. netcat 는 특정 포트 (아래에서는 12345) 로 전달 받은 내용을 전송하게 됩니다. tcpdump 에서 이 포트의 트래픽은 캡쳐하지 않도록 not port 12345 를 파라메터에 넣었다는 점도 참고해 주세요!

2) 2번 터미널 - 이제 로컬 쉘에서 adb forward 명령을 이용해 시뮬레이터의 프로토콜:포트를 로컬의 프로토콜:포트로 전달하겠습니다. 맥 환경에서의 netcat 인 nc 명령으로 해당 포트를 수신하고, 파이프를 통해 wireshark 로 수신된 내용을 전달하는 명령입니다. 

// 터미널 #1 (안드로이드 쉘에 접근) - tcpdump 로 패킷 떠서 netcat 으로 내보내기
% adb shell
% # tcpdump -i any -n -s 0 -w - not port 12345 | netcat -l -p 12345
tcpdump: listening on any, link-type LINUX_SLL (Linux cooked), capture size 262144 bytes
^C2606396 packets captured
2779150 packets received by filter
164234 packets dropped by kernel

// 터미널 #2 (로컬 쉘) - netcat 이 내보내는 것 받아서 wireshark 로 넘기기
% adb forward tcp:12345 tcp:12345 && nc 127.0.0.1 12345 | wireshark -k -S -i -

다소 번거롭지만 NOX Player 를 이용하여 안드로이드 기기의 패킷을 캡쳐하고 로컬의 wireshark 로 전달하여 분석하는 두가지 방법을 살펴보았습니다. 기기를 루팅하지 않고 패킷을 캡쳐할 방법이 없기 때문에 시뮬레이터로 부담 없이 패킷을 분석해 보시기 바랍니다. 

지난 포스팅에서 우리는 Firestore 를 Flutter 프로젝트에서 사용하기 위하여 패키지를 추가하는 방법을 살펴보았습니다. Firestore 로부터 데이터를 받아오기 위하여 StreamBuilder 위젯을 통해 Firestore 의 스냅샷을 전달받는 코드를 추가했습니다. 전달된 데이터를 ListTile 위젯에 넣기 위해 DocumentSnapshot 타입을 이용했습니다.

Firestore 를 연동하여 UI 에 저장된 데이터를 표현하는 코드를 모두 추가했으니 이제 실제로 데이터를 넣고 빼는 과정에 필요한 코드를 만들어 보겠습니다. To-Do 앱이기 때문에 1) 할 일 추가, 2) 한 일 삭제, 3) 한 일로 기록 정도의 세가지 동작이 필요할 것 같습니다. 각각 _addTodo, _deleteTodo, _toggleTodo 메서드로 정의하여 _TodoListPageState 클래스에 넣어보겠습니다. (이 예제는 모두 <오준석의 플러터 생존코딩> 에 수록된 예제를 기반으로 합니다)

추가 메서드 만들기

먼저 UI 로 입력받은 할 일을 Firestore 에 등록하는 추가 메서드를 살펴보겠습니다. 삭제나 토글 메서드는 Firestore 에 이미 등록된 데이터를 다루는 메서드이고 추가 메서드는 새로운 데이터를 등록하는 메서드이기 때문에 메서드의 파라메터가 조금 다릅니다. (라고 적지만 그냥 나누어 봤습니다)

  void _addTodo(Todo todo) {
    // setState(() {
    //   _items.add(todo);
    //   _todoController.text = '';
    // });
    Firestore.instance
        .collection('todo')
        .add({'title': todo.title, 'isDone': todo.isDone});
    _todoController.text = '';
  }
  

Firestore 를 이용할 때와 이용하지 않고 State 만 이용할 때의 차이를 보기 위해 setState 를 호출하는 코드를 주석처리만 해보았습니다. 이미 선언한 Firestore 전역 객체가 있기 때문에 코드에서 보이는 것처럼 데이터를 쓸 콜렉션과 필드 값을 지정하는 것이 코드의 전부입니다. UI 의 위젯에 입력한 title 과 isDone 값을 할당하는 것으로 충분합니다. 

삭제, 토글 메서드 만들기

삭제와 토글 메서드는 추가 메서드와는 달리 메서드의 입력 파라메터로 앞서 이야기 되었던 DocumentSnapshot 타입을 받게 됩니다. 삭제하거나 토글해야 하는 데이터가 Firestore 의 데이터이기 때문입니다. 실제 삭제하거나 업데이트(토글) 할 데이터의 고유한 ID 를 알아야 합니다. Firestore 는 NoSQL DB 이기 때문에 데이터 Row 를 Document 라고 부릅니다. 흔히 NoSQL 을 도큐먼트 DB 라고도 부르는 것을 아마 들어보셨을 겁니다. 

  void _deleteTodo(DocumentSnapshot doc) {
    // setState(() {
    //   _items.remove(todo);
    // });
    Firestore.instance.collection('todo').document(doc.documentID).delete();
  }

  void _toggleTodo(DocumentSnapshot doc) {
    // Parameter : 'todo' variable of 'Todo' type
    // setState(() {
    //   todo.isDone = !todo.isDone;
    // });
    Firestore.instance
        .collection('todo')
        .document(doc.documentID)
        .updateData({'isDone': !doc['isDone']});
  }

이번에도 Firestore 객체가 제공하는 delete(), updateData() 메서드를 이용했습니다. 코드 자체는 무척 간단하죠? 주의해야 할 것은 Firestore 는 이러한 트랜잭션 하나하나를 카운트하고 무료 구간을 넘어가면 과금이 시작됩니다. 큰 규모의 데이터를 가지고 코드를 만들어 보고 있다면 트랜잭션 수가 얼마나 카운트 되었는지 중간중간 체크해 보시는 것이 좋습니다. 

시뮬레이터를 이용하여
실제 앱으로 확인해보기

이제 코드가 준비되었습니다. Xcode 가 제공하는 시뮬레이터를 이용하여 지금까지 만든 코드를 실행해보고 실제로 Firestore 에 데이터가 잘 적재되는지를 살펴보겠습니다. VS Code 에서 F5 를 누르고 <Start iOS Simulator> 를 선택하여 코드를 실행하면 됩니다. 참 쉽죠? 

시뮬레이터의 구동은 늘 시간이 걸리죠. 하지만 무사히 구동이 되었고 미리 등록해 둔 4개의 도큐먼트를 잘 가지고 와서 화면에 리스트로 출력을 해주었습니다. 가만히 보니 버튼 이름에 오타가 들어갔군요? 오타를 코드에서 수정하고 저장하면 Hot Reload 되어 수정된 내용이 바로 반영이 됩니다. Vue 로 Frontend 개발하는 느낌이라 무척 편리하네요!

이번에는 할일을 추가하고 Firestore 에 업데이트가 잘 되는지 확인을 해볼까요? 

UI 에서 입력한 새로운 데이터가 문제 없이 Firestore 에도 업데이트 된 것을 확인할 수 있었습니다. 이렇게 세번의 포스팅을 통해 Mac 환경에서 VS Code 를 이용하여 iOS 시뮬레이터에 배포하여 시험해보는 과정까지를 살펴보았습니다. 이유는 잘 모르겠지만 Flutter 와 관련된 책들이 대부분 안드로이드 환경에 대한 이야기가 중심이 되어 있어 iOS 로 배포해보고싶다는 생각에서 작업을 진행해 보았습니다.

이제 Flutter 를 이용해서 실제로 써먹을만한 앱을 기획해서 마켓에 배포해 볼 시간입니다. 100세 시대, 지속적으로 벌이를 할 수 있는 방법이 필요한 시대입니다! 강력 추천해 드리는 <오준석의 플러터 생존 코딩>은 아래의 링크를 참고하시기 바랍니다! 그 사이에 에이콘에서 번역서가 한 권 더 나온거 같으니 한 번 읽어봐야겠습니다!

본 포스팅은 제휴마케팅을 통해 소정의 수수료를 지급받을 수 있습니다