key 저장 하는 법

1. 처음 config 파일을 만들어, 키를 저장하였다. 

그리고 key를 사용하는 곳에, config import를 하여 config 파일을 가져왔다. 

그리고 gitignore파일에 config파일을 추가하여, 깃허브에 올라가지 않도록 했다.

근데 여기서 문제가 발생했다. 바로 이 config 파일 자체를 읽지 못하여, 키를 못가져오는 상황이 되버렸다

defined 에러를 보이며 키를 못받아와 소셜로그인을 하지 못했다.

 

그래서 여러가지를 찾아보다 .env파일을 추가해 여기에 키를 추가시켜 보안처리를 하고, process.env를 하여 키를 가져오는 방법을 했지만, 이 방법은 node에서 사용하는 방법으로, 자바스크립트에서 사용하려면 다른 방법을 해야햇다.

 

바로 import.meta.env.VITE.식별자 를 활용하는 방법이다.

똑같이 .env파일에 키를 추가하여 아래와 같이 입력을 한다.

VITE_JAVASCRIPT_APP_KAKAO_API_KEY = key 값

그래서 이 키값을 사용하고자 하는 곳에

const KaApiKey = import.meta.env.VITE_JAVASCRIPT_APP_KAKAO_API_KEY;

위와 같이 입력을 하여 사용하면 키를 불러올  수 있다.

하지만 이 방법의 문제가 있다.

보통은 이러한 키 값은 백엔드에서 관리하여 보안성을 높이지만, 현재 내가 하는 프로젝트에서는 백엔드 개발자가 따로 있지 않다. 

그래서 임시 방편으로 사용하는 방법인데, 이는 콘솔에서는 확인 할 수 없지만 소스를 들어가보면 저 키 값이 보인다.

그래서 중요한 키 값의 경우는 위와 같은 방법을 사용하면 안된다. 외부에 알려져도 되는 키 값이면 사용해도 되지만 그렇지 않은 경우는 다른 방법을 모색 해봐야 한다.