[React] proces.env 관련 에러 해결

Create react app으로 만든 프로젝트에서 process.env를 불러오는데 에러가 나는 경우가 있다.

1. 잘 불러왔는데, undefined가 나오는 경우

이 경우에는 변수명에 REACT_APP_을 붙였는지 확인하고 붙여야한다. 정확한 이유는 모르겠지만 그렇게 작동한다. 이 후 클라이언트 재접속을 해줘야 정상적으로 작동한다.

next라면?

next js를 사용한다면 REACT_APP이 아니라 NEXT_PUBLIC으로 하면 된다.
예를 들어 BASE_URL을 하는 경우,

BASE_URL=http://localhost:3000
NEXT_PUBLIC_BASE_URL=http://localhost:3000

이와 같이 설정 가능하다.
첫 번째 BASE_URL은 서버컴포넌트와 라우터핸들러에서만 인식된다. (서버에서만)
그리고 두 번째 NEXT_PUBLIC_BASE_URL은 서버와 클라이언트 둘 다 인식된다.

2. process.env로 불러온 변수명의 타입 에러 나는 경우

타입스크립트는 process.env가 string 인지 확신하지 않기 때문에 undefined의 가능성을 열어둔다.

이 때 다음과 같이 작성하면 해당 오류를 벗어날 수 있다.

const supabaseUrl: string = process.env.REACT_APP_SUPABASE_URL || '';

위와 같이 || ''를 뒤어 적어둠으로 인해서 undefined가 날 상황을 없애주면 된다.

혹은 사용시에 타입단언을 해줘도 된다.

const supabaseUrl = process.env.REACT_APP_SUPABASE_URL;
const supabaseKey = process.env.REACT_APP_SUPABASE_BASE_KEY;
const supabase = createClient(supabaseUrl as string, supabaseKey as string);