[🥸JavaScript]📝깃허브 배포 페이지 카카오 지도 API 값 숨기기➰(gitignore)

📍 진행상황

1️⃣ 클래스 명세서를 바탕으로 스타일시트 분리
2️⃣ 이미지 형식 PNG → SVG 로 최적화
3️⃣ 랜딩 페이지 배포
4️⃣ 프로젝트 구조 작성

🧷 변경사항
카카오 지도 API 값 숨기지 않는 것으로 변경

---

⭐ 프로젝트 구조

📦Landing-Page
┣ 📜index.html
┣ 📂src
┃ ┣ 📂css
┃ ┃ ┣ 📂mobile
┃ ┃ ┣ 🎨base.css
┃ ┃ ┣ 🎨font.css
┃ ┃ ┣ 🎨footer.css
┃ ┃ ┣ 🎨header.css
┃ ┃ ┣ 🎨main-explanation.css
┃ ┃ ┣ 🎨main-gallery.css
┃ ┃ ┣ 🎨main-gallery-more.css
┃ ┃ ┣ 🎨main-information.css
┃ ┃ ┣ 🎨main-map.css
┃ ┃ ┣ 🎨main-subscribe.css
┃ ┃ ┣ 🎨main-top.css
┃ ┃ ┣ 🎨modal.css
┃ ┃ ┣ 🎨scroll.css
┃ ┃ ┣ 📂web
┃ ┃ ┣ 🎨base.css
┃ ┃ ┣ 🎨font.css
┃ ┃ ┣ 🎨footer.css
┃ ┃ ┣ 🎨header.css
┃ ┃ ┣ 🎨main-explanation.css
┃ ┃ ┣ 🎨main-gallery.css
┃ ┃ ┣ 🎨main-gallery-more.css
┃ ┃ ┣ 🎨main-information.css
┃ ┃ ┣ 🎨main-map.css
┃ ┃ ┣ 🎨main-subscribe.css
┃ ┃ ┣ 🎨main-top.css
┃ ┃ ┣ 🎨modal.css
┃ ┃ ┣ 🎨scroll.css
┃ ┣ 📂js
┃ ┣ 📜email-validation.js
┃ ┣ 📜map.js
┃ ┣ 📜modal-handler.js
┃ ┣ 📜scroll-top.js
┃ ┣ 📜side-menu.js
┃ ┣ 📜sticy-header.js
┃ ┣ 📂image
┃ ┣ 🖼️arrow-right.svg
┃ ┣ 🖼️close-menu.svg
┃ ┣ 🖼️facebook.svg
┃ ┣ 🖼️img_0.svg
┃ ┣ 🖼️img_1.svg
┃ ┣ 🖼️img_2.svg
┃ ┣ 🖼️img_3.svg
┃ ┣ 🖼️img_4.svg
┃ ┣ 🖼️img_5.svg
┃ ┣ 🖼️img_6.svg
┃ ┣ 🖼️img_7.svg
┃ ┣ 🖼️instagram.svg
┃ ┣ 🖼️level.png
┃ ┣ 🖼️logo.svg
┃ ┣ 🖼️mail.svg
┃ ┣ 🖼️main-cat.svg
┃ ┣ 🖼️menu.svg
┃ ┣ 🖼️minus.png
┃ ┣ 🖼️modal-background.svg
┃ ┣ 🖼️modal-background-mobile.svg
┃ ┣ 🖼️modal-cat.svg
┃ ┣ 🖼️plus.png
┃ ┣ 🖼️reset.png
┃ ┣ 🖼️scroll-btn-N.svg
┃ ┣ 🖼️scroll-btn-Y.svg
┃ ┣ 🖼️youtube.svg
┣ 📜.gitignore
┗ 📜README.md

💭GitHub 배포 페이지 API 키 값 숨길 수 있나요?

로컬에서는 API 키값도 숨겨지고 지도도 잘 뜨는데
GitHub 배포 페이지에서도 동일하게 API 키값을 숨길 수 있는 방법이 있을까?

 

⚠️ 문제상황

API 키값이 들어있는 자바스크립트 파일을 .gitignore에 추가 후 파일을 숨기면
GitHub 페이지 배포 시 지도 화면이 안 뜨는 문제가 발생하였습니다.

👉🏻 .gitignore 파일을 삭제 후 키값이 보이는 방식으로
적용하니 지도 화면이 잘 작동되었습니다.

 

📚 해결방안

단순히 자바스크립트 파일을 이용하여 키 값을 따로 보관하는 것이 아닌
환경변수(env) 파일로 키 값을 숨길 수 있습니다.

그러나 사실상 어떠한 방식으로든 키 값은 외부에서 확인이 가능하기 때문에
도메인 제약이라는 것이 있는 것이며 도메인이 다르면 이용이 불가능하다.
더 찾아보니 회사에서는 백엔드에서 DB를 이용해 키 값을 숨긴다고 한다!

이러한 이유로 인해 키 값을 숨기지 않는 것으로 진행사항을 변경했고
나중에 부트캠프 백엔드 내용을 더 배우면 DB로 키 값을 숨겨보도록 하겠습니다.

 

📌 그 외의 깃허브 페이지 배포시 카카오 지도 API 오류

1️⃣ 404 에러(=경로 오류)

HTML이나 CSS 파일 경로가 올바르지 않을 때 발생합니다.

위의 이미지와 같은 에러가 뜰 때 html 파일 위치 문제가 유력합니다.

 

2️⃣ HTML 파일 위치

 

⭐ 루트(ROOT)에 html 파일을 위치시켜야 됩니다.

그리고 파일명은 반드시 `index.html`으로

변경시켜야 인식이 되더라구요.

 

HTML 파일을 최상단으로 이동시키기 때문에

원래 다른 곳에 개발을 진행하셨던 분들은

해당 파일 내 자바스크립트나 CSS 파일 등의 경로를

다시 한 번 체크해주셔야 됩니다.

 

3️⃣ 카카오 API 홈페이지 도메인 추가

 

위의 1, 2번 방법대로 다 진행하였는데도 계속 지도 화면이 뜨지 않는 현상이 있어서

지쳐가던 찰나... 머릿 속에 스쳐가는 생각 중 하나가 바로 도메인 변경이었습니다!

이렇게 카카오 API 홈페이지에서 내 애플리케이션 > 앱 설정 > 플랫폼 > Web > 수정을 통하여

`https://깃아이디.github.io`를 등록해줍니다.