2023.12.13 TIL - 4~5주차 3회독(firebase), CSS 레이아웃(flex box)

📘 오늘의 공부

• 4주차~5주차 3회독
  (Firebase, Firestore Database)
• CSS 레이아웃 정리 - Flex box
  💡 참고 링크
  • 드림코딩 - Flexbox
  • Js Bin - js 연습 웹사이트

1. Firebase, Firestore

1) Firebase 시작하기

• Firebase 프로젝트 생성
• 웹 앱에 Firebase 추가
  
  

2) Firestore database 시작하기

• 빌드 > Firestore Database 선택
• 데이터베이스 만들기 > 프로덕션 모드에서 시작 > 위치 seoul로 변경
• firestore database 생성 후 규칙 수정
  • 규칙 > true 로 수정 후 게시
    (읽고 쓰는 권한 허용)
• 톱니바퀴 > 프로젝트 설정 > SDK 설정 및 구성 > 구성 부분 복사
  (VSC에 붙여넣을 준비 완료)
  
  

3) VSC에 Firebase 사용하도록 코드 작성하기

• <script>의 <> 안에 type="module" 작성
  (작성하는 순간 이제 JQuery로 적용해놓았던 동작들은 대체로 안됨)
• ⭐️ script 안에 firestore 세팅 코드 복붙

firestore 세팅 코드

// Firebase SDK 라이브러리 가져오기
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";


// Firebase 구성 정보 설정
const firebaseConfig = {
	본인 설정 내용 채우기 
};


// Firebase 인스턴스 초기화
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

• 세팅 코드의 두번째 단락을 지우고, 내 파이어스토어 구성 코드를 붙여넣기
• ⭐️⭐️ 여기까지가 firestore database를 쓰기 위한 세팅 과정!!

파이어스토어 세팅 과정 정리

• 프로젝트 만들기
• 웹 앱 만들기
• firestore database 만들기
• 읽기, 쓰기 권한 허용하기
• vsc에 firestore 세팅 코드 붙여넣기
• 내 firestore database 구성코드 붙여넣기
  
  
  

2. Firestore Database에 데이터 넣기

1) 데이터 추가 스켈레톤 [add Doc]

$("#id").click(async function () {
    let doc = {};
    await addDoc(collection(db, "콜렉션이름"), doc);
})

• firestore 세팅 코드 맨 밑에 붙여넣기
• '어떤 id 값을 클릭하면 아래 내용을 실행해라'
• 두번째줄 : 데이터베이스에 넣을 내용 정하기
• 세번째줄 : 데이터베이스의 해당 '콜렉션'에 데이터 넣어줘 명령
  
  

2) 새로고침 명령어

window.location.reload();

• [add doc] 명령 코드 안에 삽입
  
  

3) toggle 동작 넣는 방법

$("#id").click(async function () {
    
})

• 데이터 추가 스켈레톤에서 가운데 두줄을 빼고,
  안에 toggle 동작 주는 명령을 삽입하면 끝!
• ex)

$("#savebtn").click(async function () {
      $('#postingbox').toggle();
})

3. Firestore Database에서 데이터 가져오기

1) 데이터 읽기 스켈레톤 [get Docs]

let docs = await getDocs(collection(db, "콜렉션이름"));
docs.forEach((doc) => {
    let row = doc.data();
    console.log(row);
}); 

• script에 type="module"하는 순간 script는 가장 나중에 호출됨
  (페이지가 다 로딩된 후에 호출됨)
  -> document ready 함수 필요 XX
• script 안에 스켈레톤 복붙
  
  

2) 데이터 가져오는 과정 정리

• get Docs 스켈레톤 복붙
  • 파이어스토어 db의 각 문서를 'row'라고 하는구나
  • row를 반복해서 불러와야되니까 forEach 반복문이 스켈레톤에 있음
• row에서 각 항목을 변수로 지정해주기
  • ex)

  let image = row['image'];
   let title = row['title'];
   let content = row['content'];
   let date = row['date'];

• 페이지 로딩되면 붙어있어야 되는 내용을 변수로 정리
  (ex. 추억앨범의 카드 코드를 temp_html 변수로 지정)
• $('#id).append(); 로 카드 붙여넣기
  
  

4. display flex 큰그림 이해

1) display flex에서 중요한 2가지

• flex는 큰 박스 container 와 작은 박스(내용물) item 으로 구성됨
• 수직축(column)과 수평축(row) 중 item이 정렬되는 방향이 중심축이 되고, 나머지 축은 반대축이 됨
• 영상 보며 연습해보기
  https://jsbin.com/denibuziya/edit?html,css,output

💡 오늘의 느낀점

• 강의 3회독 중 부족한 부분 : fetch, firebase
  -> 해당 부분 한번 더 듣자
• 본 캠프로 들어가기 전에 flex, grid를 이해하고 들어가자!