환경 변수 주입하기

지원환경: React NativeReact Native SDKv1.0.3

실행환경: Toss AppSandbox App

plugin-env

plugin-env는 환경 변수(예: 개발, 운영 등)를 프로젝트에 주입해서 import.meta.env로 쉽게 접근할 수 있도록 도와주는 플러그인이에요.

설치 방법

패키지 매니저에 따라 아래 명령어 중 하나를 사용해서 설치할 수 있어요.

# npm을 사용하는 경우
npm install '@granite-js/plugin-env';

# yarn을 사용하는 경우
yarn add '@granite-js/plugin-env';

# pnpm을 사용하는 경우
pnpm add '@granite-js/plugin-env';

예제

환경 변수 주입하기

// granite config
import { appsInToss } from '@apps-in-toss/framework/plugins';
import { defineConfig } from '@granite-js/react-native/config';
import { env } from '@granite-js/plugin-env';

export default defineConfig({
  scheme: 'intoss',
  appName: 'my-granite-app',
  plugins: [
    appsInToss({
      brand: {
        displayName: 'my-granite-app', // 화면에 노출될 앱의 한글 이름으로 바꿔주세요.
        primaryColor: '#3182F6', // 화면에 노출될 앱의 기본 색상으로 바꿔주세요.
        icon: "", // 화면에 노출될 앱의 아이콘 이미지 주소로 바꿔주세요.
        bridgeColorMode: 'basic',
      },
      permissions: [],
    }),
    env({ MY_ENV_VAR: 'Hello, World!' }),
  ],
});

// service
import.meta.env.MY_ENV_VAR; // 'Hello, World!'