들어가기 전에..

• 메인 프로젝트에 제일 핵심적인 부분이 kakaomap api를 사용해서 약국의 위치들을 구현하는 것이다. kakaomap api를 사용하기 위해 api key를 발급 받아서, CRA에서 .env 파일에 REACT_APP_을 prefix로 썼는데.. 콘솔에 에러가 떴다..
  
• 구글링을 통해 환경변수는 번들러에 따라 다르게 설정된다는 것을 알았다..😳😳
• 그리고 환경변수는 빌드 타임에 embed 되기 때문에, 변경된다면 앱을 리로드 해야한다는 점도 알게 되었다.
• .env파일을 src 하위 디렉토리에 넣는 실수도 조심!!😂😂

CRA (create-react-app)의 환경변수

• CRA로 리액트앱을 만드는 경우에는 .env파일에 REACT_APP_을 prefix로 써야 리액트 앱이 인식하고, 앱에서 process.env.으로 접근하여 사용할수 있다.

Vite의 환경변수

• Vite에서 환경변수 역시 process.env 객체를 통해 가져올 수 있다.
• 참고로 Vite는 Vite의 설정을 끝마친 뒤 어떻게 파일을 불러올 것인지 알 수 있기 때문에, 기본적으로 .env 파일을 로드하지 않는다. 가령 root 또는 envDir 설정 값에 따라 어떻게 파일을 불러올 것인지 달라진다. 다만 필요하다면 loadEnv 헬퍼를 사용해 .env 파일을 불러올 수도 있다.

env 작성

//.env
VITE_APP_API_URL =""
VITE_APP_KAKAOMAP_API_KEY = 

vite.config.ts

• vite-plugin-html 설치

npm i vite-plugin-html

• loadEnv 헬퍼를 사용해 process.env 객체를 불러오고 .env 파일에 환경변수를 가져온다.

//vite.config.ts
import { defineConfig, loadEnv } from "vite";
import { createHtmlPlugin } from "vite-plugin-html";
import react from "@vitejs/plugin-react";

export default ({ mode }) => {
  const env = loadEnv(mode, process.cwd());
  return {
    plugins: [
      react(),
      createHtmlPlugin({
        minify: true,
        inject: {
          data: {
            kakaoappkey: env.VITE_APP_KAKAOMAP_API_KEY,
          },
        },
      }),
    ],
  };
};

index.html

• <%= kakaoappkey %>로 html에 .env에 있는 환경변수를 불러올 수 있다.

 <script type="text/javascript" strategy="beforeInteractive"
    src="//dapi.kakao.com/v2/maps/sdk.js?appkey=<%= kakaoappkey %>&libraries=services,clusterer,drawing"></script>