앞선 글을 통해 Firebase 처음 사용을 위해, 파이어 베이스 콘솔에서 프로젝트를 새로 만들고, 필요한 에디터인 Visual Studio를 설치한 후 Visual Studio에서 해당 프로젝트에 파이어 베이스 SDK를 연결하는 과정을 소개한 바 있었다.
https://blog.naver.com/mythee1/223491033437
이러한 과정을 거치고 나면 Visual Studio에 다음과 같이 index.html이 자동으로 생성되며, 이를 template로 삼아 원하는 페이지와 DB 작업을 하면 되는데,
나의 경우에는 이러한 기본 index.html 파일에 본격적인 Firebase 사용을 위해 다음과 같이 약간의 변형을 가해주었다.
1. 당장은 사용하지 않은 불필요 라인들 삭제하기
우선 index.html에서 당장 사용하지 않을 기능이나, 불필요한 내용을 HTML 문서의 기본 골격만 남기고 모두 삭제했다. 삭제한 후의 index.html은 다음과 같은 형태가 되었다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> My Template</title>
<!-- update the version number as needed -->
<script defer src="/__/firebase/10.12.2/firebase-app-compat.js"></script>
<script defer src="/__/firebase/10.12.2/firebase-auth-compat.js"></script>
<script defer src="/__/firebase/10.12.2/firebase-firestore-compat.js"></script>
<script defer src="/__/firebase/10.12.2/firebase-storage-compat.js"></script>
</head>
<body>
<script>
</script>
</body>
</html>
이 과정에서 바로 다음 부분이 firebase와 연결되는 부분인데, 파이어 베이스 콘솔에서 기능을 부여하지 않았던 기능들은 모두 제거하고 다음과 같이 만들면 된다. 이들의 배열 순서에서 firebase-app-combat.js는 반드시 다른 행들보다 먼저 기재해야 하며, 나머지는 기재 순서에 큰 문제가 없다.
2. Firebase Version 변경 (Optional)
이전 글에서 Firebase는 버전 9부터는 모듈화로 인해서 이전 버전들 (~버전 8.x.x)에 비해 코드가 작아지고 효율성은 좋아지지만, 코딩 방법이 이전 버전과 다르고 사용 난이도가 상대적으로 높기 때문에, 이에 따라, 각자가 선호하는 버전을 사용해야 한다고 소개한 바 있었다.
나 역시 이에 대한 고민이 있었는데, 비교적 쉬운 버전 8로 일단 시작하는 게 좋겠다는 의견에 따라 8.6으로 Firebase 공부를 시작하게 되었고, 이에 따라 Firebase의 버전과 관련된 다음 4개의 행을
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Firebase Hosting</title>
</head>
<body>
<!-- update the version number as needed -->
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-storage.js"></script>
<script>
</script>
</body>
</html>
3. Bootstrap 사용을 위한 CSS 및 JS Link 추가
위와 같은 기본 골격으로 웹페이지를 만드는 경우, 여러 가지 스타일 요소나, 메뉴바 등이 필요할 수도 있다.
그런데 이것을 직접 작성할 필요는 없으며, Bootstrap 이란 HTML 라이브러리를 이용하면 자세한 내용까지는 몰라도 이미 만들어진 라이브러리를 활용할 수가 있다.
Bootstrap 라이브러리의 접속 링크는 다음과 같다.
https://getbootstrap.com/docs/5.3/getting-started/introduction/
이러한 접속 링크를 이용하여 Bootstrap에 접속한 후, 다음과 같이 Docs 탭으로 접속하면,
다음과 같이 Bootstrap의 CSS와 JS에 대한 CDN 방식(=외부참조 방식)의 접속 Link 문장을 확인할 수 있다.
해당 링크를 복사해서, 미리 준비해둔 Template에 붙여넣기 방식으로 추가해 주면 된다.
Bootstrap에서는 이들을 붙여 넣을 위치도 제시하고 있는데, Style과 관련 있는 부분인 CSS 부분은 가급적 HTML 코드 앞쪽에 나와야 반영이 되므로, CSS Link는 index.heml의 header 부분에 붙여 넣으라고 권고하고 있다.
한편, JS Link는 HTML에 추가 기능을 부여하는 JS 관련 부분은 웹페이지를 먼저 표시하고 난 후 진행해도 무방하므로, 페이지 로딩 속도 향상을 위해 HTML 코드 끝부분에 몰아서 추가하는 것이 일반적인 것으로 알고 있고, 실제로 Bootstrap에서는 제일 마지막 부분의 </body>에 가장 가깝게 붙여 넣으라고 안내해 주고 있다.
이렇게 부트스트랩 요소들을 설치해주면, Button과 같은 요소들을 부트트스랩의 라이브러리를 이용하여 1줄로 표시할 수 있게 되며, Button 이외에도, Navbar(Navigation Menu bar) 등도 쉽게 이미 만들어져 있는 것을 가져다 사용할 수 있게 된다.
4. jQuery CDN Link 추가
한편, 위에서 추가해 준 Javascript는 속도가 빠르고 배우기 쉬우면서도, HTML 코드에 여러 가지 부가적이고 Nice 한 기능을 부여해 줄 수 있는 것으로 알려져 있지만, 문법상 문장이 길어져 문장이 너무 복잡한 경우가 있기 때문에, 이를 간단하게 표시할 요량으로 jQuery가 만들어져 있다고 한다.
즉 기존의 복잡한 Javascript를 조합해 동일한 기능을 하면서도, 사용하기에는 훨씬 간단한 형태의 Javascript 코드 묶음(또는 일종의 함수나 모듈 방식)처럼 만들어둔 것이 jQuery이기에, 개발자들 사이에 널리 사용되며(최근에는 React라는 제품도 널리 사용된다고 한다), 기존에 iQuery를 이용해 만들어진 코드들도 많기 때문에, 해당 플랫폼이나 해당 코드들과의 호환성을 위해 jQuery를 코드 내에 포함해 주는 것이 필요하다.
원론적으로는 jQuery 코드 전체를 구해, 붙여 넣어주어야 하나, 실제에 있어서는 외부 주소 참조 방식인 CDN 방식으로 간단히 붙여 넣을 수 있다.
추가하는 방법은 다음과 같이 jQuery CDN으로 검색하여
jQuery CDN 사이트에 접속한 후, 최신 버전의 minified나 uncompressed를 선택하면 된다.
(minified가 코드 내 공백이 없어 좀 더 Compact 한 코드임)
그러면 다음과 같이 CDN Link 주소가 나타나는데 이를 복사한 후, 코드내에 붙여 넣어주면 된다.
jQuery Link를 붙여넣을때 한가지 주의할 것은 붙여넣는 위치에 따라, jQuery동작이 원활하지 않은 경우가 있기 때문에 주의해야 한다. 나는 Firebase 모듈 선언부 바로 다음 부분에 배치했다. (또는 header 부분에 넣어도 된다.)
결과적으로 이 단계까지 완료하면, index.html 코드는 다음과 같은 형태가 된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Kongyi2 Project</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<!-- update the version number as needed -->
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-storage.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script>
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>
5. Firebase 접속 Configuration 정보 추가 및 Firebase Initialize
마지막으로 Firebase와 Visual Studio Code를 연결하기 위해, 앞선 글에서 미리 확인해 복사해 둔 Firebase configuation Code와 initialization 명령을 추가해 준다.
만일 이 부분을 생성했으나, 따로 보관해 두지 않았다면 다음과 같이 프로젝트의 설정 메뉴를 통해 들어가면 확인할 수 있다.
만일 이전 단계에서 Hosting 부분을 설정할 때 해당 정보를 생성하지 않았다면, 이 화면의 하단부에 생성되는 다음 화면에 들어가서 생성하면 된다. 다음과 같이 여러 가지 플랫폼이 나타나는데, 자신이 사용할 플랫폼을 선택한 후,
index.html 코드의 Firebase 각 모듈에 대한 선언 부분 바로 아랫부분에 <script> </script>속에 추가해 주면 된다. (참고: 위의 코드를 생성하는 단계는 이 단계에서 생성해도 되고, 이전 글의 SDK 연결 단계의 hosting 단 게에서 생성해도 된다.)
단, 초기화 명령은 위에 있는 const app=initializeApp(firebaseConfig); 대신
firebase.initializeApp(firebaseConfig); 형태로 기재해 준다.
기본 Template 페이지 완료
이 코드까지 추가하면, 최종적으로 index.html은 다음과 같은 형태가 되고, Firebase를 본격적으로 사용할 준비가 된 것이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Kongyi2 Project</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<!-- update the version number as needed -->
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-storage.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script>
const firebaseConfig = {
apiKey: "..각 프로젝트별 정보..",
authDomain: "..각 프로젝트별 정보..",
projectId: "프로젝트이름",
storageBucket: "프로젝트이름.appspot.com",
messagingSenderId: "..각 프로젝트별 정보..",
appId: "..각 프로젝트별 정보.."
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>
이 상태에서, index.html 페이지를 브라우저에서 열어보면 (터미널에서 firebase serve 명령으로 생성한 link를 통해) 다음과 같은데, 이때 F12 버튼을 눌러 개발자 모드로 들어가 보면 다음과 같이 콘솔 메시지 상태를 볼 수가 있다. 이때 콘솔에 아무 문제가 없는 것을 확인하면 현재까지의 작업이 잘 완료된 것이다.
