프로젝트 진행중 오류가 발생했을때

오늘 배운 중요한 KEY POINT

보안을 위해 firebase api주소를 숨기기 위해서는 다양한 방법들이 있지만 .emv파일은 html에서 작동하지 않으니 .gitignore를 이용해서 api주소를 공유하지않는 방법을 사용할수 있다

js파일에 api,key등 숨기고싶은 코드를 작성하고 gitignore로 공유를 제한하는 방법을 썼을때 본래의 프로젝트에서 alt+B 단축기로 프로젝트를 열경우 로컬에서 파일을 단순히 여는것이기 때문에  본 프로젝트 코드 내에 import를 하고 js파일에 export를 했다고 하더라도  하나의 파일을 열었기때문에 연동이 되지 않아 firebase가 작동하지 않는것을 확인할 수 있다. 그럴경우에는 open with live server를 사용해서 페이지를 열어주면 firebase연동까지 잘 작동하는것을 확인할 수 있다.

 

이것만은 기억하자!

하나의 프로젝트 파일에 다른 파일들과 import등으로 연결이 되어있다고 하더라도 로컬영역에서 파일을 열때는 본래의 하나의 파일만 열어지기때문에  라이브 서버에서 작동을 하는지도 확인을 해보자! 

코드를 작성하다가 예상치못한 오류가 발생했을때 F12 -> Consol, Elements 영역을 살펴보면 어느 영역에서 오류가 발생했는지를 알 수 있기때문에 vscode같은 IDE에서뿐만 아니라 웹상에서도 오류를 확인하고 수정할 수 있도록 하자!

F12를 생활화하자!

 

예시)

<script type="module">
        // Firebase SDK 라이브러리 가져오기
        import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
        import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
        import { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
        import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
        import { query, orderBy } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
        import { doc, deleteDoc, getDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
        import firebaseConfig from "../firebase.js";

        // Firebase 구성 정보 설정
        const apikey = firebaseConfig.apiKey;
        const authDomain = firebaseConfig.authDomain;
        const projectId = firebaseConfig.projectId;
        const storageBucket = firebaseConfig.storageBucket;
        const messagingSenderId = firebaseConfig.messagingSenderId;
        const appId = firebaseConfig.appId;

        const firebaseConfig2 = {
            apiKey: apikey,
            authDomain: authDomain,
            projectId: projectId,
            storageBucket: storageBucket,
            messagingSenderId: messagingSenderId,
            appId: appId
        };


        // Firebase 인스턴스 초기화
        const app = initializeApp(firebaseConfig2);
        const db = getFirestore(app);

 

JS파일

 

export default{
    apiKey: "1234",
    authDomain: "1234",
    projectId: "1234",
    storageBucket: "1234",
    messagingSenderId: "1234",
    appId: "1234"
};

 

 

 

 

위 2개의 코드를 이용해서 firebase 중요정보를 숨기는것을 간단하게 해결할 수있다.

.gitignore에 js파일을 넣는것도 잊지말자