1. 선행지식
앞선 2개의 글에서 Firestore Database에 데이터를 (사진 파일 포함)을 업로드하는 방법과, 컬렉션(=DB)에 올려진 데이터를 모두 읽어와서 화면에 표시하는 방법을 소개했었다. 그리고 이를 웹에서 구현하는 코드들을 Copilot의 도움을 받아 만드는 과정을 소개한 바 있었다. FIrebase DB에 대한 자료 업로드와 읽어오는 과정에 대해서는 다음 2개의 이전 글을 참조하기 바란다.
https://blog.naver.com/mythee1/223493076303
https://blog.naver.com/mythee1/223493415455
그런데, 자료의 수가 많아질수록, 이처럼 자료 모두를 읽어올 것이 아니라, 특정한 조건의 자료만 읽어와, 해당 자료의 정보 일부를 수정해야 하거나, 또는 해당 문서(=record)를 선택적으로 삭제해야 하는 경우들도 있다. 따라서, 내 경우에는 이러한 경우를 구현하기 위해, 먼저 특정 상품에 대한 키워드를 입력받아, 해당 문서를 표시하고, 각각의 문서(=레코드)에 “수정”, “삭제” 등의 버튼을 추가하여 해당 자료를 수정하거나, 해당 문서를 삭제하는 기능을 구현해 보려고 했다.
2. 상품 키워드 검색 코드 만들기
본 글에서는 이러한 과정 중, 먼저 키워드 입력으로, 해당 키워드에 해당되는 상품들을 나열하는 단계까지의 과정을 소개하려고 한다.
Firebase에서는 특정 조건에 해당되는 문서만을 읽어올 때 다음과 같은 문법을 사용하는 것은 앞선 글에서 소개한 바 있었다.
db.collection(컬렉션이름).where( 특정 조건 )get( ).then( ).catch( )
본 글에서는 특정 키워드를 입력받기 위해, 앞선 글에서 사용했던 다음 입력폼을 필요한 부분만 발췌해,
다음과 같이 1개의 키워드를 입력받는 칸과, 작동에 필요한 버튼만 남기도록 간소화시켜 활용하고
이 버튼이 눌려졌을 때 동작에 사용했던 다음 부분을 동작 트리거 형태로 골격을 만들어준 다음,
이 골격 내부에, 앞선 글에서 DB의 모든 레코드 자료를 가져와 표시하던 코드를 다음과 같이 노란색 표시된 조건부 쿼리로 문법을 바꾼 후 넣는 방법으로 코드 초안을 구성하려고 했다. (참고: 다만 나는 다음 화면에서 붉은색으로 표시된 부분의 수정을 놓치는 바람에 오류가 발생했는데, 이 오류를 찾는데 시간이 꽤 걸렸다.)
이렇게 만든 코드 초안을 Copliot에게 입력하고 검토를 요청한 결
다음과 같은 수정 제안을 받았다.
이 부분은 이전에 만든 코드를 가져오면서, 새로운 변수명을 사용하면서 미처 고치지 못하고 놓친 부분들에 대한 지적이었다.
이를 수정하고, 다시 검토를 요청하고,
그런데 아직도 기존에 안내받았으나, 미처 수정하지 못한 부분이 남아있었다.
그리고 폼의 문구 수정 안내도 있었다.
이렇게 기존 코드를 가져와 재사용하면서 달라진 변수명을 수정하지 않아서 발생했던 문제들을 꼼꼼히 고친 후, 확인해 보니, 이제는 잘 되었다고 한다.
그런데, 막상 브라우저에서 실행해 보니, 키워드 입력은 되는데, 동작이 되질 않는다.
오류를 찾기 위해 한참을 찾아보았는데, 잘 찾을 수 없었다. Copilot에도 질문해 보았으나, 엉뚱한 소리만 했다.
그러다가 겨우 발견한 2가지 원인은 내가 Copilot이 안내해 준 것들을 그대로 복사하기보다는 한 줄 한 줄 필요한 부분만 복사해서 내 코드를 수정하는 과정에서 2가지 오류가 있었던 것을 발견했다.
그중 하나는 Firestore의 컬렉션(=DB) 이름을 “products”로 적어야 하는데, “s” 글자 하나가 누락된 “product”로 기재했던 문제가 있었고, 또 하나는 기존에 만들던 코드를 과정에서 필드 이름을 헛갈려 그대로 사용한 때문임을 한참만에야 알 수 있었다.
원인을 찾고 나서 이 부분들을 바로잡을 수 있었고,
이 과정에서 Copilot이 추가로 제안해 준대로 Form을 다음과 같이 변경했다.
그리고 이제 브라우저에서 키워드를 입력하니, 버튼을 누르기 전까지 아무런 오류가 발생하지 않았고,
키워드가 입력되자, 정상적으로 키워드에 해당되는 레코드만을 반환해 주었다.
혹시 키워드 해당되는 레코드가 여러 개 있는 경우에 어떤 결과가 나오는지 확인하기 위해, 상품명이 동일한 (세부내용은 조금 다른) 문서를 2개 더 추가로 DB에 업로드한 후, 동일한 방식으로 키워드를 입력한 결과, 다음과 같이 키워드와 상품명이 일치하는 3개의 문서가 모두 잘 검색된다.
이렇게 Firestore DB의 키워드 검색을 위해 Copilot의 도움을 받아 만든 코드는 다음과 같다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>키워드 상품찾기</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-storage.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<div class="container">
<form id="productForm" class="m-3">
<input type="text" id="keyword" name="keyword" class="form-control mb-3" placeholder="검색할 상품명을 입력하세요.">
<input type="button" id="searchit" value="검색시작" class="btn btn-secondary" style="background-color: orange;">
</form>
<div id="productList" class="m-3"></div>
</div>
<script>
const firebaseConfig = {사용자별로 달라지는 사항으로 생략
};
firebase.initializeApp(firebaseConfig);
var db = firebase.firestore();
var storage = firebase.storage();
$('#searchit').click(function () {
$('#productList').empty(); // 검색 결과를 초기화합니다.
db.collection('products').where("상품명", "==", $('#keyword').val())
.get()
.then((querySnapshot) => {
querySnapshot.forEach((doc) =>{
var data = doc.data();
var date = new Date(data.날짜.seconds * 1000).toLocaleString();//YYYY/MM/DD hh:mm:ss 형식
console.log(doc.id)
var html = `
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img src="${data.사진}" alt="${data.상품명}" style="width: 150px; height: 150px;">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">${data.상품명}</h5>
<p class="card-text">${data.상품설명}</p>
<p class="card-text"><small class="text-muted">${data.가격}</small></p>
<p class="card-text"><small class="text-muted">${date}</small></p>
</div>
</div>
</div>
</div>
`;
$('#productList').append(html);
});
})
.catch((error) => {
console.log("Error getting documents : ", error);
});
});
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>
3. Next Step
일단 위에서 구현된 키워드 검색에 자료 수정과, 삭제 등의 기능을 추가하기 위한 버튼들을 추가하고, 이 버튼 선택에 따라 자료 수정 및 해당 문서 삭제 기능을 추가하려 한다.