10. 01. 02일차 TIL - Firebase와 DB

1. Firebase란?

     - 구글이 개발한 모바일 및 웹 애플리케이션 개발 플랫폼이다.

     - Firebase를 활용하여 서버 개발 없이 웹 제작이 가능하다.

       → 백엔드 코드없이 프론트지식(html, css, js)만으로도 웹 서비스 출시 가능

     

2. DB (데이터베이스)란?

     - 데이터베이스를 사용하면 많은 양의 정보를  쉽게 찾을 수 있고 효율적으로 관리 가능

     - 데이터베이스에는 관계형 데이터베이스(SQL)와 비관계형 데이터베이스(NoSQL)가 있다.

        → SQL은 도서관 처럼 데이터 하나하나에 어떠한 관련성을 통해 정리하고

             NoSQL은 창고에 물건을 마구 쌓아놓은 것과 비슷하다는 느낌을 받았다.

 

      1) 관계형 데이터베이스

             : 데이터의 양이 광범위하고 많을 때 사용

              → 주로 대기업에서 사용한다고 한다.

      2) 비관계형 데이터베이스는

              : 갱신되는 데이터의 가변성(?)이 클 경우

              즉, 기존의 데이터와 관계성을 찾기 어려울 경우 사용할 수 있는 것 같다.

              → 주로 스타트업에서 사용

 

3. 내가 만든 웹에 Firebase DB 에 저장된 데이터를 가져오기

* 가장 먼저 Firebase에 연동하기 위해서

   script 태그의 type을 module로 설정해주어야 한다.

 

1) btn 버튼을 클릭할 때,

2) 입력창에 입력된 앨범 사진, 제목, 내용, 날짜의 입력값을

3) 각각 변수로 지정하여

4) firestore에 DB로 저장한다.

5) 저장 후 저장이 되었음을 사용자에게 알리고

6) 윈도우창을 초기화 한다.

 

7) Firestore에 저장한 데이터를 'getDocs' 통해 웹사이트로 가져와 입력 값에 맞는 카드를 생성시킨다.

 

저장소에 입력된 또는 원하는 데이터를 저장한 후 서버로 불러 오게 되면,

웹사이트를 새로고침 하더라도 유저의 상호작용을 통해 발생한 웹사이트 상의 변경점을 유지할 수 있다.

또, 저장된 데이터는 firestore에 저장된 DB에서 해당 데이터를 삭제하면 웹사이트에서 지울 수 있다.

---

★ 2일차 소감

Firebase를 활용하면 백엔드 코드를 모른다고 하더라도 웹사이트를 쉽게 만들 수 있다고 했는데 실제로 유저의 어떤 상호작용을 통해 발생한 데이터 값을 웹사이트에 가져오고 유지할 수 있다는 것을 통해 바로 체감할 수 있었다. 하지만.. 더욱 완성도 높은 웹사이트를 재작 및 구현, 배포를 위해서는 프론트엔드 쪽의 공부 이외에도 백엔드 쪽의 공부는 필수일 것이다 .. ㅠㅠ