항해99 11주차(2021.5.10-5.16) WIL : 5주 과정 실전프로젝트 3주차, 어찌어찌 해내는 지도상 기능 구현, 가배포

이번주는

1. 지도페이지에 접속시 서버와 연결해서 데이터 받고 그걸로 마커 띄우기

2. 정식배포에 앞서 가배포해서 서비스가 구현된 정도를 보여주기.

이 두가지를 목표로 작업을 진행했다.

1. 지도페이지 이야기

지도에서는 무조건!! 이렇게 페이지가 로드되면 마커도 같이 떠야 한다. 그래야 사용자들이 서비스가 사용되고 있다는 걸 알 수 있고 자기도 하고 싶은 마음이 생기기 때문이다.

그러나, 되지 않았다. 

지도페이지가 로드되면 마커는 다음처럼 뜨지 않았다. 

이렇게 나오니, 사용자들이 어 이거 휑하네? (구려서, 아직 서비스 시작 안 했나보다 등등의 이유로) 사용자들이 아직 없나보다 하고 pass 할 가능성이 높으므로 있어서는 안 될일이었다.

 

이 문제를 해결하기 위해서 useEffect안의 마커관련 코드들을 useEffect 밖으로 빼보기도 하는 등 할 수 있는 모든 똥꼬쇼를 다해봤지만 되지 않거나 오류만 나왔다. 그래서 고민고민하다가 마침 스승의날 전날에 튜터님의 도움을 받아 해결했다. 결론만 말하자면 원인은 리액트의 비동기 문제 때문에 서버에서 온 마커데이터가 변수에 할당이 되기 전에 렌더링 되기 때문이었다. 그래서 변수에 할당이 완료 되어 그 변수의 state에 변화가 생겼을 때 렌더링이 다시 될 수 있도록 useEffect의 dependency에 그 변수를 넣어주었다. 그랬더니 지도가 로딩 될 때 마커가 바로 떴다(정확히 말하자면 마커가 없는채로 렌더링 되었다가 재렌더링 되면서 마커가 그려지는데 순식간에 일어나는 일이라 마커가 바로 뜨는 것처럼 보이는 것). 자세한 해결 스토리는 아래 TIL링크를 참고하면 된다. 이 해결이야기 말고도 지도 기능 구현 관련해서 어려움이 많았지만 해결 방법은 꼭 있다(Everything is figuroutable!)는 믿음으로 하나씩 해결해 갔고, 하나씩 해결할 때마다 소소하면서도 큰 기쁨이 있었다.

 

https://heo-dev-0229.tistory.com/30

항해99 75일차 TIL : 지도가 로드될 때, 마커는 바로 뜨지 않는 문제 해결(feat. useEffect)

2. 가배포

3주차에는 구현한 것을 튜터님 앞에서 보여줘야 하므로 가배포를 했다. 가배포라고 한 것은 서비스가 완성되지 않았으므로 정식 배포가 아니고, 서비스용으로 쓸 도메인을 연결하지 않았기 때문이다.

가배포는 늘 하듯이 S3 버킷을 이용해서 배포했는데, 문제가 생겼다. 지도페이지에 접속했지만 지도가 뜨지 않고 온통 하얗게만 나왔다. 원인을 알고 싶어서 개발자도구를 열어보니 '지도를 사용할 권한이 없다는' 메시지가 나왔다(물론 영어로)

갑자기 이런 에러메시지를 접하고 당황했지만, 진정하고 읽어보았다. 읽어보니 Unauthorized라는 말에 답이 있을 것 같아서 잠시 생각해보니, 카카오 개발자도구에 가배포한 사이트를 등록하지 않았던 것이 원인일 것 같았다. 그래서 카카오 개발자도구에가서 가배포한 S3버킷의 URL을 등록해줬다.

카카오 개발자 페이지에 로그인해서 '내애플리케이션'에 들어가서 등록해둔 '지도용 애플리케이션'에 들어가서 '플랫폼'에 들어가면 지도 API를 사용할 수 있는 사이트 도메인을 등록할 수 있다.

이렇게 등록해주면 지도가 정상적으로 나온다.

앞으로 정식 배포용 도메인도 이렇게 지도 API를 사용할 수 있게 이곳에서 도메인 등록하기를 잊지 말자!