Search Controller (Backend)

이번에는 Search Controller에 대해서 알아보자.

 

솔직히 인강 들으면서 머릿속에는 물음표만 가득하다..ㅠㅠㅠㅠㅠ

뭔가 좀 어려워 ㅠ

 

어쨋든

 

일단 검색해야하는 창을 하나 만들어주자.

이런식으로!

form(action=routes.search, method="get")
	input(type="text", placeholder="Search by Term...", name="term")

참고로 pug라는 프로그래밍 언어 해석기로 작성하였다.

큰 틀은 HTML 작성하는 법이랑 비슷하다.

 

여기서 method는 get 으로 해야한다.

GET과 POST가 있는데 GET의 경우에는 서버로부터 정보를 조회하기 위해서 설계되는 메서드 중 하나다.

URL에 있는 값들을 볼 수 있다.

 

search루트로 들어가게 되면 원래 home.pug 대신에 search.pug 에 대한 내용들이 작성되어있다.

 

입력창에 아무거나 입력하고 엔터를 눌른 후에 Controller에서 어떤 내용들이 넘어오는지 search에서 req가 어떤 것이 넘어오는지 보자.

이 이외에도 다른 내용들이 엄청 많이 전송이 되는데 여기서 주목해야할 내용은 query: { term: 'abcdefg' } 이다.

이를 이용해서 search페이지에 내용을 넘겨보자.

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

처음에는 대충 이런식으로 작성해도 되나..? 싶었는데

된다! 그런데 더 깔끔한 방법이 있다.

export const search = (req, res) => {
    const {query: { 
        term: searchingBy }} = req; // searchingBy = req.query.term
    res.render("Search", { pageTitle: "Search", searchingBy }); // 이름이 같을땐 하나만 써도 됨.
}

참고로 searchingBy는 다음과 같이 search.pug에 작성해뒀다. (extends layouts/main은 main.pug의 내용을 포함시킨다.)

 

 

 

 

 

이를 이용해서 꼭 Search만 아니어도 쓰임새가 많을 듯 하다.

 

다음에는 POST에 대해서도 작성해두도록 하겠다.