072DATA

나만의 추억 앨범 만들기 - 데이터베이스 활용( Firestore Database ) 본문

BackEnd/DATABASE

나만의 추억 앨범 만들기 - 데이터베이스 활용( Firestore Database )

0720 2024. 7. 23. 14:20

 

안녕

 

안녕하세욥 오늘은 데이터베이스를 활용해서 저장된

 

데이터를 토대로 새로운 카드들을 렌더링 하겠습니닷

 

이전 글도 보시는 걸 추천하며 시작해보도록 하겠습니다.

 

 

파이어 베이스 사용 설정 링크와 추억 앨범 링크

 

https://0723-0725.tistory.com/24

 

파이어 베이스.. 이 녀석의 사용 설정

안녕드디어 데이터 베이스를 다룹니다요 들어가기에 앞서  Google Firestore는  데이터가 문서형으로 되어 있고    각각 키와 값을 가지고 있어요 데이터도 중첩될 수 있습니당  데이터 변경 사

0723-0725.tistory.com

https://0723-0725.tistory.com/25

 

나만의 추억 앨범 만들기 - 페이지 디자인편(Bootstrap, HTML, CSS)

안녕저는 이제 추억 앨범을 만들어 볼건데 오늘은 디자인 위주로 작성해 보겠습니다. 사실 이미 진행한 프로젝트이지만 제대로 기록하기 위해 블로그에 남겨볼까 합니다.    먼저 보면 좋

0723-0725.tistory.com

https://0723-0725.tistory.com/26

 

나만의 추억 앨범 만들기 - 자바스크립트 적용( JQuery, Fetch )

안녕   이번에는 이전에 추억 앨범 페이지에 동적인 요소들을 추가하기 위해 javascript를 적용할 것이고 JQuery를 사용하여 javaScript를 더욱 간편하게 사용해 보도록 하겠습니다.     JQuery는 HT

0723-0725.tistory.com

데이터 저장하기

 

<script type="module">
    $("#postingBtn").click(async function () { // 버튼 클릭 이벤트 설정하는 코드에요
        let image = $("#image").val();
        let title = $("#title").val();
        let content = $("#content").val();
        let date = $("#date").val();   // 변수에 폼 데이터 가져오는 코드에요
			
        let doc = { 
          'image' : image,
          'title' : title,
          'content' : content,
          'date' : date
        }; // 문서 객체 생성해요
        
        
        await addDoc(collection(db, "albums"), doc); 
           alert("저장 완료.")
        window.location.reload();
        // Firestore에 문서 추가하는 코드입니닷
        // await를 사용하여 비동기 작업이 완료될 때까지 기다리고
        // collection(db, "albums")는 db 데이터베이스의 albums 컬렉션을 참조해요
		// doc 객체는 추가될 문서의 데이터에욥
    });
</script>
<body>
    <div class="mybtn">
        <button id="postingBtn" type="button" class="btn btn-dark">
        기록하기
        </button>
        <button type="button" class="btn btn-outline-dark">닫기</button>
    </div>
</body>

 

 

 

 

 

 

 

위 코드를 사용하여 인풋 박스 안에 있는 데이터를 Database에 전송하고 저장합니다. (주석 확인)

 

 

 

Module에 대한 오류

 

* script의 타입에 module이 설정된 순간 버튼의 onclick이 먹통이 됩니다.

 

떄문에 button에 onclick을 넣지 않고 id를 부여하여 버튼에 이벤트 리스너를 설정해야 해요

 

왜나하면 모듈 스크립트는 전역 객체를 사용하지 않고 독립적인 객체를 사용하기 때문이죠

 

전역 객체란 모든 곳에서 사용할 수 있는 변수를 말하는데 모든 사람이 공유할 수 있는 공용 물건 같은 겁니다.

 

 

아주 쉽게 말하면 모듈 스크립트는 각각의 파일이 자기만의 공간을 가지는 건데

 

마치 각자 자기 방이 있어서 다른 사람이 그 방의 물건을 마음대로 쓸 수 없는 것이죠

 

때문에 모듈 스크립트를 사용하면 여러 파일에서 같은 이름의 변수를 사용해도

 

서로 헷갈리지 않고 안전하게 사용할 수 있어요

 

그 이유는 각자의 공간이 있기 때문에 충돌이 나지 않는겁니당

 

한줄로 요약하게 되면 모듈 스크립트는 "각자 자기만의 방"을 만들어주는 거고,

 

그래서 모든 사람이 같이 쓰는 공용 물건(전역 접근)을 쓸 수 없게 되는 거예요 ..................................

 

데이터 불러오기

 

<script>
	let docs = await getDocs(collection(db, "albums"));
    docs.forEach((doc) => {
        let row = doc.data();

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

        let temp_html = `
                  <div class="col">
                      <div class="card h-100">
                        <img src="${image}">
                        <div class="card-body">
                          <h5 class="card-title">${title}</h5>
                          <p class="card-text">${content}</p>
                        </div>
                        <div class="card-footer">
                          <small class="text-body-secondary">${date}</small>
                        </div>
                      </div>
                  </div>
                  `;
        $("#card").append(temp_html);
    });
</script>

 

 

 

 

 

이전에 새로운 카드를 붙이는 코드를 개선해서

 

데이터를 가져오는 객체 row의 'image' 데이터를 변수 image에 넣고

html로 붙여서 이제는 새로고침 하여도 카드가 사라지지 않는 코드를 완성하였습니다.  (title, content, date도 동일)

 

짜잔 이렇게 새로운 카드들이 생성되었습니다.

 

 

 

 

느낀점

생각보다 오늘은 짧은 내용이지만 

 

생각보다 습득한 지식이 많다 (module, 전역 객체, 독립 객체, 데이터베이스 사용법 등등등)

 

이제 데이터베이스도 사용하였고

 

점점 기능들을 부여하다 보니까 더 재밌는 기능들을 

 

사용해보고 싶은 욕구가 든다 물론

 

강의 하나하나 챙겨보면서 여러 번 반복 재생하고

 

구글링 및 gpt에게 물어보면서 피로도가 쌓이고 있지만

 

하다보면 점점 익숙해져서 괜찮겠지 .. 킵꼬잉~ 끝

'BackEnd > DATABASE' 카테고리의 다른 글

ERDCloud 사용법 (팀 프로젝트, ERD 생성)  (2) 2024.10.11
파이어 베이스.. 이 녀석의 사용 설정  (0) 2024.07.19
2023-11-20 : (  (1) 2023.11.20
2023-11-17 : l  (0) 2023.11.17
2023-11-16 : )  (0) 2023.11.17
'BackEnd/DATABASE' Related Articles more