[Javascript] API KEY 관리하기 - config/apikey.js

weather API에서 날씨 정보를 가져올 때 API key가 필요하다. 이때 API key가 노출되면 권한이 없는 사용자가 무단으로 접근하거나, 민감한 데이터가 유출될 수 있다. 또한 사용량에 따라 요금을 납부하는 경우 과다한 사용량 증가로 많은 요금을 납부하는 경우가 생길 수 있다. 그렇기 때문에 API key가 노출되지 않도록 관리를 해야 한다.

 

이번 미니 프로젝트를 만들 때 레파지토리를 비공개로 해놓았었기에 API key 는 나중에 관리하면 되지~ 라고 생각했는데, git push로 api key가 공개됐으면 그 키는 재발급해야 한다고 한다. 그래서 api key를 재발급받고 다음과 같이 api key가 노출되지 않도록 관리를 했다. 

config 폴더 안에 apikey.js 추가하기

 

폴더 구조

config 폴더에 apikey.js 파일을 추가하고, 그 안에 API key를 작성했다.

 

const config = {
  apiKey: "API KEY",
};

export default config;

 

.gitignore 파일을 추가해서 그 안에 apikey.js 를 넣었다. 이렇게 해야 git push를 했을 때 깃허브에 apikey.js 파일이 올라가지 않는다. 

 

#api Key
apikey.js

 

API key가 필요한 weather.js에서 apikey.js를 import 해주고, config.apikey로 가져온 값을 APIKEY에 할당했다.

 

import config from "../config/apikey.js";

// 날씨 정보 가져오기 : getLocationsuc에서 넘겨받은 위도와 경도 활용
const getWeatherInfo = async (latitude, longitude) => {
  const APIKEY = config.apiKey;
  try {
    const response = await fetch(
      `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${APIKEY}&units=metric`
    );

    if (!response.ok) {
      throw new Error("Weather API 요청이 실패했습니다.");
    }

    const result = await response.json();
    const temp = result.main.temp;
    const weather = result.weather[0].main;
    displayWeatherInfo(temp, weather);
  } catch (error) {
    alert("error가 발생했습니다. 콘솔 창을 확인해주세요.");
    console.log(error);
  }
};

netlify로 프로젝트를 배포해놓은 상태인데 배포하고 나니 API key 가 연결이 안되어서 "Failed to load resource: the server responded with a status of 404 ()" 에러가 떴다. 다음에는 해결 방법에 대해 작성해보겠다!