이제 map 페이지에 구글 맵 api 를 추가해보려고
구글 맵을 쓰는 이유는 별거 없다
그냥 색상 추출 때 구글 api를 썼으니까 번거롭게 다른거 가입하고 할 필요 없이 구글로 다 처리하려고
1. 프로젝트 선택 및 생성
- 설정: Google Cloud Console에 접속
- 생성: 화면 상단 프로젝트 선택창에서 프로젝트를 생성하거나 선택
2. API 라이브러리 활성화
- 확인: 화면 상단 검색창에 "Library"(라이브러리)를 검색해 들어간다
- 설정: "Maps JavaScript API"를 찾아 클릭한 뒤, 파란색 [사용] 버튼을 눌러 기능을 켜기
3. 사용자 인증 정보(API 키) 생성
- 확인: 왼쪽 메뉴에서 [사용자 인증 정보] 메뉴로 이동
- 생성: [+ 사용자 인증 정보 만들기] -> [API 키]를 클릭하여 키를 만듦
- 가져옴: 생성된 API 키(
AIza...)를 복사해서 안전한 곳에 저장
4. 결제 계정 연결 및 활성화
- 확인: 화면 상단의 [활성화] 배너를 클릭하거나 [결제] 메뉴로 이동
- 설정: 카드 정보를 등록하여 결제 계정을 연결
처음 사용한다는 전제조건까지 고려한 사용법
이제 리액트 터미널에서
npm install @react-google-maps/api
설치방법은 생략
컨트롤 c로 서버를 멈추고 진행
1. Spring Boot 서버 설정 (MapController.java)
서버는 리액트에서 요청한 페이지 번호를 받아 공공데이터 API에 전달하는 징검다리 역할
@RequestParam을 사용하여 리액트가 보내는 pageNo를 받기
numOfRows=213은 전체 박물관, 미술관 데이터 갯수
조립된 URL로 데이터를 가져와 리액트에 그대로 리턴
2. React 프론트엔드 설정 (Map.js)
리액트에서는 지도가 깨지지 않도록 로딩 시점을 제어하고, 왼쪽에는 미술관 리스트, 오른쪽에는 지도 레이아웃을 적용
useJsApiLoader를 사용하여 구글 맵 스크립트를 안정적으로 불러온다
이걸 사용하게 된 이유는
처음 지도 화면을 리액트로 구현했을 때
리스트에 있는 박물관들을 눌러서 좌표를 이동했을 때 지도가 제대로 보이지도 않고 아무리 기다려도 로딩이 되지 않았다
이 현상을 해결하기 위해서 구글 맵 만드는 과정을 정리한 블로그랑 깃헙을 쭉 찾아봤다
거기서 useJsApiLoader 라는 단어를 꽤 많이 봤었고, 이걸 설명해주는 건 별로 없어서 제미나이한테 물어봐야 했다useJsApiLoader는 @react-google-maps/api 라이브러리에서 제공하는 React 훅(Hook)으로, 구글 지도 자바스크립트 API 스크립트를 안전하고 효율적으로 로드하기 위해 사용
이걸 사용하면 로딩이 빨라질까 싶어서 일단 알려주는대로 써봤는데 확실히 로딩이 빨라지긴 했다
일단 최종 화면
리스트에 있는 박물관을 클릭하면 지도 좌표가 바뀐다
페이지네이션으로 모든 박물관 정보를 가지고 왔다
