사전캠프 5일차

fetch

fetch("여기에 URL을 입력") // 이 URL로 웹 통신을 요청한다. 괄호 안에 다른 것이 없다면 GET! .then(res => res.json())  // 통신 요청을 받은 데이터는 res라는 이름으로 JSON화 한다 .then(data => {  console.log(data) // 개발자 도구에 찍어보기 }) // JSON 형태로 바뀐 데이터를 data라는 이름으로 붙여 사용한다

요청에 성공하면(success), response값에 서버의 값을 담아서 함수를 실행

---

forEach

const fruits = ["apple", "banana", "cherry"]; fruits.forEach((fruit, index) => { // 배열의 각 요소를 하나씩 가져와 콜백 함수에 전달   console.log(`${index + 1}. ${fruit}`); // 각 요소의 순번(index + 1)과 값을 출력 });

배열을 순회하면서 각 요소에 대해 작업을 수행하는 메서드

---

데이터베이스

관계형 데이터베이스	SQL(정리된 정보를 다룰 때)
비관계형 데이터베이스	NoSQL(복잡하거나 유영한 정보를 다룰 때)

---

Firebase(firestore)

파이어베이스는 구글이 개발한 모바일 및 웹 애플리케이션 개발 플랫폼

서버 개발 없이 제작 가능한게 특징

 

파이어스토어는 구글의 클라우드 기반NoSQL데이터베이스

import { initializeApp } from "https://www.gstatic.com/firebasejs/11.2.0/firebase-app.js";

        import { getAnalytics } from "https://www.gstatic.com/firebasejs/11.2.0/firebase-analytics.js";

        import { getFirestore, collection, addDoc, getDocs } from "https://www.gstatic.com/firebasejs/11.2.0/firebase-firestore.js"; // Firestore 모듈들 한 번에 가져오기

 

        // Firebase 설정 객체

        const firebaseConfig = {

            apiKey: ".............",

            authDomain: ".......",

            projectId: "......",

            storageBucket: ".......",

            messagingSenderId: "....",

            appId: "....",

            measurementId: "...."

        };

        // Firebase 초기화

        const app = initializeApp(firebaseConfig);

        const analytics = getAnalytics(app);

        const db = getFirestore(app); // Firestore 초기화

 

강의를 들으면서 강의는 9버전으로 되어있어 오류가 있었고 해결과정에 파이어스토어에서 제공하는 sdk를 그대로 쓰다보니 get과 doc이 없어서 문제를 찾고 해결하느라 시간이 오래걸렸다....

 

데이터 get 해오기

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

데이터베이스에서 데이터를 가져와

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

forEach문으로 하나씩 화면에 나오게 불러와준다.

 

추가 놓친부분

1.

script type="module"로 바꾸면서 onclick이 전부 기능일 상실하는데 제이쿼리로 기능을 넣어주고 id값으로 연결해준다.

$("btn").click(async function() {        조건 } <button id="btn" type="button" class="btn btn-dark">버튼</button>

 

2.

부트스트랩에서 가져올 때 구조

예시 코드 row row-cols-1 row-cols-md-4-g-4

row	그리드 행을 생성
row-cols-숫자	한 행에서 숫자만큼의 열만 표시
row-cols-md-숫자	화면크기가 768px이상일 때 한행에서 숫자만큼의 열이 표
g-숫자	gap-숫자의 축약형으로, 카드 또는 컬럼 간의 간격(여백)을 설정