1. env가 뭐냐!

• 환경 변수 파일
• 애플리케이션이 실행될 때 넘기고 싶은 특정 값을 담고 있는 변수가 기록.
• 미리 정의된 값을 애플리케이션에서 활용하고 싶을 때 이 .env 파일을 활용.
• Api를 사용하거나 인증 관련 기능을 구현할 때, key를 노출하지 않기 위해 환경 변수 파일에 key를 넣어주고 필요할 때 꺼내올 수 있음.
  - 웹,앱 개발을 하다보면 포트, DB관련 정보, API_KEY등.. 개발자 혼자서 또는 팀만 알아야 하는 값 즉, git, 오픈소스에 올리면 안되는 값들이 있음.
• dotenv 패키지 = 환경변수 파일을 외부에 만들어 URL,포트, API_KEY등.. 을 저장시켜 소스코드 내에 하드코딩하지 않고 사용 할 수 있음.
  - 환경변수를 정의하여 변수로 받아오는 이유 : 보안과 유지보수에 용이
• .env파일은 프로젝트의 최상위 루트에 위치한다.
  
  
  

2. .env파일 사용법

• .env.{mode명}
• .env.--- 파일의 내용을 수정하면 npm 으로 다시 시작해야됨.
• process.env.REACT＿APP＿ 는 예약어이므로, 다른 이름은 사용하면 React가 인식하지 못함.

3. .env 활용 모듈 - dotenv

• nodeJS 의 모듈로, npm 을 사용해 설치하고 사용 할 수 있음.
• dotenv 를 사용해 현재 디렉토리에 위치한 .env 파일로부터 환경 변수를 읽어냄.
  npm install dotenv
• require("dotenv").config();
  애플리케이션이 작동될 때 가장 먼저 실행되는 js파일의 최상단에서 config() 함수를 호출 하면 .env파일에 저장된 환경 변수를 process.env 모듈을 통해 불러올 수 있다.

4. 실행 환경에 따른 .env분리방법

• .env : 기본 설정 파일

• .env.local : .env 파일을 오버라이드(override)함.
  테스트 환경을 제외하고 모든 환경에서 사용.

• .env.development, .env.test, .env.production : 각 실행 환경에 따라 사용.

• .env.development.local, .env.test.local, .env.production.local : 각 실행 환경에 따라 사용되는 .env.{environment} 파일을 오버라이드한다.

• gitignore에 다 적용하자.

5. react-script 실행시 우선순위

• npm start
  .env.development.local > .env.local > .env.development > .env
• npm run build
  .env.production.local > .env.local > .env.production > .env
• npm test
  .env.test.local > .env.test > .env

---

👉 Google Api Key 숨기기

0. .env파일은 프로젝트의 최상위 루트에 위치하도록 한다.
1. gitignore파일에 .env추가
2. .env파일 안에 반드시 "REACT_APP_```원하는이름"으로 이름을 지어주고 KEY를 작성한다.
   • 🥁🥁🥁 REACT_APP_으로 시작해야 react에서 인식함.
3. html 파일에서는 '%REACT_APP_이름%'으로 사용하면 되고, .js나 .jsx에서는 process.env.REACT_APP_이름으로 사용

---

👉 사용 예시

// 👉 react 일 때
// .env 
 REACT_APP_GOOGLE_API_KEY=Aa1Bb2Cc3Dd4Ee5Ff6Gg7Hh8Ii9Jj0
 NEXT_PUBLIC_GRAPHQL_PORTFOLIO_API_URL=https://pye-portfolio-api.co.kr/board/graphql


// component
import * as Apollo from '@apollo/client';
import { HttpLink } from '@apollo/client' ;   
		 // HttpLink : POST,  GET 요청을 모두 지원.
         // 작업별로 HTTP 옵션을 구성할 수 있다.
                  
const Link = new Apollo.HttpLink ( {  
	uri : process.env.NEXT_PUBLIC_GRAPHQL_PORTFOLIO_API_URL
 	//  + 추가 옵션
} ) ;
        
const GoogleApiKey = new Apollo.HttpLink({
	uri : process.env.REACT_APP_GOOGLE_API_KEY
})  

const {data} = await axios.get(`${process.env.NEXT_PUBLIC_GRAPHQL_PORTFOLIO_API_URL}/todos`)

// 👉 node.js일 때 
//.env
GOOGLE_API_KEY=Aa1Bb2Cc3Dd4Ee5Ff6Gg7Hh8Ii9Jj0
PORTFOLIO_API_URL=//pye-portfolio-api.co.kr/board/graphql

//callback.js
require('dotenv').config();
// 상단에 dotenv를 불러와 config를 실행해야 환경변수를 사용할 수 있다.

const GOOGLE_API_KEY = process.env.GOOGLE_API_KEY;
const PORTFOLIO_API_URL = process.env.PORTFOLIO_API_URL;
// 이후에는 process.env로 꺼내쓸 수 있다.```

---

참고 : HttpLink + 옵션들 : Apollo-Client Docs
참고 : env를 이용한 변수선언 및 사용법
참고 : 실행 환경에 따른 env 분리 등
참고
참고 : .env파일 만들기
참고 : .env 파일 관리부터 dotenv & DB랑 NodeJS 연결하기
참고 : env파일에 대하여