📗 Pre-Project, Day 8

• 마이페이지 수정 페이지 모달창 구현하기
• hero section 라우터 설정해두기
• 카카오맵 키 발급하고 연동시키기
• 지도 검색 페이지에 카카오맵 띄우기
• 지도 라이브러리 사용하기

📗 kakao developers - APP KEY 발급

→ Day 8부터 '지도 검색' 구현에 들어가는데, 카카오맵 사용에 앞서서 먼저 카카오 디벨로퍼스에 앱 연동을 하였다. '애플리케이션 추가하기'에서 앱 아이콘, 앱 이름, 사업자명(팀명), 사이트 도메인만 추가하면 되어 크게 어려움은 없었다.

• 카카오 디벨로퍼스 사이트_링크

→ 다음으로 발급된 앱 키를 .env 파일에 저장해서 사용하였다.

외부 파일(.env)에 환경변수를 정의하여 변수로 받아오는 이유는 보안과 유지보수에 용이하기 때문이다. .env 파일은 프로젝트의 최상위 루트에 파일을 만들어 놓았으며, REACT_APP_KAKAO_KEY = 키 내용 와 같이 작성해주었다.

• 리액트 환경변수 정의_링크

📗 kakao map api 사용하기

• 카카오 맵 API 사이트_링크

→ 우리의 지도 검색 페이지에 카카오 맵을 띄우기 위해 공식 사이트를 읽었다. 가이드에서 어떻게 하면 지도를 띄울 수 있는지 자세하게 안내가 되어 있어 그대로 코드를 작성했다.

이때까지만 해도 지도를 띄우는 것은 쉽게 될 것이라고 생각했다..

📗 생각치도 못한 문제 2가지

→ 공식 문서를 따라 작성하면 쉽게 카카오맵을 우리의 페이지가 띄울 수 있을 것이라 생각했지만, 2가지 문제가 있었다.

🚨. 먼저 공식 문서는 javascript, html 로 안내 되어있어, typescript를 사용하는 우리는 타입을 지정해서 작성해야한다는 것이다 (👉🏻이 부분은 구글링을 통해 비교적 쉽게 할 수 있었다.)

🚨. 다음으로 위의 사진처럼 카카오맵의 일부가 보이지 않는 문제였다.

처음에는 코드를 잘 못 작성하여 일부 map api가 불러오지 않는 것인가 하였지만, 개발자 도구를 열어 확인해보니 css가 적용되고 있던 것이였다. 분명 따로 css를 적용하지 않았는데 왜 그런 것일까 해당 페이지만 보며 한참을 헤매다가 다시 개발자 도구로 해당 부분을 클릭해보니 컬러가 white가 아니라 #FBFBFB 어디서 많이 본 컬러였다

👉🏻 알고 보니 우리가 전역 스타일을 지정한 것으로 저렇게 보이게 된 것이였다.

해당 부분을 수정하니, 카카오맵은 정상적으로 보이게 되었다. 글로 작성하니 금방 문제를 찾고 해결한 것 같지만 이 간단한 오류를 찾는데 3시간 가까이 걸린 것 같다. globalStyles을 확인하자..!

📗 kakao map 라이브러리 사용하기

→ kakao map 라이브러리를 사용하기 위해 공식 문서에서 안내한 방법으로 불러왔다.

clusterer, services, drawing 모두 우리가 기획했던 기능을 구현하기 위해 필요했던 것들이였기 때문이다.

✍🏻 회고

→ 지도 검색 구현 목표를 5일 정도로 잡았는데, 첫날은 카카오맵을 띄우고 라이브러리를 세팅하고, 카카오맵을 우리 화면에 맞게 맞추고 등 이렇게 세팅만 하였는데 시간이 훌쩍 가버렸다. 공식 문서만 읽었을 때는 크게 어렵지 않겠구나 생각했는데 역시나 막상 해보는 것은 다르다.