[React-Native] WebView에서 페이스북 로그인 처리하기

리엑트를 사용하는 이유 중 가장 큰 이유는 아마도 진정한 의미의 one-source-multi-use일 것이다. 패러다임은 크게 바뀌었지만, 그래도 예전에 HTML5가 한창 뜨면서 hybrid web app이 유행한 것과 마찬가지로, PhoneGap이나 Cordova의 그 지속적인 무거움과 세팅에 지쳐가는 사람들이 하나 둘 생각하는 것. 웹 개발 코드를 그대로 앱 개발에도 가져올 수 있다는 생각에서 그렇지 않았을까.

나도 그런 생각으로 사실 리엑트를 선택했다. 개발 기간을 무려 반년이나 늦춰가며 패러다임을 익혔다. 지금와서는 그 생각이 잘못됬다는 생각을 전혀 하지 않는다. 되려, 잘 했던 선택인 것 같다. 백엔드도 자바에서 스칼라로 바꾸는 등, 모든 과정을 Functional하게 만들었는데 그런 과정들이 말이다.

어쨋든, 내가 지금 개발중인 “유라임” 이란 서비스는 리엑트를 중심으로, 로그인에 이메일과 페북 로그인을 제공한다. 시간이 없어서 제품 자체는 react webview 로 URL을 중심으로 돌아가게 해두었다. 다른 것들은 별 이상없이 동작하는데, JavaScript SDK를 기반으로 하는 페이스북 로그인이 동작하지 않는 문제가 있었다. 정확히 말하면, 페북의 popup이 떠서 로그인 프로세스를 완료하면 parent의 window를 close하지 못하는 현상이다.

찾아보니 리엑트 네이티브 웹뷰의 가장 큰 문제는 popup이 제대로 동작하지 않는 것에 있었다. 내부 구동은 잘 모르겠지만, 내 경우는 어떤 팝업도 parent.close()로 동작하지 않았다. 솔루션을 강구하던 끝에, 아래와 같은 내용을 찾았다.

https://codeburst.io/webviews-and-social-authentication-with-react-native-cfecf96ac7d7

위 링크대로 따라하니 Facebook iOS SDK를 설치하는 부분이 결여된 것만 제외하면 대부분이 제대로 동작했다. 결국, React-Native Facebook SDK를 설치하고, 이를 통한 로그인에 바인딩된 호출을 Webview의 그것에서 호출하는 방식이다. Webkit의 함수 핸들러를 사용하는데, 약간 뭐랄까, 브라우저와 네이티브 간의 통신이랄까? 내가 생각해도 이 방식이 맞는 것은 맞는 것 같다. 어차피 아무리 웹뷰를 사용한다 한들, 네이티브 앱으로 뺀다는 자체는 “편의성” 뿐만 아니라 우리가 원하는 어떤 정보들이 분명 모바일 기기 상에 있는 것은 분명하기 때문이다. 예컨데 나는 Apple HealthKit데이터가 너무나도 필요한데, 이를 위해선 결국 네이티브랑 통신해야 한다는 점 등 말이다.

결국, 웹뷰가 만능이라는 생각은 져버려야 한다. 그리고 점진적으로 나도 웹뷰에서 React-Native로 갈 필요가 있다. 사실 기존 소스 그대로 React-Native로 가고 싶었으나 기존의 코드가 워낙 SCSS(CSS)에 dependencies가 큰 상황이라.. 어쩌지 못하고 그냥 둘 수 밖에 없었다. 나중에 유라임 개발 어느정도 완료하고 나면, 그때부터는 열심히 더 개발을 해보려고 한다. 그전까지는 웹뷰를 통해 최대한 개발을 해보고 말이다.