[JavaScript] 바닐라 자바스크립트 API KEY 숨기기 (.gitignore)

이번에 스터디에서 바닐라 자바스크립트로 프로젝트를 하고 있는데, 매번 리엑트를
사용하다보니 JS로만 프로젝트를 하는 것은 은근히 까다롭고, JS 공부에 도움이 많이 되고 있다. (얼마나 외부 라이브러리에 의존적이었는지 느끼고 있다.)

 

리엑트에서 API KEY같은 정보를 외부로부터 숨길 때에 DOTENV를 사용했었는데, 바닐라 자바스크립트에서는 외부 라이브러리를 사용하지 않으므로 사용할 수 없다.

 

그래서 config.js 파일에 API_KEY 값을 저장하고 export한 후 사용하려는 곳 (api.js)에서 import한 후 gitignore에 추가하는 방식으로 진행했다.

 

이 방법이 완전히 옳은 방법인지는 잘 모르겠다.
나중에 배포를 하게 된다면 오류가 나게 될 수도 있을 것 같은데,
배포 단계에서 포스팅을 수정하도록 하겠다.

config.js 파일 생성

▼src/config.js

const config = {
  API_KEY: "your key",
};
export default config;

.gitignore 파일에 추가

▼ .gitignore

config.js

API_KEY import해서 사용하기

▼ src/api.js

import config from "./config.js";
const { API_KEY } = config;

...
/* 아래처럼 사용하기 */
return request(
      `http://openapi.foodsafetykorea.go.kr/api/${API_KEY}/COOKRCP01/json/1/1001`
    );

...

주의할 점

• 한번이라도 git에 올라갔던 파일은 나중에 gitignore에 추가하더라도 추적하게 된다.
• gitigonore에 추가를 먼저하자