.env 파일 이용하기

리액트 스터디에서 api key를 따로 저장하고 가져와서 사용하는데,
다음과 같은 변수를 사용하고 있었다. 처음보는 변수 형태에 process.env, .env를 조사해보았다.

.env file
REACT_APP_API_KEY=인증키

위와 같이 작성한 .env 파일은 환경변수를 저장해서 import 없이도 사용할 수 있게 해준다. 여기서 중요한 사항이 있다.

1. 루트 폴더에 저장할 것. src 폴더에 넣었다가 계속 key값이 undefined로 나오고 있었다.
2. 키를 ""로 감싸지 말것. 다른 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']
}