프론트엔드 입장

1. Firebase에서 프로젝트 만들기

1)

Untitled

2)

Untitled

3) 아래 코드를 바탕으로 index.html 작성하기

Untitled

index.html

<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="module">
        **import { initializeApp } from "<https://www.gstatic.com/firebasejs/9.6.8/firebase-app.js>";
        const firebaseConfig = {
            apiKey: "AIzaSyADDVJdiAAOERqPsFr5Fft0aT-aPznA_mQ",
            authDomain: "fcm-push-9b0df.firebaseapp.com",
            projectId: "fcm-push-9b0df",
            storageBucket: "fcm-push-9b0df.appspot.com",
            messagingSenderId: "549052762400",
            appId: "1:549052762400:web:8af000fb307c4e1766ef45",
            measurementId: "G-Z62E4981NE"
        };
        const app = initializeApp(firebaseConfig);**

        // Import the functions you need from the SDKs you need
        import { getMessaging, getToken } from "<https://www.gstatic.com/firebasejs/9.6.8/firebase-messaging.js>";
        // TODO: Add SDKs for Firebase products that you want to use
        // <https://firebase.google.com/docs/web/setup#available-libraries>
        const messaging = getMessaging();
        getToken(messaging, { vapidKey: 'BCydbgMybFxAd77v9rH3fjHzXH4Uj1cg_2B9Jao9YudQl55iEQdAQl2QzAkk0dmjNwXtoxY55iDPJ1MTWpBFWK4' }).then((currentToken) => {
            console.log("currentToken");
            console.log(currentToken);
        }).catch((err) => {
            console.log('An error occurred while retrieving token. ', err);
        });
    </script>
</body>
</html>

4)

Untitled

5)

Untitled

6)

$ firebase init을 하는 순간, 아래의 파일 구조가 생긴다. 그러면 위에서 만든 index.html 파일을 public 폴더 안으로 넣어라.

Untitled