[React] 환경 변수 파일 .env 설정

👉 Api를 사용하거나 인증 관련 기능을 구현할 때, 
key를 노출하지 않기 위해 환경 변수 파일에 key를 넣어주고 
필요할 때 꺼내올 수 있다. 

• 환경 변수 파일인 .env는 클라이언트와 서버 폴더에 각각 넣어주어야 한다
• node.js 환경(서버)일 때와 리액트 환경(클라이언트)일 때 설정 방법이 다르다.

🧩 리액트의 경우

//.env
REACT_APP_CLIENT_ID=abcd1234
REACT_APP_CLIENT_SECRET=abcd1234
// ✅ 환경 변수 앞에 REACT_APP_을 붙여주어야 리액트 코드에서 인식할 수 있다.

//Component.js
const CLIENT_ID = process.env.REACT_APP_CLIENT_ID
// ✅ 따로 import 과정 없이 process.env로 어디서든 꺼내쓸 수 있다.

🧩 node.js의 경우

//.env
CLIENT_ID=abcd1234
CLIENT_SECRET=abcd1234
// ✅ 반드시 REACT_APP과 같은 특정 이름으로 변수명을 지정해주지 않아도 된다.

//callback.js
require('dotenv').config();
// ✅ 반드시 상단에 dotenv를 불러와 config를 실행해야 환경변수를 사용할 수 있다.
const CLIENT_ID = process.env.CLIENT_ID;
const CLIENT_SECRET = process.env.CLIENT_SECRET;
// ✅ 이후에는 process.env로 꺼내쓸 수 있다.