환경별 Remote URL 매핑, 조건문보다 명시적 매핑이 낫다 (안그러면 버그위험 up)

[milooy]

서비스에서 remoteEntry.js를 불러올 때,
환경에 따라 다른 URL을 바라보도록 설정해두었다.

처음에는 이렇게 짰다

entry: ENV === 'alpha' ? REMOTE_URLS.alpha : REMOTE_URLS.live;

하지만 버그발생 띠용
알고보니 'preview'라는 ENV가 있는데, 여기서도 alpha Entry를 보여줘야 했던거임.

그래서 이렇게 고쳐보았다

// NOTE: preview, alpha, local은 전부 alpha를 사용한다
entry: ENV === 'live' ? REMOTE_URLS.live : REMOTE_URLS.alpha;

특별취급 대상을 live로 바꾼거지.
다만... 주석으로 의도를 남겼지만
처음에 짠 코드와 동일하게 잠정적 버그의 여지가 있어부려

최종적으로는 명시적 매핑으로 고쳤다

const mappedEnv = match(ENV)
  .with('preview', () => 'alpha' as const)
  .with('alpha',   () => 'alpha' as const)
  .with('staging', () => 'staging' as const)
  .with('live',    () => 'live' as const)
  .exhaustive();

entry: REMOTE_URLS[mappedEnv];

export const REMOTE_URLS = {
  alpha:   'https://.../alpha/remoteEntry.js',
  staging: 'https://.../alpha/remoteEntry.js', // alpha와 동일
  live:    'https://.../live/remoteEntry.js',
};

배운 점

• 조건문으로 환경을 분기하면, 새로운 ENV가 추가될 때 실수하기 쉽다.
• 명시적 매핑 객체/패턴 매칭으로 바꾸면 의도가 코드에 드러나고, 버그 가능성이 줄어든다.
• 정책(ENV 매핑)과 데이터(URLs)를 분리하면 유지보수성이 훨씬 좋아진다.

[yoonminsang]

보통 env 파일로 관리할 것 같은데 위와 같이 사용해아하는 경우도 있군요?!

[al-bur]

완전 공감합니다 저도 삼항 연산자로 떼우려다가 버그를 맞이했던 경험이