CodeHoon

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요 상훈입니다.

✔ 환경 설명 

- Vite, Vue3, typescript
- .env 파일에 firebase api key 를 넣어놓고 사용하려고 함  => 보안측면

✔ 방법

1. /.env 파일을 준비
2. /env.d.ts 파일을 준비
3. /src/firebase/index.ts  (:아무 경로나 상관없음) 을 준비

1. .env

1) .env에서는 key=value 형태로 작성하도록 합니다.
2) VITE_ 접두어(prefix) 를 적용하여 변수명을 입력합니다. 
    > 미작성시 호출못함

2. /env.d.ts

기본적으로 typescript 기반의 vite 프로젝트를 만들게 되면  root 경로에 위의 파일이 자동으로 생성되어져 있습니다.

/// <reference types="vite/client" />
interface ImportMetaEnv {
  env: {
    VITE_FIREBASE_API_KEY: string;
    NODE_ENV: 'development' | 'production';
  };
}

.env 에서 작성하신 변수명과 똑같이 작성해주세요.
( 실험해봤는데, NODE_ENV는 작성해도 안해도 상관없었습니다. MODE (개발,배포) 버전의 문제라서요.)

여기서 .d 가 의미하는건 declare(선언하다) 라는 뜻.
env의 타입(ts)을 선언(d)하겠다. 라는 의미인 것으로 저는 해석했습니다.

3. /src/firebase/index.ts  (:아무 경로나 상관없음)

저는 해당 파일을 firebase를 사용하는곳에다가 import 할 것이기 때문에 파일로 분리하였습니다.

보시면 상수 firebaseApiKey 를 할당할 때에 import.meta.env.VITE~로 해주었죠?

import.meta.env 를 통해서 환경변수에 접근이 가능합니다. (vite 공식문서에 있음)

그리고 이제 console 혹은 실제 서비스를 사용해보면 정상적으로 출력된것을 확인하실 수 있습니다.

이상입니다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요 상훈입니다.

✔ 환경

이번 에러는 에러라고 하기에는 애매하고, VSCode를 사용할 때에 발생할 수 있는 내용입니다.

프로젝트는 잘 구동되지만, 에러가 신경쓰였습니다.

Cannot find module './App.vue' or its corresponding type declarations.

src/main.ts 에서 [ import App from '@/App.vue' ] 부분에 밑줄이 그어지면서 에러라고 표기되었습니다.

✔ 해결방법

extensions - @builtin typescript - 설정(settings) - Disable(workspace) 를 해줍니다. 

그리고 reload VSCode! 

이제 빨간 에러문구가 뜨지않는것으로 확인하였습니다.

✔ 원인

이 extension이 .vue 파일을 제대로 읽어내지 못하기 때문인 것으로 보입니다.

진짜 별거 아닌데, 신경쓰여서..

이상입니다.

안녕하세요 상훈입니다.

Vue.js 3 혹은 2를 사용하시는데 갑자기 

Vue.createApp is not working but Is working with new Vue() method

이러한 에러가 떴다면, 사용하려는 script cdn 혹은 설치하신 vue 라이브러리가 Vue 2를 의미합니다.

그렇기 때문에 Vue 3 로 변경을 해주어야합니다.

개발 모드 혹은 공부하실 때 사용하시면 되는 cdn 주소입니다.

<script src="https://unpkg.com/vue@next"></script>

이걸로 복사하셔도 무방하구요!

참고