해결 과정

JS(React)로 만들었던 페이지를 TS로 마이그레이션하는 중에 문제가 발생했습니다.

레이아웃 구성은 동일하나 데이터만 가져오지 못했습니다. 데이터 요청 부분이 문제로 보여 개발자 도구로 확인했습니다.

url에 undefined가 포함되어 있었습니다. 변수에 값이 들어가지 않아서 발생한 문제로 보였습니다.

환경 변수 문제로 판단했습니다.

TS 마이그레이션과 함께 환경 변수 작업을 진행했는데, 이 부분에서 문제가 발생한 것으로 보였습니다.

BASE_URL="주소"

// constants.ts
export const BASE_URL = process.env.BASE_URL;

기존 env 파일과 이를 사용하는 ts 파일입니다.

process.env는 Node.js 런타임 환경에서 환경 변수를 저장하는 객체입니다. Express에서 사용하는 방식이므로 Vite 환경에서는 잘못된 접근입니다.

Next.js에서는 NEXT_PUBLIC_으로 클라이언트와 서버의 환경 변수를 구분합니다. Vite도 유사한 구분법이 있을 것으로 판단하여 공식문서를 확인했습니다.

Vite에서는 VITE_로 시작하는 환경 변수를 사용합니다. 일부 변수명은 기본으로 예약되어 있습니다.

BASE_URL은 Vite에서 앱 내의 베이스 URL을 표시하는 예약된 변수입니다. 충돌을 피하기 위해 URL로 변경했습니다.

VITE_URL = "주소"

export const BASE_URL = import.meta.env.VITE_URL;

vite build로 변수를 dist로 가져옵니다.

VITE_로 시작하는 환경 변수는 번들링 시 무조건 포함됩니다. 데이터베이스 비밀번호 같은 민감한 정보는 넣으면 안 됩니다.

결과

JS에서 TS로 마이그레이션 하는 중에 생긴 일입니다!

잘못된 내용이 있다면 말씀 부탁드립니다. 감사합니다.