반응형
개요
이전 글에서는 데이터를 파싱해와 컬렉션을 배열 형태로 받아왔다면 이번엔 id를 파라미터 형식으로 전달하여 한개의 필드를 받아오는 방법에 대해 알아보자
해당 내용을 사용하여 게시판 형식에서 게시글을 단일로 조회 할 수 있다.
관련 메서드
- doc : 컬렉션에서 id 에 해당하는 게시글을 가져옴
- getDoc : 해당 문서를 snapshot 형태로 한가지를 가져옴
- docSnapshot.exists() : 문서가 존재하는지 boolean 리턴
javascript 코드 작성
코드 article.js
// 이전 글 참조
import { db } from "..\app.js";
import {
getDoc, doc,
} from "https://www.gstatic.com/firebasejs/10.12.2/firebase-firestore.js";
async function getArticle(id) {
try {
// id를 매개변수로 받아 articles 컬렉션 내 특정 id를 갖는 문서 정보를 초기화
const docRef = await doc(db, "articles", id);
// 문서 정보를 갖고 필드 정보를 가져온다.
const docSnapshot = await getDoc(docRef);
if (docSnapshot.exists()) { // 성공적으로 필드 정보를 가져 왔다면
const article = { // article 객체 생성
id: docSnapshot.id,
...docSnapshot.data(),
};
return article; article 객체 리턴
} else {
return 404;
}
} catch (error) {
return error.code;
}
}
export { getArticle }; // 해당 함수를 모듈화 한다.
HTML 코드 작성
코드 detail.html
<html>
<body>
<h1>게시글 상세조회</h1>
<div>
<span>id: </span>
<span class="id-data"></span>
</div>
<div>
<span>title: </span>
<span class="title-data"></span>
</div>
<div>
<span>content: </span>
<span class="content-data"></span>
</div>
<div>
<span>createdAt: </span>
<span class="created-at-data"></span>
</div>
<div>
<span>updatedAt: </span>
<span class="updated-at-data"></span>
</div>
<a class="update-link" href="#">게시글 수정</a>
<button class="delete-btn">게시글 삭제</button>
<br />
<a href="./list.html">게시글 목록으로 돌아가기</a>
// dayjs를 사용하기 위해 CDN 첨부
<script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.11/dayjs.min.js"></script>
<script type="module">
import {getArticle, deleteArticle} from "./article.js";
// 현재 URL에서 파라미터를 뽑아온다.
const params = new URLSearchParams(location.search);
// 파라미터에서 id 값을 뽑아온다.
const id = params.get("id");
// firestore에서 id에 해당하는 필드 정보를 가져온다.
const result = await getArticle(id);
// 필드 정보 내 timestamp 형식의 변수를 YYYY.MM.DD HH:mm:ss 형식으로 변환한다.
const parsedStep1CreatedAt = new Date(result.createdAt.seconds * 1000);
const parsedStep1UpdatedAt = new Date(result.updatedAt.seconds * 1000);
const parsedStep2CreatedAt = dayjs(parsedStep1CreatedAt).format(
"YYYY.MM.DD HH:mm:ss"
);
const parsedStep2UpdatedAt = dayjs(parsedStep1UpdatedAt).format(
"YYYY.MM.DD HH:mm:ss"
);
// HTML의 클래스를 참조
const id_data = document.querySelector('.id-data');
const title_data = document.querySelector('.title-data');
const content_data = document.querySelector('.content-data');
const created_at_data = document.querySelector('.created-at-data');
const updated_at_data = document.querySelector('.updated-at-data');
// 해당 클래스의 textContent를 변경한다.
id_data.textContent = result.id;
title_data.textContent = result.title;
content_data.textContent = result.content;
created_at_data.textContent = parsedStep2CreatedAt;
updated_at_data.textContent = parsedStep2UpdatedAt;
</script>
</body>
</html>
결과
Day.js
Date 파싱 라이브러리, 매우 가볍고, 빠르게 동작한다.
Date 형식의 변수를 원하는 형태의 format으로 파싱이 가능하다.
728x90
반응형
'웹(WEB) > 자바스크립트(JS)' 카테고리의 다른 글
| Node.js Firebase 연동, 데이터 수정 updateDoc (0) | 2024.08.28 |
|---|---|
| Node.js Firebase 연동, 데이터 추가 Timestamp, addDoc (0) | 2024.08.28 |
| Node.js Firebase 연동, 데이터 파싱 collection, getDocs (1) | 2024.08.28 |
| Node.js MySQL 연동 (0) | 2024.08.27 |
| Node.js express 웹서버 (0) | 2024.08.27 |