[React] .env에 올려놓은 api key가 'undefined'로 뜰 때

 

 

Youtube API를 사용하려면 API key를 발급받아 사용해야 한다.

이때 API key는 공개적으로 올라가면 보안상 안되기 때문에

보통은 따로 환경변수 파일에 저장하여 gitignore에 등록하여 git에 올라가지 않도록 한다.

 

 

.env 를 사용할 때 주의할 점은

1. .env 파일이 최상위 폴더에 있어야할 것 (.gitignore와 같은 선 상)

2. 꼭 양식에 맞게 적어줘야 한다.

REACT_API_KEY=apikey (O)

REACT_API_KEY='apikey', (x)

REACT_API_KEY= 'aajleijalflale' (x)

 

 

다 잘 지켰다고 생각했는데...

자꾸 400 Bad Request가 뜨면서 api key가 undefined로 찍혔다.

 

 

해결책은

리액트에서는 모든 api key 앞에 REACT_APP을 붙여줘야 인식한다는 것이었다.

따라서 아래와 같이 REACT_APP을 붙여줬더니 잘 되었당^O^