썸네일을 실수로 삭제해버렸는데 넣을 사진이 없어서..
키우는 햄스터 그린 그림ㅎ을 넣게되었다.......................
게시물 검색 기능
우선 검색 키워드 넣을 input태그랑 전송해줄 버튼 만들기
1. input과 버튼에서 서버로 검색 키워드 전송하면
2. 서버는 키워드 포함된 document 가져와서
3. ejs파일에 넣어 유저에게 보내주기
list.ejs에서 input이랑 버튼 추가하고
<input class="search" />
<button class="search-send">검색</button>
css도 추가해주자
.search {
margin-left: 20px;
padding: 5px;
}
.search-send {
padding: 6px 10px;
background: lightgray;
border: none;
border-radius: 5px;
vertical-align: middle;
} - 서버로 데이터 요청을 위해
<form>혹은fetch사용해주면 된다.
하지만 더 쉬운 방법으로 GET요청으로도 해결할 수 있다.
검색버튼 밑으로 script 태그를 열어 아래처럼 작성
document.querySelector('.search-send').addEventListener('click', function(){
let 키워드 = document.querySelector('.search').value
location.href = '/search?val=' + 키워드
})location.href = '/search'로 검색 버튼 누르면 서버로 GET요청하고,
input에 입력한 값은 document.querySelector('.search').value로 입력값을 받아 "키워드"라는 변수에 넣어주고,
'/search?val=' + 키워드로 query string을 이용해 보내주기!
- 이제 서버파일로 가서 처리해주면 된다.
app.get("/search", async (요청, 응답) => {
console.log(요청.query.val);
});요청.query.val로 검색창에 넣은 키워드를 콘솔창에 테스트로 출력해보았다.
- 테스트가 성공했으면 서버는 위 키워드와 일치하는 document를 가져오자
app.get("/search", async (요청, 응답) => {
console.log(요청.query.val);
let result = await db
.collection("post")
.find({ title: 요청.query.val })
.toArray();
});.find()와 .toArray()를 사용해서 찾은 파일들을 한 번에 보여줄 수 있도록 만들고,
- ejs에 넣어 유저에게 보여줄 수 있다.
검색 결과 확인을 위한 ejs 파일을 하나 생성해주고,
search.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>게시글 목록</title>
<link rel="stylesheet" href="/main.css" />
<link rel="stylesheet" href="/list.css" />
</head>
<body class="grey-bg">
<%- include('nav.ejs') %>
<input class="search" />
<button class="search-send">검색</button>
<script>
document
.querySelector(".search-send")
.addEventListener("click", function () {
let 키워드 = document.querySelector(".search").value;
location.href = "/search?val=" + 키워드;
});
</script>
<h4>검색결과</h4>
<div class="white-bg">
<% for (let i = 0; i < 글목록.length; i++){ %>
<div class="list-box">
<h4>
<a href="/detail/<%= 글목록[i]._id %>"> <%= 글목록[i].title %> </a>
<a href="/edit/<%= 글목록[i]._id %>">✏️</a>
<span class="delete" data-id="<%= 글목록[i]._id %>">🗑️</span>
</h4>
<p><%= 글목록[i].content %></p>
</div>
<% } %>
</div>
</body>
</html>
사실 list.ejs파일 복붙해서 필요없는 부분만 삭제했당..😎
다음, 서버파일로 돌아가서 아래처럼 추가..
응답.render("search.ejs", { 글목록: result });
검색 테스트를 해보면
검색이 잘 되기는 한데, 제목이 정확하게 일치하는 경우에만 가져온다.
이 부분을 해결하기 위해서는 정규식을 써주면 된다.
{ $regex : 요청.query.val }$regex를 사용하여 해당 키워드가 포함된 모든 게시글을 찾을 수 있도록 해준다.
10분의 정리로 10시간을 아낄 수 있다는 마음으로 글을 작성하고 있습니다💕