Vue.js는 Javascript 프레임워크로, 타입스크립트(TypeScript)를 통합하여 사용할 수 있습니다. 프로젝트에서 환경변수를 사용하는 것은 보편적인 요구사항입니다. 이번 글에서는 Vue.js와 타입스크립트 환경에서의 환경변수 설정 방법에 대해 알아보겠습니다.
Vue.js 프로젝트에 타입스크립트 추가하기
우선, Vue.js 프로젝트에 타입스크립트를 추가해야 합니다. Vue CLI를 사용하여 프로젝트를 생성하고, 프로젝트 생성 옵션에서 타입스크립트를 선택하거나, 이미 생성된 프로젝트에 타입스크립트를 추가할 수 있습니다.
예를 들어, Vue CLI를 통해 프로젝트를 생성할 때, 타입스크립트를 사용하려면 다음과 같이 입력합니다.
vue create --default my-project
cd my-project
vue add typescript
환경변수 설정
타입 선언 파일 생성
먼저, 타입스크립트 환경에서 환경변수를 사용하기 위해 프로젝트 루트에 custom.d.ts와 같은 이름의 타입 선언 파일을 생성합니다. 이 파일은 전역으로 사용할 환경변수의 타입을 선언하기 위한 것입니다.
// custom.d.ts
declare module '@env' {
export const API_KEY: string;
export const BASE_URL: string;
}
위 예시에서 API_KEY와 BASE_URL는 프로젝트에서 사용할 환경변수 이름으로 가정하고 있습니다.
환경변수 파일 생성
다음으로, 환경변수 파일을 프로젝트에 생성합니다. 환경변수는 보통 .env 파일에 저장하며, 환경에 따라 .env.development, .env.production과 같이 구분하여 사용할 수 있습니다.
예를 들어, .env 파일은 다음과 같이 작성할 수 있습니다.
API_KEY=your_api_key
BASE_URL=your_base_url
환경변수 사용
환경변수를 사용하기 위해서는 Vue 컴포넌트나 서비스에서 process.env 객체를 통해 접근할 수 있습니다.
const apiKey = process.env.API_KEY;
const baseUrl = process.env.BASE_URL;
결론
이제 Vue.js와 타입스크립트를 함께 사용하는 프로젝트에서 환경변수를 설정하는 방법에 대해 알아보았습니다. 환경변수를 효과적으로 활용하여, 환경에 따라 다른 설정값을 쉽게 관리할 수 있습니다.
환경변수 설정에 대한 자세한 내용은 Vue CLI 또는 타입스크립트 공식 문서를 참고하시기 바랍니다.