Search Controller

다음 글은 Search Controller에 대해서 다루겠다. 

첫째, home 템플릿에 search 박스 만들기
둘째, 검색 시 search 템플릿으로 이동

셋째, 이 과정을 search controller에서 다룰 것이다.   

1) header.pug에 다음과 같이 새로운 column과 태그를 추가해준다. 

    이 column과 태그는 home 템플릿에 검색 박스를 추가한다.  

    중요한 것은 routes.search로 연결해주는 것과 get 메소드를 사용하는 것이다. 

2) npm start를 통해 실행하면, 다음과 같이 search 박스가 추가된 것을 확인할 수 있다. 

3) 다음과 같이 search box에 hello를 입력하고 엔터를 누르면

4) search 페이지로 이동한다. 

    그리고 url에 search?term=hello가 나타난 것을 볼 수 있는데, 

    이는 get방식을 사용했기 때문이다. 

5) 다음은 search 템플릿에 내가 검색한 단어가 나타나도록 하고 싶다. 

     우선, search 템플릿에 다음과 같은 코드를 추가한다. 

6) videoController.js로 이동해서 

     search 상수에 다음과 같은 코드를 추가한다. 

7) hello를 입력하고 검색하면,

    search 템플릿에 searching by hello가 추가되었음을 확인할 수 있다.  

"다음은 노마드코더(https://academy.nomadcoders.co/)의 [초급 풀스택] 유튜브 클론 코딩 강의를 참고하였습니다."