.
메인페이지는 firestore database를 이용하고
나는 방명록을 realtime database를 이용해서 만들었는데
realtime database랑 firestore database랑 한 파일 안의 script에서 같이 쓸 수 없는 것 같았다.
(어제 시도했는데 configuration이랑 app이랑 뭔가 조금씩 겹치는게 달라서 쓸 수가 없었다.)
그래서 방명록은 그냥 한줄만 띄울거니 그냥 페이지간 데이터 전송을 해보기로 함
local storage로 이용해보겠다.
//메인페이지에 보이게 하기 위해 저장
localStorage.setItem('content', content);
localStorage.setItem('name', name);
//메인페이지 저장 부분 끝
<script>
$(document).ready(async function () {
//방명록 불러와봄
let contentvalue = localStorage.getItem('content');
let namevalue = localStorage.getItem('name');
let temp = `<p>${contentvalue} (${namevalue})</p>`
$('#visit-comment').append(temp);
});
</script>이런식으로 했었는데
Javascript 파일을 html 안의 <script>에다 안 쓰고 따로 파일을 분리하는 법을 알게 됨
html에서 다음과 같이 연결해주면 된다.
<script src="../IntroTeam/js/visitcomments.js"></script>그래서 realtime database관련 부분 다 분리했더니 index.html에서 realtime database랑 firestore database랑 동시에 사용할 수 있게 되었다!
근데 지금와서 생각해보면 app이랑 firebaseConfig랑 이런 변수들을 그냥 다른 이름으로 내가 선언했으면 realtime database도 멀쩡히 index.html안에서 쓸 수 있었을 거 같기도 하다 ㅎㅎ...
웹 개발이 처음이고 개발을 오랜만에 해서 그런가 머리가 굳어서 잘 안 돌아갔고 맨땅에 헤딩하는 느낌으로 진짜 힘겹게 문제들 해결해 나갔다
아무튼 js파일을 분리해서 방명록 최신 3개 띄우기에 성공하였다!
js파일
src = "https://www.gstatic.com/firebasejs/8.8.1/firebase-app.js"
src = "https://www.gstatic.com/firebasejs/8.8.1/firebase-database.js"
src = "https://www.gstatic.com/firebasejs/8.8.1/firebase-analytics.js"
src = "https://www.gstatic.com/firebasejs/8.8.1/firebase-auth.js"
$(document).ready(async function () {
const firebaseConfig = {
쉿 비밀이야!
};
firebase.initializeApp(firebaseConfig);
const database = firebase.database();
//방명록 불러오는 부분//3개 불러오는걸로 수정해야함!!
const dbRef = database.ref('logs').orderByChild('ups').limitToLast(3);
dbRef.on("value", (snapshot) => {
snapshot.forEach((child) => {
const object = child.val();
let temp = `
<p><span><img class="pfp" , src="./image/minsun/pfp/${object.pfp}.png" , alt="pfp"></span>${object.content} (${object.name})</p>
`
$('#visit-comment').append(temp);
});
});
//방명록 불러오는 부분 끝남
});Q. orderByChild('ups')에서 'ups'가 db상에 없는 필드인데 왜 멀쩡하게 동작하는지는 의문이다
저 부분이 빠지면 문법이 잘못되는지 동작하지 않는다
그리고 index.html에 db관련해서 import하는 부분은 중복해서 남겨두어야 했다 빠지면 동작하지 않음
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>메인페이지</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="../IntroTeam/js/visitcomments.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-firestore.js"></script>
css파일 분리는 다음과 같이
<link href="./css/index.css" rel="stylesheet" type="text/css" />
'Developing > Journal' 카테고리의 다른 글
| [내일배움캠프][Team Project]키오스크 개발일지 (1) | 2023.10.24 |
|---|---|
| [내일배움캠프][Java 개인과제]키오스크 개발일지 (1) | 2023.10.19 |
| [내일배움캠프][미니프로젝트] 발표회 후기 (2) | 2023.10.11 |
| [내일배움캠프][미니프로젝트]방명록 페이지 개발일지 (2) | 2023.10.07 |
| [내일배움캠프][미니프로젝트] 개인페이지 만들기 (0) | 2023.10.06 |
