React Native Google Map API 회색배경 렌더링 오류

이번 글에서는 다른 사람들은 쉽게 쉽게 사용하던 google map api를 혼자만 빌빌대게 했던 오류에 대해 정리하고 넘어가 보고자 한다.
 
 
내가 google api를 구현하며 가장 고통받았던 부분은 다른 사람이 하는 것처럼 제대로 api key도 등록하고 api도 활성화시키고 react-native-maps 라이브러리를 import 하여 Mapview컴포넌트도 사용한다고 생각했는데 아래 화면처럼 회색 배경으로 이미지가 렌더링 된다는 사실이었다. 
 
 
 

 
 
 
 
가장 먼저 이 문제를 해결하기 위해 시도해보았던 건 아래 공식 문서에서 해당 문제를 해결하는 방법을 본 적이 있었기에 공식문서에서 하라는 방법을 그대로 따라 해 보는 것이었다.
 
공식 문서 링크 - https://github.com/react-native-maps/react-native-maps/blob/master/docs/installation.md

react-native-maps/docs/installation.md at master · react-native-maps/react-native-maps

 
 
 
 

 
 
 
위 사진처럼 해당경로에 google_maps_api.xml 파일을 생성하여 해당 코드를 통해 api key 다른 방법으로 참조시켜 보았지만, 결과는 그대로였다.
 
그렇기에 다른 방법을 시도해 볼 수밖에 없었는데 왜 제대로 렌더링 되지 않는지 특정 에러코드를 뱉어주지 않았고, 이 부분에서 정말 큰 막막함을 느껴 블로그들을 이것저것 뒤져보았지만 결국 해결하지 못하였다. 그러다 특정 에러코드를 로그로 찍어내는 부분에 대해 서칭 해본 결과 android studio의 좌측하단에 있는 'logcat'을 활용하면 앱을 빌드하는 모든 과정에 대한 log를 확인해 볼 수 있다는 사실을 알게 되었다.
 
 
 

 
 
 
logcat을 통해 error를 확인해본 결과 아래 사진처럼 google api 인증 절차가 제대로 이루어지지 않아  GCP console api의 사용량에 어떠한 데이터도 접근되고 있지 않다는 사실을 알게 되었고, 이와 더불어 logcat 오류코드에서 SHA-1 인증코드에 문제가 있다는 로그를 찍어주었기에 디지털 서명정보를 불러왔을 때 '96:'으로 시작하는 SHA-1 인증서가 아닌 '5E:'로 시작하는 인증서가 유효한 인증서였다는 것을 알게 되었다. (logcat 기록은 오류를 처리한 이후 다시 불러와지지 않아 첨부하지 못함 ㅜㅜ)
 
 
 

 
 
 
 
아래는 SHA-1을 발급받을 당시 디지털 서명정보에서 SHA-1 값이 2개가 뜬 화면이다. (근데 처음 '96:'으로 시작하는 걸로 등록하여 지도를 렌더링 할 때에는 제대로 렌더링 되지 않았는데 '5E:'로 시작하는 걸로 바꿔 제대로 지도를 렌더링 시키고, 다시 오류코드를 재현하기 위해 '96:'으로  바꿔었더니 그때는 제대로 지도가 렌더링 되었다,, 뭐지;;) 
 

 
 

 
 
 
추가로 내가 유효한 SHA-1 인증 코드가 '96:'으로 시작하는 코드라고 생각했던 이유는 위의 사진처럼 cmd창에서 SHA-1 인증서를 출력할 때에는 '96:'으로 시작하는 값만 출력되었었기 때문인데, 가급적이면 SHA-1 코드는 아래명령어를 통해 cmd창이 아닌 진행 중인 프로젝트의 android 경로에서 발급받아주는 것이 좋을 것 같다.
 
 

cd android							// android 폴더로 이동
./gradlew signingReport						// 디지털 서명정보를 출력

 
 
 
 
이처럼 구글 지도 api를 활용하는 데에 있어 SHA-1 인증서가 cmd창에서는 1개만 발급되지만 실제 프로젝트의 android 경로에서 명령어를 통해 디지털 서명정보를 출력할 때 2개가 발급되는 경우에는 cmd창에 있는 SHA-1 인증코드 말고 다른 SHA-1 인증코드로 google cloud paltform console의 api key를 발급받아보며 유효하지 않은 SHA-1 인증코드를 등록한 건 아닌지도 확인해 보면 좋을 것 같다.

(자세한 react native에서 google map api를 사용하는 방법에 대해선 이 전의 글에서 정리해둠)