Fast Blinking Hello Kitty
 
close
프로필 배경
프로필 로고

야무진 코딩

🖥️ JavaScript · 2024. 8. 22. fullscreen 넓게보기

[🥸JavaScript]📝카카오 지도 API 사용법과 키 숨기기(gitignore )➰랜딩 페이지

📍 진행상황

1️⃣ 카카오 API 키 값 숨기기
 2️⃣ 이메일 입력 창 디자인 개선

📌 개발 완료 부분 시연 영상

전체적인 레이아웃과 스타일, 기능 등 얼추 완성이 되었으니
이제 더욱 완성도 있게끔 작업을 해주고 있습니다.
오늘은 지도 API 관련 스크립트 작업을 중점으로 해서
이전 시간까지 진행했던 내용 중 에러가 있었던 부분이나
새로운 방식으로 해결해보는 시간을 가졌습니다😀

그러면 아래에서 어떻게 구현했는지
자세히 이야기 해보는 시간을 갖도록 하겠습니다.

⭐ 코드리뷰➰카카오 지도 API  숨기기

개인적으로 API를 처음 사용해보는 입장에서
어떻게 해야되는지 헤메기도 하고 에러가 계속 떠서
거의 반나절이 걸려 힘든 파트였는데요🤬
그래도 어떻게 하다보니 API 키 값을 숨기는데 성공했답니다!
그럼 피땀눈물 흘려 해결한 코드 공개하겠습니다😂
 

✍🏻 카카오 지도 공식 예제

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>카카오 지도 API</title>
</head>
<body>
	...
    생략
    ...
    // 실제 지도를 그리는 Javascript API를 불러오기
	<script type="text/javascript"
    		src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY">
    </script>
    
    // 지도를 띄우는 코드 작성(커스텀 가능)
	<script> 
		var container = document.getElementById('map');
		var options = {
			center: new kakao.maps.LatLng(33.450701, 126.570667),
			level: 3
		};
        
		var map = new kakao.maps.Map(container, options);
	</script>
</body>
</html>

 
카카오에서 제공해주는 가이드라인을 보면 두 개의 스크립트로 나뉘어져 있습니다.
하나는 API 키를 이용해서 지도를 불러오는 스크립트이고
나머지는 지도를 띄우는 코드로 구성이 되어있는 걸 볼 수 있죠.
 

📁 KEY 별도의 파일로 관리하기(apikey.js)

const config = {
    API_KEY: "자신의 키"
};

export default config;

 
❗해당 파일은 자신이 카카오 홈페이지에서 발급 받은 키를
GitHub에 푸시할 때 키가 올라가지 않도록 해주기 위해서
별도로 보관할 수 있게 만들기 위한 자바스크립트입니다.
 

📁 KEY와 API 불러오기(map.js)

<!-- 1. 키 불러오기 -->
import config from 'apikey.js 경로' // 키만 별도로 보관하고 있는 파일 불러오기
const { API_KEY } = config;

<!-- 2. API 불러오기 -->
function loadKakaoMapScript(callback) { // 실제 지도를 그리는 Javascript API를 불러오기
    const script = document.createElement('script'); // 새 스크립트 엘리먼트를 생성
    script.src = `https://dapi.kakao.com/v2/maps/sdk.js?appkey=${API_KEY}&autoload=false`;
    script.type= "text/javascript" // HTML5 기본값(작성하지 않아도 무관)
    document.body.appendChild(script); // 생성한 스크립트 엘리먼트를 문서의 바디 끝에 추가
}

<!-- 지도 띄우는 API 작성(커스텀 가능) -->
loadKakaoMapScript(() => { // loadKakaoMapScript 함수 호출, 스크립트가 로드되면 콜백 실행
    kakao.maps.load(() => {

        /* 개발한 코드 작성 */

    });
});

 
주석을 많이 달아놨는데 공부 목적으로 작성한 것이기도 하고
여러분들께 설명하기 위한 것이니 이해 부탁드립니다💦
 
우선 에러가 났던 이유를 먼저 말씀드리면
1~11번째줄을 다른 파일에 만들어
지도를 띄우는 API가 호출되지 않았던 것입니다.
 

 
예제 코드로 이렇게 <script>가 두 개로 분리되어 있어
파일 두 개로 만들어야 되는 걸로 착각했습니다.
 
1. 키 불러오기
2. API 불러오기
3. 지도 띄우는 API 작성(커스텀)

위 순서대로 한 파일 내에 써주어야 됩니다❗️
 
🧐 여기서 중요한 점

document.body.appendChild(script);
document.head.appendChild(script);

 
API를 불러오는 스크립트 태그는 HTML파일안의
head, body 등 어떠한 위치에 넣어도 상관 없지만
반드시 실행 코드보다 먼저 선언되어야 한다는 것입니다.
 

📁 gitignore 로 파일 숨기기(키 숨기는 법)

 

1️⃣ .gitignore 파일 만들기


.gitignore 파일이 존재하지 않는 경우
최상위 루트에 파일을 하나 만들어줍니다.
✔️ 숨길 Key 파일도 최상위 루트에 위치 시켜주는게
직접 해본 결과 더 편했습니다🙂
 

2️⃣ .gitignore 파일 Git에 추가하고 커밋 해주기

