req.query 값을 템플릿으로 전달하기

form 태그에서 입력한 값을 search.pug라는 템플릿으로 전달하는 것이 목표이다.

 

header.header
    .header__column
        a(href=routes.home)
            <i class="fab fa-youtube"></i>
    .header__column
        form(action=routes.search, method="get")
            input(type="text", placeholder="Search by term...", name="term")
    .header__column
        ul
            li
                a(href=routes.join) Join
            li
                a(href=routes.login) Log in

 

우선, header.pug에 form 태그와 input 태그를 설정해 주었다.

method가 get임에 주의하자!

get 메소드가 url에 정보를 추가해주기 때문이다. post는 전달하지 않는다.

검색하면 url에 http://localhost:4000/search?term=[검색어]

가 뜰 것이다. (term은 input 태그의 name 속성에 의해 지정된 것)

 

한편, routes.search로 넘어가는 req에는 분명 검색어가 전달되었을 것이다.

controller를 조작하여 확인해보자

 

export const search = (req, res) => {
  console.log(req);
  res.render("search", { pageTitle: "Search" });
};

 

콘솔 창을 살펴보면 req의 query부분에는 검색어가 들어있음을 확인할 수 있다.

이 검색어를 그대로 search 템플릿으로 전달해주자

 

export const search = (req, res) => {
  const searchingBy = req.query.term;
  res.render("search", { pageTitle: "Search", searchingBy: searchingBy });
};

 

물론 search.pug에는 다음과 같이 활용하면 된다.

 

extends layouts/main.pug

block contents
    .search__header
        h3 Searching by #{searchingBy}