[항해99 50일차] 2022.04.25 TIL (리액트로 카카오 지도 가져오기, 환경변수 설정)

📔 오늘 할 일 📔

 

1.  카카오 지도 API 사용법 알기

2. 소셜 로그인 하는 법 공부하기

---

📖 오늘 배운 것 📖

 

리액트로 카카오 API 가져와서 화면에 지도 띄우기 !!!!

사이트 👉 APP KEY 발급을 클릭

애플리케이션 추가하기 클릭

앱이름, 사업자명 입력 후 저장하기 클릭

자바스크립트 키 메모장에 복사해두기 !!

아래에 있는 플랫폼 중에서 Web플랫폼 추가해두기 도메인은 http://localhost:3000으로 입력 

 

이제 여기에서 해야될 설정은 끝 !!!

 

사이트👉 가이드 클릭

리액트 index.js 에 아래 코드 복사 붙여넣기 발급받은 APP KEY는 위에서 메모장에 복사해둔 자바스크립트 키다.

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

 

src에 Location.js 컴포넌트 생성 후 아래 코드 복사 붙여 넣기

 

// MapContainer.js

import React, { useEffect } from 'react';

const { kakao } = window;

const Location = () => {

    useEffect(() => {
        const container = document.getElementById('myMap');
		const options = {
			center: new kakao.maps.LatLng(33.450701, 126.570667),
			level: 3
		};
        const map = new kakao.maps.Map(container, options);
    }, []);

    return (
        <div id='myMap' style={{
            width: '100%', 
            height: '100vh'
        }}></div>
    );
} 

export default Location;

 

app.js에 해당 컴포넌트 연결해주기

import React from 'react';
import Location from './Location';

function App() {
  return (
    <div className="App">
      <Location />
    </div>
  );
}

export default App;

 

이렇게 설정하고 yarn start하면,,

지도 화면이 뜹니다 !!

+ 환경변수 설정

 

gitignore파일 위에 .env파일 생성 👍

 

appkey =자바스크립트키 (아까 메모장에 복사해둔 코드 ^^)

위 처럼 REACT_APP_{변수명}=

이렇게 입력 !!! 그리고 저장

깃이그노어 파일에 가서 요롷게 깃헙 저장소에 올라가지 않게 .env를 입력해준다.

package.json 파일에 아래 내용 추가

  "homepage": ".",

 

private아래에 입력해줍니당..또한 아래 패키지를 설치해준다.

yarn add dotenv

최종단계!!! 아래코드처럼 %%안에 변수명을 넣어주면 끝!!!!!

<script type="text/javascript" src="%REACT_APP_KAKAO_KEY%"></script>

이거 설정한다고 2시간 넘게 검색했던 것 같다.. ^^

---

 

😊 주절주저리 😊

 

마음을 다시 먹어야겠다..

그동안 너무 나태해져서..지각을 ...당연하게 해버렸다.😵‍💫

우리조에게 민폐가 되지 않게 내일은 8시 30분에 일어나서 예전처럼 머리 감고...다 씻고 공부를 해야겠다.

파이팅 나 자신 !!! 

모든지 할 수 있다는 생각으로.. 코딩하자 !!!

---

📚부족한 부분📚

 

내가 할 수 있을까? 라는 마음가짐..

이것을 나는 할 수 있다로 다시 바꿔야겠다.ㅠㅠ

세상에는 나보다 잘하는 사람이 많지만..

나도 그들이 될 수 있다는 생각으로 공부해보자 !!

---

✅ 내일 할 일 ✅

 

메인 뷰 그리기