리액트 스터디에서 api key를 따로 저장하고 가져와서 사용하는데,
다음과 같은 변수를 사용하고 있었다. 처음보는 변수 형태에 process.env, .env를 조사해보았다.
.env file
REACT_APP_API_KEY=인증키
위와 같이 작성한 .env 파일은 환경변수를 저장해서 import 없이도 사용할 수 있게 해준다. 여기서 중요한 사항이 있다.
- 루트 폴더에 저장할 것. src 폴더에 넣었다가 계속 key값이 undefined로 나오고 있었다.
- 키를 ""로 감싸지 말것. 다른 string 표시도 마찬가지다. 그냥 그대로 써야한다.
json파일과 마찬가지로 반드시 .gitignore에 추가해줘야한다. api를 불러오는 함수는 아래와 같이 변경했다.
export async function getEventsNum() {
const response = await fetch(
`http://openapi.seoul.go.kr:8088/${process.env.REACT_APP_API_KEY}/json/culturalEventInfo/1/1/ /`
);
const body = await response.json();
return body['culturalEventInfo']['list_total_count']
}