TL;DR
- Webpack์ ํตํด ์ง์ ๊ตฌ์ฑํ ๋ฆฌ์กํธ ํ๋ก์ ํธ
.env
ํ์ผ์ ํ๊ฒฝ ๋ณ์๋ฅผ ์ ์ธํ ๋REACT_APP_
์ผ๋ก ์์ํ์ง ์์๋ ๋จdotenv
ํจํค์ง:DefinePlugin
์ ํตํด ์๋์ผ๋ก ์ ์ญ ๋ณ์ ์ ์dotenv-webpack
ํจํค์ง: ํ๋ฌ๊ทธ์ธ์new Dotenv()
์ถ๊ฐ
- CRA๋ฅผ ํตํด ๊ตฌ์ถํ ๋ฆฌ์กํธ ํ๋ก์ ํธ
- ๋ณ์๋ช
์ ๋ฐ๋์
REACT_APP_
์ผ๋ก ์์ํด์ผ ํจ - ๋ณ๋์ ์ค์ ์์ด
/src
๋๋ ํ ๋ฆฌ์ ํ์ ํ์ผ์์process.env
๋ก ํ๊ฒฝ๋ณ์ ์ ๊ทผ
- ๋ณ์๋ช
์ ๋ฐ๋์
1. ์ฝ์ง๊ธฐ
'๋ฆฌ์กํธ์์ ํ๊ฒฝ๋ณ์ ์ฌ์ฉํ๊ธฐ' ๋ผ๋ ํค์๋๋ก ๊ตฌ๊ธ๋งํ๋ฉด ๋๋ถ๋ถ
dotenv
ํจํค์ง ์ค์น -> ํ๋ก์ ํธ ๋ฃจํธ์.env
ํ์ผ ์์ฑ ->REACT_APP_
์ผ๋ก ์์ํ๋ ๋ณ์ ์์ฑ -> ๋ณ์๋ฅผ ์ฌ์ฉํ๋ ค๋ ๊ณณ์์require('dotenv').config()
ํ ๋ค,process.env.<๋ณ์๋ช >
์ผ๋ก ํ๊ฒฝ๋ณ์์ ์ ๊ทผ
ํ๋ฉด ๋๋ค๋ ๊ธ์ด ๊ฒ์๋๋ค. ์ค์ ๋ก ์์ ์ CRA๋ก ๋ง๋ ํ๋ก์ ํธ์์ ํน๋ณํ ์ด๋ ค์ ์์ด ํ๊ฒฝ๋ณ์๋ฅผ ์ฌ์ฉํ๋ ์ ์ด ์์ด์ ์ ๋ ๊ฒ ํ๋ฉด ๋๊ฒ ๊ฑฐ๋ ํ์ง๋ง ์๋์๋ค!?!!!! ํนํ ์ '๋ณ์๋ฅผ ์ฌ์ฉํ๋ ค๋ ๊ณณ' ์ ์๋ชป ์ดํดํ ํ์ /src
์ ํ์ ํ์ผ์์ require('dotenv').config()
๋ฅผ ํธ์ถํ๋๋ฐ ์๋์ ๊ฐ์ ์๋ฌ๊ฐ ๋์ ๋งค์ฐ ๋นํฉ์ค๋ฌ์ ๋ค.
๋๋ต ๋ญ๊ฐ ์๋ชป๋ ๊ฑด์ง ๋ณด๋ฉด
Module not found: Error: Can't resolve 'fs' in '\node_modules\dotenv\lib'
Module not found: Error: Can't resolve 'path' in '\node_modules\dotenv\lib'
Module not found: Error: Can't resolve 'os' in '\node_modules\dotenv\lib'
fs
๋ชจ๋์ด ์์ด์, path
๋ชจ๋์ด ์์ด์, os
๋ชจ๋์ด ์์ด์ ์๋ฌ๊ฐ ๋ฐ์ํ๊ณ ์๋ค๋ ๊ฒ์ ์ ์ ์๋ค. ์น์ ํ๊ฒ๋ Webpack์ resolve
์ต์
์ polyfill์ ์ง์ ํ๋ผ๊ณ ์๋ดํด์ฃผ์ง๋ง, ์ ๊ฑฐ ํด๋ดค์ ์ฐ์์ ์ผ๋ก ๋ ๋ค๋ฅธ ์๋ฌ๊ฐ ๋ ๋ฟ ์์ฉ์ด ์๋ค. ์๋ํ๋ฉด ๊ทผ๋ณธ์ ์ผ๋ก Webpack๊ณผ dotenv
์ ๋ํด ์๋ชป ํ์
ํ๊ณ ์ฌ์ฉํ๊ธฐ ๋๋ฌธ์ด๋ค.๐!
2. dotenv ๋?
dotenv๋ .env
ํ์ผ์ ์ ์ธํ ๋ณ์๋ฅผ process.env
์ ๋ก๋ํด์ฃผ๋ ๋ฌด์์กด์ฑ(zero-dependency) ๋ชจ๋์ด๋ค. ๊ณต์๋ฌธ์์ ๋์จ ์ฌ์ฉ๋ฒ๋ ์์ ๋์ผํ๋ฐ ์ด์งธ์ ์ ๋ฐ ์๋ฌ๊ฐ ๋ฐ์ํ๋๊ฐ dotenv
์ ๋ฉ์ธ ์์ค๋ฅผ ์ด์ง ๋ค์ฌ๋ค ๋ณด์๋ค.
os
์ path
๋ชจ๋์ ํตํด .env
ํ์ผ์ ์ ๋ ๊ฒฝ๋ก๋ฅผ ์ฐพ๊ณ , fs
๋ชจ๋๋ก .env
ํ์ผ์ ๋ฌผ๋ฆฌ์ ์ผ๋ก ์ฝ์ด๋ค์ฌ process.env
์ key-value ํ์์ผ๋ก ๋ด๊ณ ์๋ค. ์ฌ๊ธฐ์ ๋ฌธ์ ์ ์ ํ์
ํ ์ ์์๋ค. os
, path
, fs
๋ชจ๋์ Node.js๊ฐ ๊ธฐ๋ณธ์ ์ผ๋ก ์ ๊ณตํ๋ ๋ชจ๋ ์ค ํ๋์ด๋ค. ์ด์ฒ๋ผ dotenv
๋ Node.js ์ ๊ธฐ๋ณธ ํ๊ฒฝ์์ ์คํ๋๋๋ก ์๋๋ ํจํค์ง์ด๋ฏ๋ก ๋ฌด์์กด์ฑ ๋ชจ๋์ด๋ผ๊ณ ํ ์ ์๋ ๊ฑฐ๋ค. ํ์ง๋ง ๋ ์ด๋ป๊ฒ ํ๋๋ผ...? ๋ฐ๋ณด๊ฐ์ด /src
์ ํ์ ํ์ผ์์ dotenv
๋ฅผ import ํด๋ฒ๋ ธ์๋ค.
โ (๋น์ฐํ๊ฒ๋) React๋ Node.js๊ฐ ์๋๋ค
Node.js๋ React๋ฅผ ์ฌ์ฉํด ๊ฐ๋ฐ๋ ํ๋ก๊ทธ๋จ์ด ์คํ๋ ์ ์๋ ๋ฐํ์ ํ๊ฒฝ์ ์ ๊ณตํ๋ ๊ฒ์ด์ง, React์ ์ง์ ์ ์ธ ๊ด๊ณ๊ฐ ์๋ ๊ฒ์ด ์๋๋ค. Node.js๋ Webpack์ด config ํ์ผ์ ์ค์ ์ ๋ฐํ์ผ๋ก ์ ์ ํ์ผ๋ค์ ๋ฒ๋ค๋งํ๊ณ , npm start
๋ก ๊ฐ๋ฐ์ฉ ์๋ฒ๋ฅผ ์ฌ๋ ค ๋ฒ๋ค๋ง๋ ํ์ผ์ ์คํํ ์ ์๋ ํ๊ฒฝ์ ์ ๊ณตํด์ฃผ๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฐํ์์ด๋ค.
์ฆ, React ํ๋ก์ ํธ์ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ Node.js ๊ทธ ์์ฒด๊ฐ ์๋๊ธฐ ๋๋ฌธ์ ํน์ ํจํค์ง๊ฐ ํ์ํ๋ค๋ฉด npm
์ ํตํด ์ค์นํ๊ณ /node_modules
์์๋ถํฐ import ํด์ ์์กด์ ์ผ๋ก ์ฌ์ฉํด์ผ ํ๋ค. ๋๋ฌธ์ /src
ํ์์ ํ์ผ์์๋ os
, path
, fs
๋ชจ๋๋ค์ ์ฐพ์ ์ ์์๋ ๊ฒ์ด๋ค. ๋๋ dotenv
ํจํค์ง๋ง ์ค์นํ์ผ๋๊น!
3. ๊ทธ๋์ dotenv๋ก ํ๊ฒฝ๋ณ์๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์?
1๏ธโฃ DefinePlugin
Webpack์ DefinePlugin์ ์ฌ์ฉํด process.env
๋ผ๋ ์ ์ญ ๋ณ์๋ฅผ ์ ์ํด์ค๋ค.
// .env
FIREBASE_API_KEY=TEST_KEY
FIREBASE_AUTH_DOMAIN=test.firebaseapp.com
FIREBASE_PROJECT_ID=test
// webpack.config.js
const webpack = require("webpack");
const dotenv = require("dotenv");
dotenv.config(); // .env ํ์ผ์ ํ์ฑํ ๊ฐ์ฒด๊ฐ ๋ฆฌํด๋์ด process.env์ ์
ํ
๋๋ค
console.log(process.env);
์ ์ญ ๋ณ์๋ฅผ ์ ์ํ๊ธฐ ์ ์ process.env
๋ฅผ ์ฝ์์ ์ฐ์ด๋ดค๋ค. ๋ค๋ฅธ ํ๊ฒฝ๋ณ์๋ค ์ฌ์ด์ ๋ด๊ฐ ์ ์ธํ FIREBASE_
๊ด๋ จ ๋ณ์๋ค์ด ํฌํจ๋ ๊ฒ ๋ณด์ธ๋ค. ์ฌ์ฉ์ ์ ์ ํ๊ฒฝ๋ณ์์ ๋ฐ๋์ REACT_APP_
์ ๋ถ์ผ ํ์๋ ์์ง๋ง ๋ค๋ฅธ ํ๊ฒฝ๋ณ์๋ค๊ณผ์ ์ถฉ๋์ ๋ฏธ์ฐ์ ๋ฐฉ์งํ๊ธฐ ์ํด ๊ตฌ๋ถ ๊ฐ๋ฅํ prefix๋ฅผ ๋ถ์ฌ์ฃผ๋ ๊ฒ์ด ์ข๊ฒ ๋ค๋ ์๊ฐ์ด ๋ ๋ค.
์ด์ ํ์ผ ์ด๋์๋ process.env
๋ผ๋ ์ ์ญ๋ณ์์ ์ ๊ทผํ ์ ์๋๋ก DefinePlugin
์ ํตํด ์ ์ํด์ค๋ค. ์ด ๋ ๋ฐ๋์ ๊ฐ์ JSON.stringify()
๋ฅผ ํตํ์ฌ JSON ๋ฌธ์์ด๋ก ๋ณํํด์ฃผ์ด์ผ ํ๋ค.
// webpack.config.js
module.exports = {
...
plugins: [
new webpack.DefinePlugin({
"process.env": JSON.stringify(process.env),
}),
]
}
2๏ธโฃ EnvironmentPlugin
๋๋ EnvironmentPlugin์ ์ฌ์ฉํ ์๋ ์๋ค. EnvironmentPlugin
์ DefinePlugin
์ process.env
๋ณ์๋ฅผ ์ ์ํ๋ ๊ฒ๊ณผ ๋์ผํ์ง๋ง ๋จ์ถ๋ ๋ฌธ๋ฒ์ ์ง์ํ๋ค. ๋ฐฐ์ด์ ์ค์ ํ ํค๋ค์ ๋๊ฐ์ด process.env
๋ก ์ ๊ทผํ ์ ์๋ค.
// webpack.config.js
module.exports = {
...
plugins: [
new webpack.EnvironmentPlugin([
"FIREBASE_API_KEY",
"FIREBASE_AUTH_DOMAIN",
"FIREBASE_PROJECT_ID",
]),
]
}
์์ ์ฝ๋๋ ์๋์ฒ๋ผ DefinePlugin
์ผ๋ก ์ ์ฉํ๋ ๊ฒ๊ณผ ์์ ํ ๋์ผํ๋ค.
// webpack.config.js
module.exports = {
...
plugins: [
new webpack.DefinePlugin([
"process.env.FIREBASE_API_KEY": JSON.stringify(process.env.FIREBASE_API_KEY),
"process.env.FIREBASE_AUTH_DOMAIN": JSON.stringify(process.env.FIREBASE_AUTH_DOMAIN),
"process.env.FIREBASE_PROJECT_ID": JSON.stringify(process.env.FIREBASE_PROJECT_ID),
]),
]
}
4. ๋์ฒด dotenv-webpack
dotenv
๊ฐ ์๋๋ผ dotenv-webpack ํจํค์ง๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ๋ ์๋ค. ๋จผ์ ํจํค์ง๋ฅผ ์ค์นํ๋ค.
npm install dotenv-webpack --save-dev
๊ทธ๋ฆฌ๊ณ Webpack config ํ์ผ์์ ํ๋ฌ๊ทธ์ธ์ ์ถ๊ฐํด์ฃผ๋ฉด ๋๋ค. ๊ฐ์ฅ ๊ฐ๋จํ๋ค.
// webpack.config.js
const Dotenv = require("dotenv-webpack");
module.exports = {
...
plugins: [
new Dotenv(),
]
}
๋ฒ์ธ. CRA๋ก ๋ง๋ ํ๋ก์ ํธ์์ ํ๊ฒฝ๋ณ์ ์ฌ์ฉํ๊ธฐ
create-react-app
์ผ๋ก ๋ง๋ React ํ๋ก์ ํธ์๋ ์ด๋ฏธ dotenv
ํจํค์ง๊ฐ ๋ด์ฅ๋์ด ์๋ค. ๋ฐ๋ผ์ ๋ณ๋์ ํจํค์ง ์ถ๊ฐ๋ Webpack์ ๋ํ ์ค์ ์์ด, .env
ํ์ผ์ ์์ฑํด์ ๋ณ์๋ฅผ ์ ์ธํ๋ ๊ฒ๋ง์ผ๋ก๋ ํ๊ฒฝ๋ณ์๋ฅผ ์ฌ์ฉํ ์ ์๋ค.
๋จ, CRA๊ฐ ๋ด๋ถ์ ์ผ๋ก REACT_APP_
์ผ๋ก ์์ํ๋ ํ๊ฒฝ๋ณ์๋ง ์ฝ์ด๋ค์ด๋๋ก ์ค์ ์ ํด๋์๊ธฐ ๋๋ฌธ์ ๋ณ์๋ช
์ ๋ฐ๋์ REACT_APP_
์ผ๋ก ์์ํด์ผ ํจ์ ์ ์ํ ๊ฒ!
์ฐธ๊ณ
React์ Node.js์ ๊ด๊ณ๋ ์ซ ๊ฑด๋๊ฑด๋(?)์์
Webpack: process.env undefined using DefinePlugin and DotEnv
'๐ป๐ > ๊ฐ๋ฐ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[JS] Web APIs์ ๋ํด (0) | 2021.08.28 |
---|---|
[JS] ๋ฐฐ์ด APIs: splice์ slice์ ๋น๊ต (0) | 2021.08.19 |
[Git] ๊นํ๋ธ ์ธ์ฆ personal access token์ผ๋ก ๋ณ๊ฒฝํ๊ธฐ(git config credential ์ค์ ์ฃผ์) (0) | 2021.08.15 |
[React] resize ์ด๋ฒคํธ ๋ค๋ฃจ๊ธฐ (8) | 2021.08.11 |
[Firebase] ๋ฐ์ดํฐ๋ฒ ์ด์ค์ CSV ํ์ผ Importํ๊ธฐ (0) | 2021.08.09 |