[React] 타입 스크립트에서 dotenv 자동완성 기능 만들기

안녕하세요. J4J입니다.

 

이번 포스팅은 타입 스크립트에서 dotenv 자동완성 기능 만드는 방법에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

dotenv 자동완성 기능 만드는 방법

 

dotenv를 사용하다 보면 느끼는 점 중 하나는 자동완성이 되지 않기 때문에 파일에 찾아가 사용할 변수를 복사하는 작업을 매번 해줘야 합니다.

 

만약 dotenv에 자동완성이 된다면 이런 불편한 행동들을 매번 해줄 필요가 없을 것이라고 생각되었고 타입 스크립트에서 자동완성 기능을 사용하는 방법에 대해 알게 되어 글을 적어보게 되었습니다.

 

기본적으로 dotenv를 사용하는 환경이 구성되어 있다는 가정하게 추가 설정을 해보도록 하겠습니다.

 

 

반응형

 

 

[ 1. .env 파일에 사용할 변수 저장 ]

 

MY_KEY=keykeykeykey
API_KEY=123api456key

 

 

 

[ 2. env 타입 지정 ]

 

/src/@types에 env.d.ts라는 파일을 생성하고 다음과 같이 입력해줍니다.

 

declare namespace NodeJS {
    export interface ProcessEnv {
        MY_KEY: string;
        API_KEY: string;
    }
}

 

 

728x90

 

 

[ 3. 자동완성 확인 ]

 

위와 같이 설정을 했다면 아무 파일에나 다음과 같이 process.env. 을 입력하고 ctrl+space를 눌러 자동완성이 가능한 목록들을 확인할 수 있습니다.

 

자동완성 결과

 

 

 

파일 구성

 

파일 구성

 

 

 

 

 

이상으로 타입 스크립트에서 dotenv 자동완성 기능 만드는 방법에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.