Next.js 환경 변수와 Array.filter(): next-runtime-env로 배우는 비밀 공개

2024-12-25 01:17:28

typescriptreactnextjsopensource

Next.js 프로젝트와 환경 변수 관리

Next.js는 현대적인 웹 개발을 위한 강력한 프레임워크로, 서버사이드 렌더링(SSR)과 정적 사이트 생성(SSG) 등의 기능을 제공합니다. 이러한 기능을 구현할 때, 환경 변수는 손쉽게 민감한 정보를 관리하거나 환경 구성을 달리하는 데 유용합니다. 특히, 공용 환경 변수는 보안에 신경 쓰면서도 유효한 정보를 클라이언트측에 제공하기 위해 중요한 개념입니다. 이번 게시글에서는 next-runtime-env라는 오픈 소스 프로젝트의 코드 예제를 통해 이런 공용 환경 변수를 어떻게 효율적으로 필터링하여 활용할 수 있는지 살펴보겠습니다.

코드 이해: Array.filter()와 정규 표현식(Regex)의 활용

next-runtime-env 프로젝트의 일부인 helpers/public-env.ts 파일에서 환경 변수를 필터링하는 함수 코드를 분석해보겠습니다. 이 코드 조각은 환경 변수들 중 NEXT_PUBLIC_로 시작하는 것만을 골라 새로운 객체를 만듭니다.

import { ProcessEnv } from '../typings/process-env';

/**
 * Gets a list of environment variables that start with `NEXT_PUBLIC_`.
 */
export function getPublicEnv() {
  const publicEnv = Object.keys(process.env)
    .filter((key) => /^NEXT_PUBLIC_/i.test(key))
    .reduce(
      (env, key) => ({
        ...env,
        [key]: process.env[key],
      }),
      {} as ProcessEnv,
    );
  return publicEnv;
}

Object.keys()로 객체의 키 추출

Object.keys(process.env)는 process.env 객체의 모든 키를 배열로 반환합니다. 이는 환경 변수 키를 작업할 수 있는 배열 형태로 변환하는데 필수적입니다. 예를 들어서 .env 파일에 아래와 같은 데이터가 포함되어 있다고 가정합시다.

NEXT_PUBLIC_SUPABASE_ANON_KEY=id_123
DATABASE_URL=https://some-database-url

위와 같은 설정이 있을 때, Object.keys(process.env)는 다음과 같은 배열을 생성합니다.

[
  "NEXT_PUBLIC_SUPABASE_ANON_KEY",
  "DATABASE_URL"
]

filter()와 정규 표현식으로 키 선택

Array.prototype.filter() 메서드는 주어진 배열을 조건에 따라 필터링하는 데 사용됩니다. 이 코드에서는 정규 표현식 /^NEXT_PUBLIC_/i.test(key)를 이용하여 NEXT_PUBLIC_로 시작하는 모든 키를 검토합니다. NEXT_PUBLIC_으로 시작하는 환경 변수들은 클라이언트 측에 노출될 수 있도록 설정되는 규칙이 있어 필터링의 목적에 부합합니다.

reduce()로 객체 최적화

Array.prototype.reduce() 함수는 배열을 순회하면서 누적 결과를 구성하는 역할을 합니다. 여기서는 filter()를 통해 선택된 키들을 다시 객체 형태로 바꿔 줌으로써 환경 변수의 키 이름과 그 값을 다시 재구성합니다. 새로운 객체는 ProcessEnv 유형으로 명확하게 타이핑되어 있으며, ...env 스프레드 연산자를 통해 누적된 객체가 갱신되는 방식입니다.

next-runtime-env의 역할과 영향

next-runtime-env 라이브러리는 환경 변수의 범위를 사용자가 명확하게 관리할 수 있게 도와주는 도구로, 특히 런타임 시점에 환경 변수를 설정할 수 있어 다양한 개발 및 실서비스 환경에 민첩하게 대응할 수 있습니다. 이를 통해 개발자는 코드의 보안성을 유지하면서도 유연하게 환경 설정을 변경할 수 있습니다.

결론

이번 글에서는 next-runtime-env의 코드를 통하여 Next.js 환경 관리의 요점을 살펴보았습니다. 정규 표현식과 배열 메서드인 filter()와 reduce()를 활용해 얼마나 효율적으로 원하는 환경 변수를 선택할 수 있는지 확인할 수 있었습니다. 이러한 코딩 패턴은 클라이언트와 서버 간의 데이터 흐름을 안전하고 명확하게 관리하는 좋은 사례입니다.

R_11