기존에 리액트+webpack으로 localhost:3000에서 구동하던 프로젝트를 리액트+vite로 마이그레이션하면서 localhost:5173에서 구동되도록 '내 어플리케이션 > 플랫폼 등록’에서 http://localhost:5173을 추가했습니다 (http와 https 구분했습니다).
그러나 아래와 같은 에러가 발생하여 개발자 도구 네트워크 탭을 확인해보니, API 요청이 실패되는 것을 확인했습니다:
TypeError: Cannot read properties of undefined (reading 'maps')
혹시나 3000번 포트에서는 정상적으로 동작하는지 확인하기 위해 vite 설정을 수정해서 3000번 포트에서 구동되도록 해보았습니다. 그렇게 하니 API 요청이 성공적으로 이루어졌고, 정상적으로 동작했습니다.
현재 플랫폼 등록에는 http://localhost:3000과 http://localhost:5173 둘 다 등록되어 있는 상태인데, 왜 5173번 포트에서 오류가 발생하는지 의아했습니다.
그러다가 API key를 확인해보니, 프로젝트에 설정되어 있는 API key와 내 어플리케이션에 나와있는 앱 키가 다르다는 것을 발견했습니다. 달라진 API key로 변경하니 5173번 포트에서도 오류 없이 정상적으로 동작하는 것을 확인했습니다.
그렇다면 궁금한 점이 있습니다.
1. api key 가 멋대로 바뀌는 경우가 있나요?
- 제가 사용한 key 는 REST API key, Javascript API key 입니다.
2. 3000번 포트에서는 왜 이전 api key를 사용해도 정상적으로 작동된 걸까요?
- 혹시 캐시 때문인가 싶어 '캐시 비우기 및 강력 새로 고침’도 시도해봤으나 그래도 3000번 포트에서는 정상적으로 작동되었습니다.
- 3000번 포트에서는 이전 key와 현재 key 모두 API 요청에 성공하지만, 5173번 포트에서는 현재 key만 API 요청에 성공합니다.