영상을 4개를 만들어 놨다.
제일 최신 영상이 제일 밑으로 가는 구조이다. 그리 원하는 상황은 아니다.
Mongoose가 좋은 이유 중 하나는 굉장히 훌륭한 쿼리 엔진을 갖고 있다는 거다.
무슨 말이냐면 문서들을 보여주는 방식을 수정할수 있고 어떻게 검색할지도 수정 할수 있다.
어떻게 정렬 할지도 고를수 있다.
예를 들어 여기로 와서 home에서 모든 영상들을 찾은 다음에 정렬을 시킬수 있다.
videoController.js에서
export const home = async (req, res) => {
const videos = await Video.find({});
return res.render("home", { pageTitle: "Home", videos });
};export const home = async (req, res) => {
const videos = await Video.find({}).sort({
createdAt: "desc",
});그리고 어떻게 정렬할 것인지 object로 보낼수 있다.
그래서 이 경우엔 영상들을 createdAt에 맞춰 정렬 할수 있다.
createdAt라고 입력 했고 그전에 잠깐 사이에 보인 suggestion윈도우가 있었다.
ascending(오름차순) 과 descending(내림차순)이 있다.
ascending은 asc descending은 desc이다.
일단 내림차순 부터 정렬해 보도록 하겠다. 새로고침 해보면 잘 적용된다. 최신 비디오가 위로 올라 온다.
export const home = async (req, res) => {
const videos = await Video.find({}).sort({ createdAt: "asc" });
return res.render("home", { pageTitle: "Home", videos });
};그럼 당연히 오름차순으로 하면 제일 오래된 영상이 위에 있을거다.
봤다시피 이것 저것 수정해 볼수 있다.
진짜 해보고자 하는건 새로운 페이지를 만드는 거고
search페이지가 될거다.
만약 search 페이지를 만든다면 어느 router에 하는게 좋을까?
globalRouter에서 해줘야 한다.
const globalRouter = express.Router();
globalRouter.get("/", home);
globalRouter.get("/join", join);
globalRouter.get("/login", login);
globalRouter.get("/search", search);이렇게 해주고 function이 아직 설정이 안되어 있으니 만들어 준다.
videoController.js에서
export const search = (req, res) => {
return res.render("search");
};그 function을 search라고 만들어 준다. request response를 받고
search 페이지를 render해서 return한다.
(search페이지는 현재 존재 하지 않는다. 만들어 줘야 한다.)
이제 controller에 search라는 function을 만들었다.
그러고 globalRouter로 가서 serch function을 입력해주면 import된다.
그러면 이제 search page가 생긴 거다. 지금 한건 router와 controller를 생성한 것 뿐이다.
이제는 이 링크를
base템플릿에 추가해야 한다.
base.pug에서
navigation안에 search를 추가 해준다.
body
header
h1=pageTitle
nav
ul
li
a(href="/videos/upload") Upload Video
li
a(href="/") Home
li
a(href="/search") Search이렇게 해주고 새로고침을 한다. 그러면 search 가 생겼지만 클릭해주면
view에 search page가 없기 때문에 에러가 난다.
이제
views에서 새 파일search.pug를 만들어 준다.
extends base.pug
block content
form(method="GET")
input(placeholder="Search by title", type="text")base를 확장해 주고 form을 생성해준다. 그리고 이번에는 이 form의 method가 POST가 되지 않고
GET이 될 거다. 그리고 input도 넣어주고 placeholder,type도 넣어준다.
그리고 이제 새로고침을 해주면 search page에 form이 생겼다.
이번에는 search now 라고 명명된 버튼을 하나 만들어 준다.
block content
form(method="GET")
input(placeholder="Search by title", type="text")
input(type="submit", value="Search now")그리고 pageTitle을 정해 주지 않았다.
videoController.js에서
export const search = (req, res) => {
return res.render("search", { pageTitle: "Search" });기억해야 할건 pageTitle이 필요한 이유는 이게 base.pug에서 쓰이는 변수라서 그렇다.
그리고 search는 extends base.pug라 pageTitle을 꼭 입력 해줘야 한다.
이제 새로고침을 해주면 pageTitle이 적용된다.
Search, search by title 다 있다.
이제 해볼 것은
search page에서hello라고 입력한 후에search now를 눌러 준다.
그리고 보다시피 URL안에는 아무것도 없다. form을 받았는데도 말이다.
그리고 그 이유는 아직 input에 어떤name도 설정하지 않았기 때문이다.
block content
form(method="GET")
input(placeholder="Search by title",name="keyword", type="text")
input(type="submit", value="Search now")그래서 keyword라고 이름을 정해줬다. 그리고 새로고침을 해주고 search해주면
url에 search하고자 하는 값이 나온다.
이번 파트는 여기 까지 였고 다음 파트에서는 url에서 정보들을 어떻게 빼내는가를 알아 보도록 하겠다.
예를 들어 react로 검색해 보면 해당 url의 정보를 search 컨트롤러로 가져와야 한다.
videoController.js에서
export const search = (req, res) => {
console.log(req.query);
return res.render("search", { pageTitle: "Search" });
};이렇게 해주고 새로고침해주고 console을 보면 url의 정보를 가져온다.
예를 들어 비디오 링크를 클릭하면 URL에 ID가 보인다.
그리고 이 ID는 request.params를 통해 받을수 있다.
이제 form을 보내면 그 내용을 req.body로 받을수 있는걸 알고 있다.
그리고 search화면에서 나오는 url로 나오는 것들은 req.query에서 볼수 있다.
Express가 여러가지를 참 쉽게 해준다. 그럼 이제 req.query에서부터 keyword를 받을 거다.
export const search = (req, res) => {
const { keyword } = req.query;
console.log("should search for", keyword);
return res.render("search", { pageTitle: "Search" });
};이렇게 해주고 새로고침해주면 console에 작성한 코드가 뜬다.
이제 해줘야 할거는 실제로 영상을 찾아 보는 거다.
하지만 어쩔때는 keyword가 존재하지 않을 수도 있다.
keyword는 검색할때만 생기는 거라서 그럴수 있다.
단순히 search페이지로 갔을때에는 keyword가 없다.
그 상태에서 console로 가면 keyword는 undefind라고 나온다.
그러니까 사용자가 search페이지에 도착할 때에는 keyword가 undefined이다.
하지만 사용자가 뭔가를 검색한다면 이제 keyword는 값을 갖게 된다.
이제 이것을 굉장히 유용하게 쓰일수 있다. 왜냐하면 만약 keyword가 존재한다면
export const search = (req, res) => {
const { keyword } = req.query;
if (keyword) {
// search
}
return res.render("search", { pageTitle: "Search" });
};본격적으로 검색을 할수 있는거다. 이번 파트는 여기서 마친다.
다음 파트에서 검색하고 검색 결과를 출력 할거다.
이번 파트에서는 좀 더 빠르게 무언가를 만들어 내고 있다.
globalRouter에서 search route를 생성했고 search controller도 만들었고
그리고 base.pug를 확장하는 search template도 만들었다.
그리고 form을 get방식으로 하나 만들었다. URL에 정보가 보일수 있도록
예시를 포함한 input을 하나 만들었고, submit버튼도 하나 만들었다.
현재 만든 input에 이름도 정해줘서 keyword가 URL에 등장하게 만들었다.
그리고 전달 방식이 GET이기 때문에 여기서 아무것도 안해도 된다.
GET만 사용 할거다. POST는 안해도 된다.
그리고 req.query로 URL에 있는 모든 정보들을 확인 할수 있단걸 알게 되었다.
때때론 keyword가 undefined가 될수도 있다는 걸 알았다.
