More Practice # 01

지금까지 배웠던 것들을 한번 더 연습해 보도록 하자.

유저가 form 을 get하고 그 form을 post하면 그게 controller를 발동시켜서

유저들이 redirect되거나 페이지에서 뭔가를 보게 된다.

database 없이 해볼거지만 잘 이해하고 넘어가는게 중요하기 때문이다.

form을 get하고 post하는 부분들 말이다.

비디오를 업로드 할수 있는 페이지를 만들어 볼거다.

videoController.js 에다가 비디오를 하나 추가하도록 하는 controller를 만들어 본다.

다시 말하지만, 가장 먼저 해야 할건 바로 get에 대한 걸 만드는 거다.

왜냐하면 유저가 form을 볼수 있어야 해서다.

export const getUpload = (req, res) => {
  return res.render("upload");
};

export const postUpload = (req, res) => {
  // here we will add a video to the videos array.
  return res.redirect("/");
};

아직 upload template는 없지만 지금은 그냥 controller부터 만들어 보자.

그리고 postUpload도 만들어 준다.

코멘트도 남겨 놨다 . '이곳에서 비디오를 videos array에 추가할 예정'

return을 해주고 홈 화면으로 redirect하도록 한다.

("/")이렇게 해주면 홈으로 갈수 있다는 뜻이다.

이제 controller를 사용 해보자

controller를 실행 하는 부분은 바로 route이다.

videoRouter로 가서

videoRouter.route("/upload").get(getUpload).post(postUpload);

바로 전 단계에서 했었던 부분이라 이것도 한줄로 줄일수 있어서 했다.

import 확실하게 해주자 vsc에서 왠만하면 자동으로 만들어 주긴 하지만 그래도 한번 더 확인 하도록 하자.

첫번째로 먼저 controller를 만들어 보았고

두번째로 router 을 만들어 보았다.

그리고 그 controller들을 사용하는 거이다.

이제 /upload로 가는 (클릭이 가능한) 링크를 만들어 보겠다.

views폴더 에서 base.pug을 열어 준다.

    body 
        header
            h1=pageTitle
        nav 
            ul 
                li 
                    a(href="/upload") Upload Video

pageTitle 이 있는 header밑에다가 navigation을 적어 준다.

ul li a태그를 넣어서 /upload로 가도록 하고 Upload Video를 써준다.

새로고침을 해보면 위치가 어색하다. header 안에 넣어 주도록 한다.

        body 
        header
            h1=pageTitle
            nav 
                ul 
                    li 
                        a(href="/upload") Upload Video

이렇게 수정해 준다. 링크를 눌러 보면 /upload 페이지로 넘어가긴 하나 get할수 없다고 한다.

맞는 말이다. 왜냐 하면 /upload가 아니기 때문이다.

/videos/upload 가 맞는 거다.

만약 이 부분이 좀 복잡하다고 느껴진다면 당연하거다. 가끔은 url를 기억하는게 어렵단 말이다.

그래서 나중에 이 문제를 해결해 볼거다.

일단 지금은 다시 새로고침 해보면 작동은 잘 된다.

그리고 예전에 봤었던 에러가 또 발생하였다.

Error: Failed to lookup view "upload" in views directory "/Users/j.mercury/Documents/wetube/src/views"

에러가 말하기를 views 디렉토리에서 view라는 upload를 찾을수 없다고 한다.

즉 src/views 에 upload template가 없는거다.

맞는 말이다. 현재 src에선 upload template가 없다.

views폴더 안에 upload.pug 파일을 만들어 준다.

그리고 edit, home, watch 처럼 base.pug를 extend 해 준다.

이렇게 해주는 이유는 base의 모든걸 받기 위해서 이다.

그리고 base.pug는 content라 불리우는 block을 가지고 있다.

그래서 content 안에 이것저것 넣을수 있다.

extends base.pug

block content 
    h3 hello from upload

새로 고침 해주면 보다시피 작동은 되는데 페이지 제목이 없다.

그 이유는 controller는 upload를 render하지만 pageTitle을 보내지는 않는다.

그러니 pageTitle을 보내도록 한다.

videoController.js에서

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

작동이 잘된다. 웹페이지 타이틀도 잘 바뀌어 있고 , 당연하지만 upload video 링크가 보인다.

이 링크가 base.pug안에 있어서 그렇다.

이제 form을 만들어 볼거다.

upload.pug 에서

block content 
    form(method="POST")
        input(placeholder="Title", requried, type="text")
        input(type="submit", value="Upload Video")

form의 method는 post이다. 그리고 input들을 넣어준다.

실제론 존재 하진 않지만 현재 쓰고 있는 database를 쓰도록 한다.