[웹웹웹/React] 카카오맵 Api 오류 기록하기

 

 안녕하세요? 저번에 카카오맵 Api 쓰다가 눈물이 날 뻔했기 때문에 저번에 만난 오류를 하나씩 기록해보는 시간을 갖도록 하겠습니다. 

 

[1] 웹사이트에 지도가 안 뜨는 문제

00. 잘못된 React 파일 구조 

 이 문제에 맞는 내용인지는 모르겠지만 일단 모든 문제의 근본적인 원인이 되었을 뻔한 요인이기 때문에 적어보겠습니다.

사실 프로젝트 시작할 때에도 정말 고민했던 부분인데, 리액트는 구조가 잘 이해되지 않더라고요.

여러 글을 참고해도 뭔가 찝찝-한 부분이 남아있었습니다.

아니나 다를까... 파일 구조는 교수님께서 지적해주신 0번째 부분입니다. 제 코드를 보시자마자

 

응? 파일 구조... 왜 이렇게 하셨어요?...

 

라고 하시더라고요? 울고 싶었음 

아무튼 제 기존 파일 구조는 아무것도 없이 휑~한 곳에 리액트 프로젝트 시작해서 

프로젝트 파일

 ㄴ public

 ㄴ src

이런식으로 있었거등요

교수님께서 프론트와 백엔드(서버)를 나누라고 하셔서

프로젝트 파일
 ㄴ frontend

    ㄴsrc
    ㄴpublic

 ㄴ backend

이런식으로 다시 설치?... 파일 구조를 변경해줬습니다.

아무튼 그럼. 사실 아직 잘 된 건지는 모루겠어요

(언젠간 리액트 마스터가 된다면... 이런 파일 구조나 컴포넌트 나누는 요소에 대해 기록을 하고 싶습니다...)

 

 

 

01. 잘못된 쿠키 설정 

 일단 생각을 다른 곳으로 돌리고 있던 도중.. 다음날 교수님께서 노션에 충격적인 소식을 전해주셨습니다.

 

오노... 교수님의 노트북에서는 잘 나온다는 사실?

그럼 제 노트북 환경의 개인적인? 문제라고 생각이 바뀌기 시작합니다.

교수님의 조언을 받아 chat GPT. 친구에게 제 상황을 설명하고 물어봤더니 network 창으로 가서 확인하라는 말을 해줬어용. 캐시를 삭제하고 'Disable cache' 옵션을 체크하라네요

 

여기서 'Disable cache' 옵션이란 몰까요?

크롬 웹 브라우저에서 (일시적으로) 캐시 자체를 비활성화 하는 옵션입니다. 

캐시는 데이터나 값을 미리 저장해 놓는 임시 저장소의 개념입니다. 최초에 정보들을 미리 임시로 저장해놓아서 다음에 불러오는 속도는 비교적 빨라지게 됩니다. 그런데 여기서 문제는 사이트를 편집하고 변경했는데 적용이 안 되는 상황이 발생할 수도 있다는 거죠~~ 그래서 개발 도중에 발생할 수 있는 문제를 막기 위해 개발자 옵션에서 해당 옵션을 꺼주라는 겁니다.

 

여러 설정을 변경해보고, 확인해봤지만 결론적으로~ 캐시의 문제는 아니었습니다. Hing

 

 

 

02. Network 에러

캐시 문제가 아닌 걸 확인하고 다시 Network 설정을 들어가봤습니다.

확인해보니 사이트에서 요청을 수행하지 못한다? 이런 오류가 하나 있는 게 아니겠어요? ㅎ...ㅎ

검색해보니 요청된 리소스에 대한 유효한 인증 자격 증명이 없기 때문이라고 나오더라고요.

흠... 다시 말해 api 값이 잘못되어서 ! ! 라는 답을 얻었습니다.

 

Error: 401 Anauthorized

HTTP 401 Unauthorized 응답 상태 코드는 요청된 리소스에 대한 유효한 인증 자격 증명이 없기 때문에 클라이언트 요청이 완료되지 않았음을 나타냅니다. 이 상태 코드가 발생하는 상황에서 사용자 인증을 통해 리소스에 대한 액세스를 허용할 수 있습니다.

(- mdn 웹 문서에 정의된 문장을 가져왔습니다...)

 

아무튼 이제 api가 문제라는 것을 확인했으니 가장 의심스러웠던 환경변수 설정으로 이동했습니다.

api를 노출하는 건 위험하다는 걸 인식했으니 .env 파일에서 지정해줬는데요... 자꾸 잘못된 것 같은 기분이 들었어용

 

...

 

진짜 잘못되어 있었습니다. 머쓱

 

 

사건의 전말..

카카오에서 제공하는 가이드에는 아래와 같이 안내되어있습니다.

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>

감이 오시나요?

src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."

네... 제가 점을 하나 안 지웠더라고요.

데헷...//

 

그래서 바로 지우고 실행시켜줬습니다.

 

헤헤

 

잘떠용

 

 

일단 오늘은 여기까지!~~