리액트 .env를 이용해 중요한 키를 숨기자 (feat. API key)

React는 .env를 이용해 누군가 보면 안되는 데이터를 보관할 때 사용하는데요. apikeyr같은 중요한 값들을 따로 보관할 수 있도록 도와줍니다.

 

.env 파일에 환경변수를 정의하여 변수로 받아오는 이유는 보안 뿐만 아니라 유지보수 측면에도 용이합니다.

apikey를 예로 들었으니 api호출하는 경우를 유지보수측면에서 설명해보겠습니다.

 

a.tsx는 유튜브 `url/search` 라는 곳에서 데이터를 받아와야하고

b.tsx는 유튜브 `url/channel` 이라는 곳에서 데이터를 받아와야합니다.

 

이런 경우 하드코딩을 하면 각 url위에 apikey를 넣게 되는데, apikey가 만료되거나 바꿔야하는경우 모든 파일을 훑어 apikey를 직접 찾고 바꿔줘야하는 불편함이있습니다.

 

.env파일에 데이터가 저장돼있을 경우 이런 불편함을 간단하게 해결할 수 있죠.

 

사용법

사용법은 간단합니다. root디렉토리에 .env파일을 만듭니다.

src안에 만드시면 안됩니다.

 

.env파일에 다음과 같은 형식으로 변수를 선언합니다.

REACT_APP_변수이름 = apikey

이때 변수이름에 언더가 두개이상 들어갈 경우 undefined가 뜹니다.

예를 들어보겠습니다.

 

REACT_APP_API_KEY=1d7603afc6ea60759b3a19c1262

변수이름을 만들었다면 이제 변수를 불러와보겠습니다.

 

리액트 src의 컴포넌트에서 fetch나 axios를 사용하는 컴포넌트를 찾아준 후 api키를 불러와봅시다.

 

access_token를 REACT_APP_API_KEY값으로 초기화해줬습니다.

process.env.REACT_APP_변수이름

위와 같은 방법으로 .env에 있는 변수이름을 불러올 수 있습니다.

 

 

 

 

 

리액트가아닌 넥스트를 사용할때도 비슷합니다.

.env파일에 다음과 같은 형식으로 변수를 선언합니다.

NEXT_PUBLIC_변수이름 = apikey

process.env.NEXT_PUBLIC_변수이름