Firestore Database에서 데이터 가져오는 법 (읽기)

0:00 코드짜기 귀찮을 때 설치할 라이브러리 

3:25 Firestore Database 구경하고 테스트상품 저장해보기

7:44 Database에 있는 데이터 가져오는 법

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> 

html javascript 드럽게 길게 코드짜기 귀찮으니 Bootstrap 5버전과 jQuery 라이브러리를 사용할 것입니다. 

그리고 당근마켓스러운 메인페이지 레이아웃 부터 만들어볼 것인데

오늘 Firebase 내용 빠른 요약은

Firestore Database에서 데이터 읽으시려면 db.collection('컬렉션이름').get().then(()=>{}) 이게 끝입니다. 

상단메뉴 (Navbar) 만들기

Bootstrap을 설치하셨는데 이게 뭐냐면 그냥 HTML CSS 짜기 귀찮을 때 설치하는 라이브러리입니다.

설치가 잘 되었으면 Bootstrap 공식사이트 들어가셔서 원하는 UI 복붙하면 끝임 

그래서 그 사이트에서 Navbar를 찾으셔서 맘에드는 디자인 복붙하면 상단메뉴 제작 끝입니다.

Firestore Database 에 데이터를 저장할 것임

우리가 데이터베이스라고 부르는게 있습니다.

그냥 데이터저장하는 곳을 데이터베이스라고 부릅니다. 

가장 흔한 데이터베이스는 엑셀 생각하시면 됩니다. 가로세로 칸에다가 데이터 쭉 저장합니다.

이렇게 생긴걸 관계형 데이터베이스라고 부르는데 특징은 엑셀 떠올리시면 됩니다.

그리고 SQL이라는 언어를 따로 배우셔야 자료저장/출력이 가능합니다.

그래서 초보들이 무서워함 

근데 우리가 지금부터 사용할 데이터베이스는 비관계형 NoSQL 데이터베이스입니다. 

이건 데이터를 이런 식으로 저장합니다. 

▲ 폴더를 만들고 그 안에 파일을 집어넣는데

파일은 이렇게 생겼습니다.

▲ object 자료형처럼 왼쪽에 이름, 오른쪽에 값을 넣습니다.

이렇게 object 자료형처럼 그대로 데이터를 쉽게 저장할 수 있는게 NoSQL 데이터베이스입니다.

그냥 변수만들듯 쉽게 자료저장가능

우리가 쓸 Firestore Database도 이렇게 저장합니다. 

함께 있는 Realtime Database도 유사합니다. 그건 그냥 하나의 큰 Object 자료형임 

Firestore에다가 데이터좀 저장해보십시오

익숙해질겸 테스트삼아 상품2개 정도 저장해봅시다. 

▲ Firebase console에서 Firestore 들어간 후에 사진처럼 데이터를 몇개 저장해봅시다.

1. product라는 컬렉션을 만드신 후에 (컬렉션은 폴더)

2. 상품1이라는 제목으로 문서를 하나 넣습니다 

3. 그 다음에 그 문서 안에는 object 자료형처럼 { 가격 : 1000, 제목 : '면도기' } 이런 식으로 저장해보십시오.

4. 상품2도 심심하니까 만들어봅시다. 

대충 이런식으로 저장합니다.

Firestore console 에서 이것저것 만지면서 데이터베이스랑 좀 친해지십시오 

불알친구하셈 

HTML 파일에서 Database에 있던 자료 꺼내는 법

<script>
  const db = firebase.firestore();
  db.collection('product').get().then((결과)=>{
    console.log(결과)
  })

</script>

물론 Firebase 설치코드 하단에 적으셔야 잘 동작합니다.

db.collection(컬렉션명).get() 이라고 쓰시면 내가 원하는 컬렉션에 있는 모든 문서를 가져올 수 있습니다. 

그리고 가져온 결과는 .then() 안의 ()=>{} 함수 파라미터에 담겨있습니다. 

아무튼 따라치면 진짜로 다 가져옵니다. 

실은 안가져오고 에러가 납니다.

크롬 콘솔창 열어보시면 "Firebase 어쩌구 missing permission" 이런 에러가 뜰텐데

왜냐면 Database에 누가 접근할 수 있는지 규칙을 설정 안해주셔서 그렇습니다.

▲ 파이어베이스 콘솔들어가셔서 Firestore - 규칙을 눌러봅시다.

그리고 위처럼 바꿔주시면 됩니다.

나중에 설명할 것인데 read, write를 누가할 수 있는지 정의하는 부분입니다.

if 뒤에다가 누가 접근할 수 있는지 적으면 되는데 true로 바꾸면 누구나 접근가능합니다.

보안이 쓰레기지만 지금은 개발중이니 이렇게 해둡시다. 

아무튼 저장하고 새로고침 해보면 진짜 DB 게시물 잘 가져옵니다. 성공 

가져온 게시물을 하나하나 출력해보려면

가져온 결과를 출력해보면 뭔가 암호문같습니다.

▲ 저게뭐람 ㄷㄷ 구글이 만든 것들은 항상 유저 친화적이지 않습니다.

봐도 모르겠는 이런 것들은 그냥 Firebase 설명서 보고 따라해야합니다. 어쩔 수 없음 

<script>
  const db = firebase.firestore();
  db.collection('product').get().then((결과)=>{
    결과.forEach((doc)=>{
      console.log(doc.data())
    })
  })

</script>

▲ 따라치면 컬렉션안에 있던 문서를 출력해볼 수 있습니다.

Firebase 8버전 문법인데 최근에 나온 모듈식 9버전보다 초보에겐 훨 낫다고 생각합니다 (틀딱)

가져온 결과는 항상 forEach()를 붙여서 반복문을 돌릴 수 있습니다.

forEach가 뭐냐면 array자료에 붙일 수 있는데 왼쪽에 있는 자료 갯수만큼 코드를 실행해줄 수 있습니다.

지금은 DB에 있던 자료가 2개니까 2번 실행이 되겠네요 console.log(doc) 이라는 코드가요.

doc이라는 변수는 DB에 있던 문서들입니다. 실은 doc.data()까지 써야 문서들이 나옴 

아무튼 새로고침해서 실행해보면 doc이라는걸 콘솔창에 출력해보라고 했으니까

{ 제목 : '면도기', 가격 : 1000 } 이런 자료가 크롬 콘솔창에 출력될 것입니다.

이 자료들을 HTML에 집어넣으면 당근마켓같은 메인페이지가 완성되겠는데요

그건 다음시간에 합시다.