[유튜브 클론코딩] 2.18 Search Controller

2.18 Search Controller

partials/header.pug에서 Search 검색창 만들기

partials/header 파일을 조금 바꾸겠다. 칼럼을 하나 더 추가하고, 여기에 form을 하나 추가한다.

action은 routes_search으로, method는 get으로 한다. url에 입력한 내용을 보고 싶기 때문에 get으로 한다.

header.header

    .header__column

        a(href=routes.home)

            i.fab.fa-youtube

    .header__column

        form(action=routes.search, method="get")

            input(type="text", placeholder="Search by term...")

    .header__column

        ul

            li

                a(href= routes.join) Join

            li

                a(href= routes.login) Log In

↑ header.pug

실행해보면 검색창에 뭔가를 검색하고 enter를 누르면 search 페이지로 이동을 하는데 주소 뒤에 ?가 붙는다. input에 name을 추가하지 않아서 그렇다.

 

header.header

    .header__column

        a(href=routes.home)

            i.fab.fa-youtube

    .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

이제 새로고침을 해보면 주소에 search?term="안녕" 라고 뜰 것 이다.

search 페이지에 표시할 정보들이 주어졌다.

 

이제 search 페이지를 수정한다. 클래스 명이 search__header인 div를 추가하고 코드를 작성한다.

 

extends layouts/main

block content 

    .search__header

        h3 Searching for #{searchingBy}

↑ search.pug

아직은 searchingBy 변수가 없기 때문에 안뜰 것이다. videoController.js를 수정하러 간다.

 

export const home = (req, res) => res.render("home", {pageTitle: "Home"});

export const search = (req, res) => {

    console.log(req);

    res.render("search", {pageTitle: "Search"});

}

export const videos = (req, res) => res.render("videos", {pageTitle: "Videos"});

export const upload = (req, res) => res.render("upload", {pageTitle: "Upload"});

export const videoDetail = (req, res) => res.render("videoDetail", {pageTitle: "Video Detail"});

export const editVideo = (req, res) => res.render("editVideo", {pageTitle: "Edit Video"});

export const deleteVideo = (req, res) => res.render("deleteVideo", {pageTitle: "Delete Video"});

일단 req를 콘솔로 찍어보면, '안녕'은 query에 있는 것을 알 수 있다.

즉, req.query에 있다. 위의 코드를 console.log(req.query)로 수정하고 실행해본다

 

콘솔창에 { term: '안녕'}이 보인다.

 

export const search = (req, res) => {

    console.log(req);

    res.render("search", {pageTitle: "Search"});

}

즉, 여기에 express가 query를 집어넣는 것이다. 이게 query라는 거다. 많은 것들을 추가할 수 있다. 이렇게 &로 추가하면 된다.

 

http://localhost:4000/search?term=안녕&something=lalala&filter=price-first

 

마치 자바스크립트의 객체 형태처럼 보이고 있다.

 

아무튼 req.query.term을 가져오는 걸로 한다. 콘솔에 안녕 이라고 잘 뜬다. 이게 원하던 것이였다.

 

export const search = (req, res) => {

    // const searchingBy = req.query.term;

    const {query: { term }} = req;

    res.render("search", {pageTitle: "Search"});

}

const searchingBy = req.query.term 이라고 해도 되지만, 이것은 ES6 전의 문법이다.

const {} = req; 라고 하면 객체를 가리키는 것이므로 req 안에 있는 query 안에 있는 term은 {query: {term}}이라고 표기한다.

이게 term=req.query.term이라고 하는 것보다 정보를 가져오는 더 좋은 방식이다.

여기 term에 이름을 할당할 수도 있다. 이 term의 변수명은 searchingBy로 한다.

우린 이 searchingBy를 search 템플릿에 전달할 수 있다.

 

export const search = (req, res) => {

    const {query: { term: searchingBy }} = req;

// const searchingBy = req.query.term 과 같은 코드

    res.render("search", {pageTitle: "Search", searchingBy});

// searchingBy = searchingBy 인 경우 하나로 줄여쓸 수 있음

}

이제 실행해보면 잘 나온다.