[Flutter]Navigator1.0 에서 Navigator2.0 변환 후기(Getx 범벅 프로젝트에 go_router 우겨넣기)

Navigator 2.0?

어느 날엔가 flutter 에 불쑥 나타난 Navigator 2.0. 이름도 생소하여 찾아보면, 더 생소한 선언형(declarative) API (Routing 방식)이라고 소개하고 있다.
기존 Flutter 개발자라면, A화면 위에는 B화면, B화면을 닫으면 A화면이 나와야 한다는 등의 화면 프로세스가 머리에 그려질 것이다. 이걸 push, pop API를 통해 쉽게 구현할 수 있는데, 이를 명령형(imperative) API(Routing 방식) 이라고 한다.
반면, 선언형으로 라우팅을 구성할 때는, 각 화면마다 path 를 지정하고 go_router library 를 사용해 go/push API 로 화면을 이동할 수 있다.
이렇게만 들으면, 기존과 크게 달라진것 같지도 않고 그래서 이 방식으로 변경해야하는지 의문이 들 것이다. 나 역시 Navigator 2.0 방식을 처음 접했을 때, 그래서 바꿔야 하는거야?? 라는 의문에 여러 방면으로 자료를 찾아보고 주변 사람들의 의견을 청취했다.

그리고 고민 끝에 내린 결론은 안바꿔도 된다! 였다.

하지만 나는 바꿀 수 밖에 없었다.

안바꿔도 된다며, 넌 왜 바꿨어?

보통의 앱이라면 바꾸지 않아도 된다. 그러나 내가 잘 쓰고 있던 getx 라우팅에서 go_router 라우팅으로 바꿔야 했던 이유는 단 한가지였다.

• DEEP LINK

내가 만들고 있는 서비스는 웹이 중심이 되기 때문에, 웹의 URL 을 타고 들어오는 사용자들에게 모바일에서도 같은 화면을 보여주어야 했다. 그러나 getx 는 Navigator2.0 을 지원하지 않았고… 우리는 이 기능이 사용자에게 큰 만족감을 줄 것이라 판단하여, 앱 서비스 내의 routing API 를 대대적으로 바꾸는 작업을 진행했다.

빨리 할 수 있다면서욧….

1주일이면 할 수 있다는 CTO 님 말에 (정확히 기억은 안나는데 암튼 저런 말씀 하셨음 😤) 가벼운 마음으로 도전한게 큰 코를 다치게 했다. Stack 방식으로 쌓여 있던 화면을 path 형식으로 바꾼다는건 제법 큰 규모의 업무였다. 또한 go_router 에서 말하는 go/push API 차이점을 몰라 push 해야 할 화면을 go로 보내 Detail 화면이 Root 화면이 되는 오류도 겪고, GetxController 와 상성이 너무 안맞아, GetxController 를 Binding 했음에도 화면이 그려지고 GetxController 가 지워지는 오류도 겪고…

살려죠...

GetX 와 왜이리 안맞아?

정말 힘들었던 점은 화면을 이동할 때 마다 getxController 가 삭제 됐다는 점이었다. 처음엔 내가 잘못 만든 줄 알고 getxController 바인딩 API를 읽어봤다. 결국엔 force 파라미터를 주어 수동으로 controller 를 바인딩하고 지우도록 했다.
으잉, 왜 원치 않는 URL 도 앱이 열려 버리는거야 ㅠㅠ
Deep Link 를 연결 하기 위해 앱 내부에 앱을 실행 할 수 있는 domain 을 설정했더니, 웹앱으로 띄워줘야 하는 URL 도 앱을 실행 해버리는 일이 생겼다;;
원하는 URL 만 앱이 받고 싶다면, Android 는 androidManifest.xml 에서 ios 는 웹 도메인 뒤에 apple-app-site-association path 를 붙여 URL 을 지정할 수 있다. (apple-app-site-association 설정은 웹 개발자님께 부탁드렸다. 감사합니다!🤩)
으악 드디어 끝이다!
1주일을 예상하고 시작한 라이브러리 교체는 약 한 달이 걸려서야 끝이 날 수 있었다.

그래서 Navigator 2.0 추천하냐구요?

서두에도 말했다시피 Deep Link 가 필요한 앱이 아니라면 굳이 굳이 변환할 필요는 없다. 다만, 신규 프로젝트로 시작한다면 추후 Deep Link 로 기능 확장이 이루어질 수 있고 최근 Routing Libray 는 go_router 가 꽉 잡고 있으니 미리 익숙해지는 걸 추천한다.
3달 전에 진행했던 업무였지만, 아직도 그 때 기분이 생생히 기억나는걸 보니 참 인상깊었던 사건이었다고 느껴진다 ㅋㅋㅋㅋ
마지막으로 Flutter 팀에서 만들어준 Deep Link 를 쓰면 왜 좋은지 소개하는 영상 하나 소개하며 글을 마무리 하겠다!

https://youtu.be/KNAb2XL7k2g