사용기 및 에러처리 기록

작업 상태

- 리액트에서 로그인 페이지 작업중 디자인 코드를 붙인 후에 발생했습니다.
 
에러 메시지 

Warning: Invalid DOM property `for`. Did you mean `htmlFor`?

원인
- React에서 JSX 코드를 작성할 때 발생하는 것으로, for와 같은 일부 DOM 속성은 JSX에서 사용할 때 이름이 다릅니다.

<label className="block" for="email">Email</label>
<input
    type="email"
    name="email"

처리

-  속성을 JSX에서 올바른 이름으로 작성하면 해결됩니다.

<label className="block" htmlFor="email">Email</label>
<input
    type="email"
    name="email"

참고

이 외에도 다양한 DOM 속성들이 있으며, JSX에서 사용할 때 이름이 다를 수 있습니다. 이러한 속성들의 이름은 일반적으로 camelCase로 작성됩니다.

작업 상태

- 기존에 react에서 사용하던 코드를 vite사용 환경으로 포팅하던중 .env 에서 설정한 변수 사용중 발생했습니다.

- react만 사용할때는 정상 작동했던 코드입니다.

.env

REACT_APP_LOG_LEVEL=debug

const apiLogLevel = process.env.REACT_APP_LOG_LEVEL; //에러가 발생한 장소 입니다

에러 메시지 

Uncaught ReferenceError: process is not defined

원인

- vite 쪽 환경으로 이동하면서 발생한 문제였습니다.

처리

-  vite 에서 환경변수 관리하는 형태로 변경합니다.

- vite 쪽에서 VITE_ prefix 사용을 권장합니다.

const apiLogLevel = import.meta.env.VITE_APP_LOG_LEVEL;

.env

VITE_APP_LOG_LEVEL=debug

또는

npm install dotenv 이후 

로 하면 동작하기는 합니다.

참고

--------------------------React

React에서 .env 환경 변수를 사용하기 위해서는 몇 가지 조건이 있습니다.

환경 변수 이름은 반드시 REACT_APP_으로 시작해야 합니다.
환경 변수는 프로젝트 루트 디렉토리에 위치한 .env 파일에 선언해야 합니다.
위 두 가지 조건을 만족하면, React 애플리케이션에서 process.env.REACT_APP_ 접두어를 사용하여 .env 파일에 선언된 환경 변수에 접근할 수 있습니다.

.env 파일명 

<projectroot>/.env
REACT_APP_LOG_LEVEL=debug

react.js에서 사용예시

const apiLogLevel = process.env.REACT_APP_LOG_LEVEL;

--------------------------Vite

Vite에서 .env 환경 변수를 사용하기 위해서는 다음과 같은 방법을 사용할 수 있습니다.

.env 파일을 프로젝트 루트 디렉토리에 위치시킵니다.
.env 파일에서 사용할 환경 변수를 선언합니다. 변수 이름은 VITE_으로 시작해야 합니다.

/.env
VITE_APP_LOG_LEVEL=debug

vite 환경에서 사용예시

const apiUrl = import.meta.env.VITE_APP_LOG_LEVEL;

주의할점은, Vite에서는 .env.local, .env.development, .env.production과 같은 환경 변수 파일도 지원합니다. 이러한 파일을 사용하면, 개발 환경과 프로덕션 환경에서 각각 다른 환경 변수 값을 설정할 수 있습니다.

보통은 참조할점인데. react에서 이동하는 상황이어서  .env, .env.development, .env.production 이 세개의 파일이 존재했는데, vite에서는 설정값에 따라 알아서 다른 환경변수 파일을 불러옵니다.

Vite의 환경 변수와 모드 | Vite (vitejs-kr.github.io)