환경변수 검증하기

검증이 필요한 이유

현재 Vite 로 구성한 React 앱에서는 다음과 같이 환경 변수를 불러올 수 있다.
그리고, 사용하는 시점에서 값이 존재하는 지 검증하게 된다.

const { VITE_AUTH_STORAGE_KEY, VITE_API_URL } = import.meta.env;

if (!VITE_AUTH_STORAGE_KEY || !VITE_API_URL) {
  throw new Error("환경 변수가 누락되었습니다.");
}

나도 그동안 위와 같은 방식을 사용했다. 하지만, 이 방식에는 몇 가지 문제가 있다.

먼저, 이 VITE_API_URL 을 사용하는 곳이 여러 군데라면 매번 검증을 진행해야 한다.
즉, 불필요한 코드가 반복되는 것이 분명하다.

그리고, 앱 실행 시점에 환경 변수를 검증하지 않기 때문에, 필요해진 시점에 없다면 문제가 발생하고,
앱이 중단될 가능성이 있다.

실제로, Github Actions 로 CI/CD 를 하는 과정에서 이 부분이 문제 없이 넘어가지만,
앱은 정상동작하지 않는 경우를 만날 수 있었다.

왜 zod 인가?

프로젝트에서는 이미 폼 검증을 위해 react-hook-form 과 zod 를 활용하고 있었다.
zod 는 스키마 검증 라이브러리이고, 아주 쉽게 사용할 수 있다. 또, TypeScript 타입 추론이 가능하다.

일반적인 <form> 을 검증하는 경우에는 다음과 같이 작성할 수 있다.
정말 직관적이다.

export const loginFormSchema = z.object({
  username: z.string().min(1, {
    message: '...',
  }),

  password: z.string().min(1, {
    message: '...',
  }),
}); 

마찬가지로 config/env.ts 에 환경 변수의 스키마를 정의하고 검증할 수 있다.

const envSchema = z.object({
  AUTH_STORAGE_KEY: z.string(),
  
  API_BASE_URL: z.string(),
  API_SOCKET_URL: z.string(),
});

type Env = z.infer<typeof envSchema>;

const processEnv: Env = {
  AUTH_STORAGE_KEY: import.meta.env.VITE_AUTH_STORAGE_KEY,
  
  API_BASE_URL: import.meta.env.VITE_API_URL,
  API_SOCKET_URL: import.meta.env.VITE_SOCKET_URL,
};

function validateEnv() {
  try {
    return envSchema.parse(processEnv);
  } catch (error) {
    if (error instanceof z.ZodError) {
      throw new Error('적절한 환경 변수가 설정되지 않았습니다.');
    }

    throw error;
  }
}

export const ENV = validateEnv();

그래서 검증하면 뭐가 좋은가?

검증 로직을 작성하고 나면, 다음과 같은 이점이 있다.

1. 실행 초기에 환경 변수를 검증하기 때문에, 누락된 값을 조기에 찾고, 앱이 중간에 멈추지 않도록 할 수 있다.
2. 사용시점마다 검증을 하지 않아도 되기 때문에, 불필요한 코드를 줄일 수 잇다.
3. 타입 추론이 되기 때문에, 자동완성을 활용할 수 있다.

참고자료