오늘은 부실한 와이어 프레임을 피드백 받아 다시 작성하였다.
메인페이지,방명록 작성페이지,사원증 클릭시 해당 인원의 정보가 나오는 페이지
크게 3가지로 구분하였다,
그중에 나는 방명록 작성페이지와 방명록 firebase 연결하는 파트를 맡았다.
방명록 작성페이지는 아주 간단한 html 이기에 쉽게 완성하였다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>방명록 작성</title>
</head>
<body>
<h2>방명록 작성</h2>
<form id="guestbookForm">
<div class="form-floating">
<label for="name">이름:</label>
<input type="text" id="name" placeholder="이름을 입력하세요" required>
</div>
<div class="form-floating">
<label for="message">내용:</label>
<textarea id="message" placeholder="내용을 입력하세요" required></textarea>
</div>
<button type="submit">완료</button>
<button type="button" id="closePopup">닫기</button>
</form>
</body>
</html>
이렇게 기본적인 웹페이지가 만들어졌다.
우선 CSS 는 나중에 적용하기로 하여 입력한 데이터가 firebase 데이터베이스에 저장이 되게 하는것이 관건이였다.
Firebase 적용
1.firebase Database 컬렉션 ID 정하여 생성하였다.
2.firebase를 불러오기 위하여 SDK 구성을 찾아 접속하는 코드를 작성해야했다.
3.firebase 모듈을 가져오고 입력한 데이터가 ''geustbook"이라는 컬렉션안에 있는 필드에 맞게 저장되는 코드이다.
<script type="module">
// Firebase 모듈
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js";
import { getFirestore, collection, addDoc } from "https://www.gstatic.com/firebasejs/9.6.1/firebase-firestore.js";
// Firebase 초기화
const firebaseConfig = {
apiKey: "AIzaSyCqPjlFsuIKZ3N4ZfO9mTKQs8Sya6aKCKs",
authDomain: "introducing-fa5ae.firebaseapp.com",
projectId: "introducing-fa5ae",
storageBucket: "introducing-fa5ae.appspot.com",
messagingSenderId: "190395607602",
appId: "1:190395607602:web:5024130aaa95b9285f2a2b",
measurementId: "G-YJFDJBS7SN"
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
// 방명록 제출
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('guestbookForm').onsubmit = async function(event) {
event.preventDefault(); // none 입력 금지코드
const name = document.getElementById('name').value;
const message = document.getElementById('message').value;
try {
// Firestore에 데이터 저장
await addDoc(collection(db, 'guestbook'), {
name: name,
message: message,
createdAt: new Date() // 글 순서대로 넣기위한 시간저장
});
alert('완료되었습니다.');
// 입력 초기화
document.getElementById('name').value = '';
document.getElementById('message').value = '';
window.close();
} catch (error) {
console.error("Error adding document: ", error);
alert('오류가 발생했습니다. 다시 시도해 주세요.');
}
}
// 닫기 버튼 클릭 시 팝업 닫기
document.getElementById('closePopup').onclick = function() {
window.close(); // 현재 팝업 창 닫기
}
});
</script>
4.방명록 작성란에 이름과 내용을 넣고 완료버튼을 누른다.
5.firebase에 작성시간과,이름,내용 데이터가 저장된다.
✒️ 회고
- firebase는 처음 사용해봐서 코드를 작성하는데 애를 먹었다 .숙련되기 위해ㅔ 다양한 데이터를 저장하는 연습을 해봐야겠다.
- 내일은 메인페이지에 있는 방명록 목록을 firebase 에서 불러와 출력시키는 것을 해볼 예정이다.
'프로젝트 > 프로젝트 회고' 카테고리의 다른 글
| [일정관리]일정 생성 및 조회 (0) | 2025.03.25 |
|---|---|
| [일정관리]API 명세 및 ERD작성 (0) | 2025.03.24 |
| [자기소개4]프로젝트 마무리 (0) | 2025.02.24 |
| [자기소개3]Firebase 에서 방명록 데이터 불러오기 (1) | 2025.02.20 |
| [자기소개1]S.A 작성 (0) | 2025.02.17 |