파일 내용에 Key가 들어있는 파일명을 적어줍니다.

▪️키 파일을 최상위 루트에 위치 시켰다면
👉🏻 파일명만 작성

▪️다른 경로라면
👉🏻 경로+파일명

git add .gitignore
git commit -m "Git에 gitignore 파일을 추가"

 

3️⃣ Git에 이미 숨길 대상의 파일이 이미 올라가 있는 경우


❗이미 Git에 커밋된 파일은 .gitignore에 추가해도
숨겨지지 않으므로 캐시를 초기화 해주어야 됩니다.

git rm --cached 파일명

 
이 부분 때문이 또 하나의 난관에 부딪혔었는데요🥵
✔️ 키 값이 들어있는 파일을 커밋하기 전에
.gitignore 파일 먼저 add 해주고 커밋해주어야 됩니다.

4️⃣ .gitignore 작동 여부 확인하기
정상 작동하고 있다면 파일명 혹은 경로를 반환해주고 작동하고 있지 않으면 아무 것도 뜨지 않습니다.

 git check-ignore 파일명


👉🏻 key 파일을 한 번 .gitignore 파일에 설정해주고 나면
다시 위의 과정들을 반복할 필요 없이
추후에도 자동으로 키 파일은 계속 숨겨진 채로 유지 됩니다.

⭐ 이메일 입력창 개선

◾ BEFORE

◾ AFTER


이전에는 폼 레이아웃에 하얀색 배경과 굴곡을 준 뒤
그 안에 input 창을 넣는 방식으로 배치 했는데요.

어제 포스팅 때 입력창을 input으로만
이미지와 같이 만들 수 있지 않을까란 의문을 품고
개선 예정이라고 말씀을 드렸었죠!
오늘 부트캠프 시간에 바로 실행해보았습니다😎
 
우선 예상했던대로 `border-radius` 조정을 통해
입력창만으로도 모서리를 둥글게 만들 수 있었습니다.
부모 요소인 폼 레이아웃에 `relative`를 주고
자식 요소인 아이콘 및 버튼에 `absolute` 를 사용해주어
input 창 위에 이미지가 있는 형태로 개발해보았습니다.
(나름 빠르게 진행돼서 혼자서 놀랐던 부분입니다😅)
 

💭 모달 닫힘 버튼 눌렀을 때 최상위로 이동하는 현상 해결

// 모달 열리는 함수
function showModal(event) {
    event.preventDefault(); 
    if (inputCheck()) { 
        document.getElementById('modal').style.display = 'flex'; 
    }
}

// 모달을 닫는 함수
function closeModal(event) {
    event.preventDefault(); // 최상단으로 올라가는 현상을 방지
    document.getElementById('modal').style.display = 'none'; 
}

document.querySelector('.subscribeButton').addEventListener('click', showModal);
document.querySelector('.modalButton').addEventListener('click', closeModal);

 
보통 많은 웹 페이지에서  모달창이 띄워지고 나서 닫힘 버튼을 눌렀을 때
모달창을 열었던 화면 위치가 그대로인 경우가 많습니다.
그런데 의도와는 다르게 닫힘 버튼을 눌렀을 때
최상단으로 스크롤 되는 현상이 있어서 이를 해결하고자 하였습니다.
 
❗ `preventDefault()` 메서드를 사용하면
스크롤 위치가 초기화 되지 않도록 하기 때문에
모달창이 닫혀도 위치가 변하지 않도록 할 수 있습니다.

(창이 닫히고 최상단으로 올라가는 건
브라우저 기본값이라고 하네요🥶)

📝 12일차 부트캠프 회고

1️⃣ 잘했던 점
▪️카카오 API 키 값을 별도의 파일로 관리
▪️ 이메일 입력 창 디자인을 개선하여 UI/UX 향상
▪️ 모달 닫힘 버튼의 스크롤 문제를 preventDefault()로 해결
▪️ .gitignore 파일을 사용하여 보안이 필요한 정보를 Git에서 숨김

2️⃣ 부족했던 점
▪️ 개발시 코드가 길어짐에 따라 CSS 클래스명 관리가 필요하다 느꼈습니다.

3️⃣ 향후 개선 방향
▪️ 어떻게 하면 클래스명을 효과적으로 관리할 수 있는지 찾아보고 코드를 수정할 예정입니다.

 

728x90
320x100
저작자표시 비영리 변경금지

'🖥️ JavaScript' 카테고리의 다른 글

[🥸JavaScript]📝깃허브 배포 페이지 카카오 지도 API 값 숨기기➰(gitignore)  (1) 2024.08.27
💬 끄적이는 5일차 랜딩페이지 프로젝트 회고  (0) 2024.08.23
[🥸JavaScript]📝랜딩페이지 만들기➰카카오맵 API, 이메일 유효성 검사, 사이드 메뉴  (0) 2024.08.21
[🥸JavaScript]📝 this 호출방식과 사용법, JSON 개념➰(parse, stringify)  (0) 2024.08.14
[🥸JavaScript]📝콜백함수, 배열함수, 메서드 정리➰(foreach, map)  (2) 2024.08.13
🖥️ JavaScript 관련 글
더 보기

티스토리툴바