[NOMAD CODERS_Wetube] Search controller

결과물

메인 내 input 박스를 통해 search 화면으로 이동

 

---

목적

• 메인 화면에 search박스를 만든다.
  • 해당 박스의 입력값과 함께 search 화면으로 이동!
• Search 화면의 로직을 구성한다.
  • Home화면에서 검색한 결과를 Search주소 밑 하위 주소로 넘어가도록 한다.

---

코드

header.pug

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

videoController.js

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

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("ViedoDetail", { pageTitle: "video Detail" });

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

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

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

---

배운점

form 태그, action 과 get 메소드( in HTML )

form태그는 로그인, 검색, 회원가입 등 유저가 입력하는 부분에 많이 쓰이는 태그이다.

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

Wetube의 검색창도 form태그로 이루어졌다. 

form 속성을 이용하여 입력값을 어디로, 어떻게 보낼지 정한다.

action 속성, get 메소드

action속성은 서버 내의 스크립트 파일을 지정하여  주어진 입력값을 처리 할 경로를 지정하는 역할을 한다. 

따라서 위의 코드에서, 주어진값을 처리할 경로는 search 이다.(이전 강의에서 모든 경로를 routes파일에 입력했다.)

method 속성은 입력값을 어떠한 방식으로 처리할 지 정한다. get 과 post가 있다.

get방식은 웹서버에서 받은 입력값을 브라우저에 그대로 송출하여 url에 노출시킨다.

post방식은 웹서버에서 받은 입력값을 송출하지않고 내부적으로 보이지않게 한다.

 

그래서 개인정보 등 보안에 민감한 정보들은 post방식을 사용한다.

(참고: https://www.w3schools.com/tags/ref_httpmethods.asp)

(인용: http://www.nextree.co.kr/p8428/)

 

---

query string

에디터에 사전 기능도 있었으면 좋겠다.

사용자가 화면에 입력한 값을 송출해주는 역할을 한다.

입력값은 URL으로 송출된다.

Ex)

www.tuigun.com/search?term=사용자가+입력한_값

 

쿼리스트링은 네이버, 구글 등의 유명 사이트에서도 쉽게 볼 수 있다.

네이버에서 많이 본 그것

구글에서 눈에 띄지 않았던 이유는 쿼리스트링 뒤 다른 정보들이 많았기 때문.. 구글도 있다.

 

 

ECMAScript 버전에서의 query string 작성법과 ES6에서의 작성법의 차이

왜 ES6의 방법이 정보를 가져오는 관점에서 더 좋은 방식인지?

> 다음 포스트에서 작성 할 것