반응형
개요
addDoc는 firebase에 새로운 문서를 추가할 수 있는 메서드이다.
게시글을 생성할 경우 해당 게시글에 대한 정보를 firebase의 문서로 추가할 수 있다.
javascript 코드 작성
코드 article.js
import { db } from "..\app.js";
import {
collection, Timestamp, addDoc,
} from "https://www.gstatic.com/firebasejs/10.12.2/firebase-firestore.js";
async function createArticle(title, content) { // 게시글의 제목과 내용을 매개변수로 받아온다.
// 현재 시간을 timestamp 형식으로 변환하여 저장한다.
const timestamp = Timestamp.fromDate(new Date());
const newArticle = { // firebase에 추가해 줄 객체를 생성해 준다.
title: title,
content: content,
createdAt: timestamp,
updatedAt: timestamp,
};
try {
// articles 컬렉션에 newArticle 객체에 저장된 정보를 문서로 추가한다.
// id의 경우 기존 firestore 세팅에서 랜덤 생성으로 지정하였으므로 난수로 생성된다.
const docRef = await addDoc(collection(db, "articles"), newArticle);
return docRef.id; // 성공적으로 문서가 성공되었을 경우 id를 반환해 준다.
} catch (error) {
return error.code;
}
}
export { createArticle }; // 모듈화
HTML 코드 작성
코드 create.html
<html>
<body>
<h1>게시글 생성</h1>
<div class="input-group">
<div>
<input class="title-input" type="text" placeholder="제목을 입력하세요" />
</div>
<div>
<textarea class="content-textarea" placeholder="내용을 입력하세요"></textarea>
</div>
<button class="add-btn">등록</button>
</div>
<div>
<a href="./list.html">게시글 목록으로 돌아가기</a>
</div>
<script type="module">
import { createArticle } from "./article.js";
// title 입력 input 정보 참조
const titleInput = document.querySelector(".title-input");
// content 상동
const contentTextarea = document.querySelector(".content-textarea");
const addBtn = document.querySelector(".add-btn");
// 등록 버튼에 이벤트 리스너 할당
addBtn.addEventListener("click", async () => {
if ( // title과 content에 null 값이 추가되지 않도록 한다.
!titleInput.value ||
titleInput.value.trim() === "" ||
!contentTextarea.value ||
contentTextarea.value.trim() === ""
)
return;
// 값들을 좌우 공백을 제거하여 받아온다.
const parsedTitle = titleInput.value.trim();
const parsedContent = contentTextarea.value.trim();
// createArticle 메서드에 생성할 제목과 내용 전달
const result = await createArticle(parsedTitle, parsedContent);
alert("글 생성 성공");
// 작성한 글 정보로 이동한다. result에는 새로 생성한 글의 id가 저장되어 있다.
location.href = `./detail.html?id=${result}`;
});
</script>
</body>
</html>
결과
firestore에 성공적으로 데이터가 추가된 점을 볼 수 있다.
728x90
반응형
'웹(WEB) > 자바스크립트(JS)' 카테고리의 다른 글
| Node.js Firebase 연동, 데이터 삭제 deleteDoc (0) | 2024.08.28 |
|---|---|
| Node.js Firebase 연동, 데이터 수정 updateDoc (0) | 2024.08.28 |
| Node.js Firebase 연동, 데이터 파싱(2) getDoc, doc, dayjs (0) | 2024.08.28 |
| Node.js Firebase 연동, 데이터 파싱 collection, getDocs (1) | 2024.08.28 |
| Node.js MySQL 연동 (0) | 2024.08.27 |