A to Z 웹기초 Firebase 사용

1. 설정글에서 스크립트 태그에 타입을 모듈로 설정하라했는데 모듈로 하면 스크립트가 젤 마지막에 실행되고

    onclick같은건 아예 안되고 click이라는거를 사용해야한다.

    각 태그들에 id값을 설정하고 $("#id값).click(async function () {} ) 이거로 해야한다.

    <script type="module">

 

2. 이 코드를 보면 html의 button 태그 아이디가 postingbtn인걸 선택하고 이 버튼을 눌렀을때 밑에 코드가 실행되는거다.

    코드를 해석해보면 doc이라는 변수에 딕셔너리 정보가 있고,

    그 밑에줄 코드보면 firebase에 albums라는 컬렉션이 없으면 생성후 거기에 doc딕셔너리 정보를 저장한다는 뜻이다. 

    <button id="postingbtn" type="button" class="btn btn-primary">기록하기</button>

 

3. 어떤 태그들의 값을 받아온거를 저장하려할때

let image = $('#image').val();

 

<input type="email" class="form-control" id="image" placeholder="앨범 이미지">

 위에 예를들어 보면 image라는 변수에 id가 image인 인풋 태그 값을 넣는다. 밑에 사진 나머지 title,content,date도 마찬가지이고, 그후 doc에 딕셔너리형식으로 넣고 db에 저장한다.

window.location.reload();는 저장하고나서 화면을 새로고침 하는코드

 

4. 이제 firebase에 있는 데이터를 가져올땐 getDocs를 사용한다.

     "albums"는 콜렉션 이름이고 밑에 코드보면 docs에 데이터들을 넣고 foreach문으로 데이터 한개한개 돌린다.

      그 한개한개 데이터는 딕셔너리 구성이므로 console.log로 출력해서 확인해보면 두번째 사진처럼 출력한다.

 

5. db에 있는 데이터를 가져오고 변수에 대입할때

    row 변수에는 딕셔너리 데이터 한개가 들어있는 상태라  

    변수 만들고 변수에 각각의 딕셔너리 value값에 접근하는 방식으로 넣어준다