'Datebase, fetch 코드붙여넣기' 카테고리의 글 목록

Datebase, fetch 코드붙여넣기

깃 허브 2024.12.23
[데이터베이스] 2024.11.29 1
[Fetch] 클라이언트 서버개념 이해하기 2024.11.27
[개발자] 도움되는 팁들 부트스트랩,제이쿼리 스트립트 2024.11.23

깃 허브

포트폴리오에용 2024. 12. 23. 20:47

2024. 12. 23. 20:47

Add = 지정(장바구니), commit = 저장(장바구니에 있는 물건사기)

hello.html 저장을 해주고싶을떄 써준다.

깃허브 가입후

협력자 추가하기

'Datebase, fetch 코드붙여넣기' 카테고리의 다른 글

[데이터베이스] (1)	2024.11.29
[Fetch] 클라이언트 서버개념 이해하기 (0)	2024.11.27
[개발자] 도움되는 팁들 부트스트랩,제이쿼리 스트립트 (0)	2024.11.23

[데이터베이스]

포트폴리오에용 2024. 11. 29. 15:56

2024. 11. 29. 15:56

데이터베이스란 함수를 저장하는공간을 말한다.

파이어스토어(Firestore)는 구글 클라우드 기반 NoSQL 데이터베이스 입니다.

콜렉션 이름은 데이터베이스에 저장할 이름입니다. 우리가 저장하는곳은 NoSQL 입니다.

데이터베이스에서 우리가 불러들이고 싶은 html input 내장값을 저장할수가 있습니다.

'데이터 추가 스켈레톤' 이라고 불리는 스크립트를 붙입니다.

우리는 어떠한 클릭버튼을 눌렀을때 이 값을 가져올수있게 button 코드에다가 id값을 넣어주고

id명을 넣어줍니다.

데이터베이스 함수는 api를 코드를 불러올때 썼던 html에서 onclick="dd" 일반 함수 function (){}을 쓰면 먹히지가 않습니다.

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

이렇게 써줘야합니다.

그리고 기본적으로 데이터베이스를 가져올때 스크립트에 파이어베이스 세팅을 해주고

script type = "module" 로 바꿔줍니다.

onclick 이 먹히지 않기때문에 동적으로 바꿔주어야합니다.

[코드로 클릭을 달아준다] 라고 보시면 됩니다.

// 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";

// For Firebase JS SDK v7.20.0 and later, measurementId is optional

const firebaseConfig = {

apiKey: "AIzaSyBQkxYA9sqv45AQPAWyW4ocuuVRectOnH8",

authDomain: "sparta-1019b.firebaseapp.com",

projectId: "sparta-1019b",

storageBucket: "sparta-1019b.firebasestorage.app",

messagingSenderId: "240993693699",

appId: "1:240993693699:web:6277d9f6a7a3ea8c8f9e36",

measurementId: "G-KWRTXTJ14Q"

};

// Firebase 인스턴스 초기화

const app = initializeApp(firebaseConfig);

const db = getFirestore(app);

데이터베이스에서 카드생성하는방법?!

데이터베이스에서 외부정보를 정보를 저장할수있따. 콜렉션이름을 임의대로 저장하면 데이터베이스에 콜렉션이름명으로 저장이 됩니다.

데이터베이스에 저장되어있는 정보를 가져오는 코드번호.

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

----------

document에 input태그에 정보를 입력해서 데이터베이스까지 전송하는 스크립트짜기

우리가 예를들어, document 안에서 input 태그에 이미지 주소를 입력하고, 확인 버튼을 누르면
데이터베이스에서 폴더가 저장이 자동으로 입력이된다.

그러면 우리는 document안에서 input 태그에 이미지 주소를 입력해서 데이터베이스까지 저장되게 하는 코드는 어떻게 짤까?
처음에 script type = "module" 로 바꿔줘야한다.
그리고 데이터베이스 스크립트 위에 3줄을 가져와줘야한다.

그다음에 input 확인버튼을 누르면 데이터베이스로 전송되는 버튼 html에 아이디명을 지정해준다.
우리가 저장할 input 태그에 id명을 입력하면 그 고유의값을 저장해야하기때문에 제이쿼리값으로 val()값을 저장해준다.
마지막으로 doc 을 지정해줘서 document 안에 라이브러리로 저장해야하기때문에 key value 값으로 저장해준다.

$('#저장버튼').click(async function(){
let image = $('#image').val();
let title = $('#title').val();
let star = $('star').val();
let comment = $('comment').val();

let doc {
'image':image,
'title':title,
'star':star,
'comment':comment
};
await addDocs(collection(db, "movies"),doc);
alert('저장완료');
window.location.reload();

로 저장해준다.

$('#postingbtn').click(async function () {

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

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

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

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

let doc = {

'image': image,

'title': title,

'star': star,

'comment': comment

};

await addDoc(collection(db, "movies"), doc);

alert('저장 완료');

window.location.reload();

});

$(document).ready(function () {

데이터베이스에서 저장된 라이브러리 정보를 가져오는법!

let docs = await getDocs(collection(db, "movies"));
docs.forEach((doc)=> {
let row = doc.data();
let image = row['image'];
let title = row['title'];
let star = row['star'];
let comment = row['comment'];

let temp_htmp=`
<div class="col">
                <div class="card">
                    <img src="${image}"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">${title}</h5>
                        <p class="card-text">${star}</p>
                        <p class="card-text">${comment}</p>
                    </div>
                </div>
            </div>`

('#card').append(temp_html);
});

let docs = await getDocs(collection(db, "movies"));

docs.forEach((doc)=> {

let row = doc.data();

// let image = $('#image').val(); 이미지 input 값을 가져오는 코드,

//우리는 데이터베이스에 리스트에 있는 코드를 가져오는것이기 때문이다.

let image = row['image'];

let title = row['title'];

let star = row['star'];

let comment = row['comment'];

let temp_html =`

<img src="${image}"

class="card-img-top" alt="...">

<h5 class="card-title">${title}</h5>

<p class="card-text">${comment}</p>

</div>

$('#card').append(temp_html);

});

데이터베이스에 저장된 출력값이 나오게된다. 그리고 input 태그안에 이미지주소를 저장해서 데이터베이스에 전송하면

데이터베이스에서 card값으로 전송을 해주기때문에 영구저장이 가능합니다!

'Datebase, fetch 코드붙여넣기' 카테고리의 다른 글

깃 허브 (0)	2024.12.23
[Fetch] 클라이언트 서버개념 이해하기 (0)	2024.11.27
[개발자] 도움되는 팁들 부트스트랩,제이쿼리 스트립트 (0)	2024.11.23