[Firebase] 가고싶은 회사 무작정 따라해보기#2 - Firebase 설치/Node.js/Vscode/Backend Server구축

 

Firebase로 당근마켓을 어느 정도 구현한 유튜브 채널(코딩애플)을 발견했다😎 덕분에 초반은 클론코딩으로 진행하며, 틀을 만들어 보려고 한다. 자세한 코드는 해당 채널에서 모두 게시하고 있으므로 필요하다면 채널로 방문하면 될 것 같다. 화면 구성에 필요한 node.js와 vscode 에디터는 미리 설치되어있다는 가정하에 포스팅하였다.

 

 

1) Firebase console 접속

 

Google에 firebase console 검색해서 들어간 뒤 프로젝트 추가 해준다. Google 계정이 있어야하니 혹시라도 가입하지 않은 사람들은 가입을 해야 한다.

 

 

 

2) Firebase console에서 필요한 기능추가

 

이후 필요한 기능들을 [시작하기] 버튼을 눌러 사용할 수 있도록 추가해주면 준비가 끝이다. 

 

🔔 Firestore Database : 데이터베이스

Cloud Firestore 위치는 asia-northeast3(서울)로 설정하면 된다. 위치가 가까울수록 속도가 빠르니 미국이나 해외 주소를 사용해도 되지만 속도는 책임져주지 않는다.

 

 

🔔 Authentication : 회원인증/로그인 기능

🔔 Storage : 사진 저장

🔔 Hosting : 호스팅

 

 

 

처음부터 모든 기능을 추가할 필요는 없기 때문에 우선 필요한 부분만 먼저 추가해 보았다. 이 밖에도 개인적으로 구현하고 싶은 기능이 있다면 추가하여 이용하면 된다. 이렇게 Backend 구성은 끝이다(?) 자바나 C언어로 힘들게 만들었던 것에 비해 너무 허무하게 모든 것을 해주는 Firebase는 참 좋은 친구 같다.

 

 

프로젝트 개요 탭으로 이동하면 지금까지 설정한 부분을 보여준다. 이렇게 설정했다면 Backend 구성이 잘된 것이다. 다음은 VS code를 사용하여 설치한 firebase를 적용해볼 것이다. 

 

 

3) Firebase SDK 설치

 

 

[프로젝트 개요] > [프로젝트 설정] 에 들어가 프로젝트 플랫폼을 선택해준다.

웹앱을 선택해 만들어주면, 닉네임과 SDK구성이 나온다. 그대로 복사해 아래에서 생성할 프로젝트 index.html에 붙여넣어주면 끝이다.

 

 

4) Vscode에서 Firebase 설치

 

vscode에서 firebase를 설치해주도록 한다. 혹시라도 node.js를 설치하지 않았다면 지금 node.js를 설치해도 괜찮다. node.js의 버전이 최신버전이 아닐경우 간혹 알 수 없는 오류가 발생할 수 있으니 최신버전을 설치해주도록 한다. 

 

터미널을 열고 본격적으로 firebase를 설치해준다.

 

npm intall -g firebase-tools@9.12.1

 

5) Firebase 계정 로그인

 

설치가 완료 된 후 firebase에 로그인 해주어 위에서 생성한 정보를 연결한다.

firebase login

 

6) Firebase 초기화

 

firebase를 초기화하는 명령어를 실행하고 스페이스바 + 방향키로 메뉴를 조작하며 질문에 답을 체크하여 init 해준다. 이때 firebase console에서 만든 프로젝트가 나와야 정상이다. 필요없는 질문은 모두 Enter하여 넘겨주면 된다.

firebase init

 

모든 과정을 통해 init이 종료되면 Firebase에 설치된 프로젝트 생성이 끝나며 왼쪽 탐색창에 자동으로 프로젝트가 만들어진 것을 확인할 수 있다. 

 

끝으로..프로젝트 생성이 된 후 index.html을 찾아 위에서 설명한 3) 과정 SDK를 확인하고 프로젝트 설정코드를 추가해주면 정말 끝이다.

 

<script src="/__/firebase/8.6.5/firebase-auth.js"></script>
<script src="/__/firebase/8.6.5/firebase-firestore.js"></script>
<script src="/__/firebase/8.6.5/firebase-storage.js"></script>

먼저 2)에서 추가한 기능에 맞는 SDK를 <script>태그에 존재하는 지 확인하고 필요한 것 외에는 모두 지워준다. 나는 인터넷에 비교적 결과가 많은 firebase 8.X버전을 사용하도록 임의 조정해주었다. 마지막으로 프로젝트 설정코드를 script에 추가해준다.

 

<script>
    // Your web app's Firebase configuration
    var firebaseConfig = {
      apiKey: "",
      authDomain: "",
      projectId: "",
      storageBucket: "",
      messagingSenderId: "",
      appId: ""
    };

    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);

  </script>

 

모든 Backend 구성이 끝났다. 이제부터 Front의 화면을 작성하여 본격 기능을 붙여보면 될 것 같다 :)