프로젝트 소개

• 마인드맵 + 실시간 공동 작업 ⇒ MindSync!!

  

Android 작업 내용 소개

<aside> 🔥 Android의 이번주 기술적 도전

• CRDT 트리 구현
• Socket.io 로 통신하기 ⇒ Socket.io 로 주고받는 내용을 실제 마인드맵에 CRDT를 이용해 적용하기!
• 노드 이동

</aside>

CRDT 트리 구현

예상 작업시간 2시간 / 실제 작업시간 6시간 (페어프로그래밍)

• 백엔드에서는 이미 저번주에 CRDT 알고리즘을 구현한 상태!! 우리는 그 자바스크립트 코드를 그대로, 동일한 알고리즘으로 돌아가도록 CRDT 코드를 Kotlin으로 변환해야했다.
• 실제로 코드양도 많지 않았고, 그래서 예상 작업시간을 2시간으로 잡을만큼 작업이 단순할것이라고 예상!
• but.. 다른언어로 작성된 코드를 알고리즘을 유지한채 언어만 바꾸는것은 생각보다 단순하지 않았다..

  • nullable, val/var 구분이 없었기 때문에 이런 부분을 생각하면서 짜야했다. 결국 로직을 이해해야했다.

  • 코드를 잘못이해해서 로직이 달라진 적도 있었다.

  • 잘못 구현한 부분은 없는지 테스트를 통해 로직을 확인해봤다.

    

    • (crdt test 코드들은 github에 올리면 ktlint에 snake case로 다 걸리길래 일단은 안올라가있다..)
      • 이 문제를 해결하려고 path를 /main/ 로 줘봤지만 왜인지 적용되지 않아서 넘어갔다

Socket.io 통신

예상 작업시간 3시간 / 실제 작업시간 7시간 (페어프로그래밍)

• 처음엔 Okhttp가 WebSocket을 지원해주는걸 보고 Okhttp 코드로 구현했음

  • ⇒ 그러나 WebSocket과 Socket.io는 달랐음.
  • ⇒ 소통이 되지 않아서 Socket.io로 다시 바꿔야 했음.

• 소켓의 url과 nameSpace를 제대로 입력해도 연결이 안되는 현상이 발생 (state가 error)

  

  • 이유는 Android에서 http 접근이 제한되었기 때문이었고, Manifest 파일에서 설정을 추가하니 해결되었다.
    • 참고 링크 https://developer.android.com/about/versions/pie/android-9.0-changes-28?hl=ko

  

• socket이 connect 됐는지, disconnect 됐는지에 따라 다른 동작을 구현해야했다.

  • 그런데 socket의 상태는 다음과 같이 Listener 같은 callback 패턴으로 가지고 올 수 있었다.

    

  • 소켓 상태를 뷰모델에서 flow로 관리하고 싶었고, 다음과 같이 수정해서 ViewModel로 소켓 상태를 관찰할 수 있었다.

    

    

  • 위 코드와 같이 socke의 연결상태를 callbackFlow로 관리해서 socke의 연결상태를 viewModel의 Flow와 일치시켰다.

• 서버의 웹소켓에서 전송된 이벤트도 이벤트에 따라 Listener를 구현해야했다.