안녕하세요. J4J입니다.
이번 포스팅은 cra로 만들지 않았을 때 dotenv 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다.
dotenv란?
dotenv는 리액트에서 사용할 수 있는 환경변수 파일로 개발에 사용되는 여러 key값들과 같이 중요하면서 동시에 민감한 정보들을 저장해두는 파일입니다.
파일명은 .env로 일반적으로 폴더 최상단에 위치합니다. (package.json과 동일 위치)
중요 정보들을 해당 파일에 저장하는 이유는 수정된 파일들을 git과 같은 코드 관리 도구에 올릴 때 .gitignore 파일에 등록하여 서버에 업로드되지 않도록 하기 때문입니다.
그러므로 외부에 노출되지 않게 되고 그에 따라 보안성이 높아지게 됩니다.
CRA로 만들지 않았을 때 dotenv 사용 방법
일반적으로 cra를 이용하여 리액트 프로젝트를 생성했을 때 dotenv를 사용하는 방법은 검색을 간단히만 해봐도 여러 블로그에서 확인이 가능합니다.
하지만 cra로 만들지 않았을 때 동일한 방법을 사용할 경우 정상동작되지 않게 됩니다.
그렇기 때문에 본인이 작업하고 있는 것이 cra로 만들지 않은 프로젝트일 경우는 다음과 같은 방법을 사용하시면 됩니다.
[ 1. 패키지 설치 ]
$ npm install dotenv
[ 2. webpack 설정 파일에 설정 추가 ]
const webpack = require("webpack");
const dotenv = require("dotenv");
dotenv.config();
module.exports = {
...
plugins: [
// dotenv 사용을 위한 설정
new webpack.DefinePlugin({
'process.env': JSON.stringify(process.env),
})
]
};
[ 3. .env 파일 생성 ]
위에서 언급한것 처럼 폴더 최상단에 .env파일을 생성해주시면 됩니다.
그리고 다음과 같이 내용을 입력해보겠습니다.
MY_KEY=keykeykeykey
API_KEY=123api456key
[ 4. 테스트 코드 작성 ]
.env파일에 기입해둔 값들을 사용하는 방법은 단순하게 process.env를 앞에 입력해주시면 됩니다.
위의 환경변수 값이 정상적으로 사용이 가능한지 확인해보기 위해 다음과 같이 App.jsx파일을 작성해보겠습니다.
import * as React from 'react';
const App = () => {
return (
<div>
<p>my key: {process.env.MY_KEY}</p>
<p>api key: {process.env.API_KEY}</p>
</div>
)
}
export default App;
그리고 실행해보면 다음과 같이 정상적으로 확인이 가능합니다.
추가적으로 .env의 값을 변경한 것이 정상적으로 적용되기 위해서는 현재 실행되어 있는 서버는 종료하고 다시 시작을 해주셔야 합니다.
index.html에서 dotenv 사용 방법
만약 dotenv파일에 넣어둔 값을 index.html에도 사용하고 싶으신 분들이 계시다면 위의 설정만으로는 정상 적용이 되지 않습니다.
index.html에서도 사용할 수 있도록 추가 설정을 해보겠습니다.
[ 1. 패키지 설치 ]
$ npm install -D html-webpack-plugin@4.4.0
버전을 지정한 이유는 단순하게 제가 현재 사용하는 리액트 설정 방법에서 버전을 지정하기 때문입니다.
해보진 않았지만 최신 버전을 사용해도 문제가 없으신 분들은 최신 버전을 설치해도 정상 동작이 될 것으로 생각됩니다.
제가 사용하는 설정 방법에 대해 궁금하시면 여기를 참고 부탁드립니다.
[ 2. .env 내용 수정 ]
index.html에서 사용할 APP_TITLE이라는 값을 추가해보겠습니다.
MY_KEY=keykeykeykey
API_KEY=123api456key
APP_TITLE=J4J dotenv test
[ 3. webpack 설정 파일 수정 ]
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");
const dotenv = require("dotenv");
dotenv.config();
module.exports = {
...
plugins: [
new HtmlWebpackPlugin({
// index.html에 output에서 만들어진 bundle.js를 적용하여, deploy에 새로운 html 파일 생성
template: `./public/index.html`,
// template에 해당하는 파일에 dotenv 사용을 위한 설정
env: process.env,
}),
// dotenv 사용을 위한 설정
new webpack.DefinePlugin({
'process.env': JSON.stringify(process.env),
}),
]
};
[ 4. index.html 수정 ]
위와 같이 설정을 마쳤다면 index.html에서 .env파일에 저장되어 있는 데이터를 가져다 사용할 수 있게 되는데 <%= htmlWebpackPlugin.options.env.{변수} %> 와 같이 작성하여 사용해줄 수 있습니다.
위에서 추가해둔 APP_TITLE을 가져다가 제목으로 지정하기 위해 다음과 같이 파일을 수정해보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= htmlWebpackPlugin.options.env.APP_TITLE %></title> <!-- title 같은 곳에서 사용하는 방법 -->
<script src="<%= htmlWebpackPlugin.options.env.APP_TITLE %>"></script> <!-- script 같은 곳에서 사용하는 방법-->
</head>
<body>
<div id="root"></div>
</body>
</html>
그리고 실행해보면 다음과 같이 제목이 .env에 기입해둔 APP_TITLE의 내용으로 수정된 것을 확인할 수 있습니다.
참조
Webpack으로 구축한 React 프로젝트에서 환경 변수(.env) 사용하기
이상으로 cra로 만들지 않았을 때 dotenv 사용하는 방법에 대해 간단하게 알아보는 시간이었습니다.
읽어주셔서 감사합니다.
'SPA > React' 카테고리의 다른 글
| [React] 리액트에서 Smooth Scrollbar 사용하기 (0) | 2021.11.20 |
|---|---|
| [React] 타입 스크립트에서 dotenv 자동완성 기능 만들기 (0) | 2021.11.17 |
| [React] recoil 사용하기 (0) | 2021.10.24 |
| [React] React.memo로 최적화하기 (0) | 2021.09.30 |
| [React] Hooks - useReducer (0) | 2021.09.27 |
댓글