리액트를 이용하여 프로젝트를 만들 때, 외부 서비스 제공자의 서비스를 사용하는 경우가 존재한다. 이때 중요한 것이 API를 사용하기 위해 등록하면서 발급받은 API Key(Secret)과 Client ID를 잘 기억하고 사용하는것이 중요한데, API KEY(Secret)은 절대로 외부로 노출되어서는 안된다.
로컬 cra 에서 환경변수 사용하는 법
보통 utils 폴더안에 contant 파일을 만들어 변수를 선언 후 할당한다
export const SERVER_ADDRESS = process.env.REACT_APP_API_URL;
불러 올 데이터 url에 변수를 선언한다.
const response = await axios.get(`${SERVER_ADDRESS}/kimchis/${id}`);vercel 배포시 환경변수 설정법
[자료참고]
주니어 개발자 기술노트