한 것

  • 안드로이드 usb 디버깅 테스트 환경 구축

    • adb로 가능
    • 프론트 - adb reverse tcp:3000 tcp:3000
    • 서버 - adb reverse tcp:4000 tcp:4000

  • checkARAvaible

    • AR 사용 가능 상태인지 체크

  • startAR

    • closeBtn
    • Painting Mode
    • Model Mode

잘한것

  • 모바일 디버깅 환경 구축

  • 드디어 AR 기능 시작!

    • 페인팅이랑 모델 모드 추가하였음!

못한것

  • 다양한 색깔 아직 못함
  • 테스크 카드 아직 조금 못 맞춤…

Retrospect

오늘 와서 오후 대부분은 모바일 디버깅 환경구축만 계속 찾아봤던 것 같다.

시도했던 방법들은

  • ngrok 이용

    • 하나밖에 사용 못하고 클라, 서버의 경로를 이에 맞춰야 됨…
    • 결제할까도 생각했음

  • squid man이용

    • 이건 왜 안돼는지 잘 모름…
    • 프록시 서버랑 host파일을 건드리는건데 글쎄…?

  • 같은 공유 아이피로 맥 ip주소 접근하기

    • 이는 서버를 이용 할 수 없다…ㅠ

  • adb 사용

    • usb연결하고 adb 사용하니까 해결~

등이 있고 드디어 AR기능을 구현하였다.

맨 처음 Camera Page에서 구현하려고 하였으나 AR권한 얻는것이 무조건 user interaction으로 얻을 수 밖에 없어서 카메라 페이지로 이동 후 추가로 버튼을 또 클릭해야 AR이 실행이 되었다…

그래서 과감히 Main Page로 옮기기로 결정하고 시작했다.

camera button 클릭 이벤트에서 바로 AR을 시작하는 것으로 적용하였고,

이전에 봐뒀던 레퍼런스를 참고해 Paint Mode, Model Mode를 추가하였다.

처음에 three.js를 사용하기 때문에 vanilla js로 되어있어서 이를 다 react로 바꿔줘야되나 걱정이 엄청 많았지만 멘토님과 켄님과 상의 후 그냥 해도 된다고 해서 (어쩔 수 없음) 다행히 vanilla로 적용하였다. vanilla로 적용하려고 하니까 난이도가 급 낮아져서 후다닥 해버렸다~!

이제 색깔, 사이즈 변경과 텍스트 모드만 추가하면 AR기능은 그냥 끝나겠다 ㅎㅎㅎ

하나의 큰 산을 넘은 것 같아서 좋고, 화이팅하자!

PWA라는 큰 산이 아직 남았기 때문…ㅠㅠ