환경변수를 통해 프로젝트 내 외부에 노출하지 말아야 할 정보(Api key, Password 등)들을 노출시키지 않을 수 있다.
프로젝트의 루트 경로에 생성하며, 파일의 내용은 key=value 형태로 써야한다. (#~~ 은 주석)
dotenv 패키지의 .config() 함수를 실행하면, process.env 객체를 통하여 .env 파일의 내용에 접근 할 수 있다.
ex) process.env.TEST_KEY
$ npm install dotenv
// webpack.config.js
const webpack = require('webpack');
const dotenv = require('dotenv');
dotenv.config();
...
module.exports = {
plugins: [
...
new webpack.DefinePlugin({
'process.env': JSON.stringify(process.env),
}),
...
],
}
App.tsx 에서 환경변수를 콘솔로 찍어보자.
// App.tsx
import React from 'react';
function App(): JSX.Element {
console.log(process.env.TEST_NAME);
return (
<h1> APP </h1>
);
}
export default App;
제대로 나온다! 끝