Edit Video #02

전 단계에서 submit button을 클릭할때 form 의 행동을 어떻게 통제하는지 알아봤다.

method라는게 바로 form과 back end 사이의 정보 전송에 관한 방식이라는 걸 배웠다.

만약 get method를 사용하면 그 form 에 있는 정보가 url에 들어가게 된다.

그건 좋은 방법이긴 하다. 예를 들어서 검색을 할 때도 쓰이고, 검색 페이지를 만들때 get을 사용한다.

그 검색어는 url 안에 들어간다.

이런 식으로 생각해 보자 ' 이 데이터는 back end 로 가서 어떤 걸 할까?? '

'이 데이터가 database 상태를 수정하는 건가?' 'database를 변경 할 data로 뭔가를 하는가?'

뭔가를 수정하거나 추가하거나 삭제를 하나? 그런 경우에 post 를 사용한다.

만약 그냥 데이터를 받는게 목적일 경우에는 get을 사용하면 된다.

그래서 post 를 사용하는 거다.

그리고 save 버튼을 누르면 똑같은 url로 post request를 보내준다.

그 이유는 , action을 안 써 줬기 때문이다.

만약에 action을 사용하게 되면 데이터를 특정 url로 보낼수 있게 된다.

하지만 그럴 필요가 없기에 action을 사용하지 않는다.

router에게 post request를 어떻게 다루는지 알아 봤다.

videoRouter.js 에서

videoRouter.get("/:id(\\d+)/edit", getEdit);
videoRouter.post("/:id(\\d+)/edit", postEdit);

get이랑 똑같은데 이름이 post이다.

구조도 같고 url도 똑같지만 controller는 다르다. 그리고 function도 있다.

이제 두 가지 function을 가지고 있다.

하나는 getEdit으로 form을 render하는 것이고, 다른 하는 postEdit이다.

비디오를 수정 할수 있게 해주는 부분이다.

현재 상태에서는 form을 submit 하면 무한 로딩만 한다.

videoController.js

export const postEdit = (req, res) => {};

그 이유는 아무것도 지정을 안해 주었기 때문이다.

반환을 해주어야 한다. template을 render 해 줄수도 있다.

아니면 return res.end 해줄수도 있다.

export const postEdit = (req, res) => {
  return res.end();
};

이런 식으로 해줄수 도 있다. 다시 form을 보내보면 보다시피 아무것도 없다.

없다기 보단 아무런 데이터를 안 받는 거니 연결이 종료 되었다고 보는게 맞겠다.

다시 설명 하면 get방식이고 HTML을 받았다.

save을 누르면 videoRouter의 post에 의해서 반응 한다.

videoRouter의 post가 postEdit을 부르고 postEdit 은 응답을 종료 한다.

살펴 보면 반복되는 부분이 약간 있다.

videoRouter.js

videoRouter.get("/:id(\\d+)/edit", getEdit);
videoRouter.post("/:id(\\d+)/edit", postEdit);

오로지 다른점은 post이냐 get이냐 이런식으로 하지 말고 더 짧게 쓰는 방법으로 알아 보자.

이 부분에서 수정을 좀 해주겠다.

videoRouter.route("/:id(\\d+)/edit").get(getEdit).post(postEdit);

해당 vidoeRouter에 route를 해주고 get request을 보낸다면

getEdit controller를 사용하게 되고 만약 post request 을 보내게 되면

postEdit controllerㄹ들 사용하게 되는 거다.

그렇게 해서 한 줄로 줄일 수 있게 되었다.

다시 한번 살펴 보면 url에 route를 만들었고 hamdler를 붙여주고 있다.

하나는 get request를 위한 것이고 다른 하나는 post request를 위한 것이다.

하나의 url에 get,post 방식을 쓰게 되었다.

똑같은걸 반복해서 쓰지 않게 되면 실수할 부분도 적어지기 때문에 아주 좋은 방법이다.

res.end()를 하는 대신 res.redirect()로 해본다.

videoController.js 에서

export const postEdit = (req, res) => {
  return res.redirect();
  };

res.redirect() 는 브라우저가 redirect(자동으로 이동) 하도록 해준다.

(브라우저가 해당 url로 이동하게 된다.)

이 경우엔 redirect를 어디로 이동하게 하냐면 watch page로 이동하게 해준다.

즉 edit video를 누르고 save 버튼을 누르면 watch page로 돌아가게 해준다는 거다.

현재는 경로를 지정해 주지 않아서 undefined로 나온다.

경로를 지정해 보도록 한다.

videoController.js

export const postEdit = (req, res) => {
  const { id } = req.params;
  return res.redirect(`/videos/${id}`);
};

유저가 getEdit으로 오게 되면 그러면 편집용 form을 render 시키고

유저가 submit을 하게 되면 post request로 이동하여 postEdit로 처리 해준다.

postEdit은 route 로 부터 id를 얻어 와서 /videos/id 페이지로 redirect 시키는 거다.

아직은 그 외에는 아무것도 안한다. 업데이트 하지 않는다.

그 다음 단계는 입력되는 value를 얻어야 한다.

이를테면 req.params 같은거다. req.params 는 주어지는 정보이다.

url이 생겼기 때문에 express가 id라는걸 알아서 주는거다.

이제는 form으로부터 정보를 얻어야 한다.

title의 value를 얻어야 한다.

edit.pug에서

input(name="title",

이 부분이다.

get 이 아닌 post를 하고 있기 때문에 이 데이터가 back end로 전송되고 있다는걸 알수 있다.

하지만 어떻게 data 를 받아야 하는지 모르고 있다.

이 데이터는 사용 가능하다. req.params를 쓸 수 있었던 것 처럼 말이다.

req.body라는 것이 있다.

videoController.js에서

export const postEdit = (req, res) => {
  const { id } = req.params;
  console.log(req.body);
  return res.redirect(`/videos/${id}`);
};

console.log(req.body);를 추가해서 사용해 본다.

새로고침해서 확인해 보면 watch page 로 가는걸 확인 할수 있다.

console.log를 확인해 보면 undefined라고 나오는걸 알수 있다.

아직 express application은 form 을 어떻게 다루는지 모른다.

application에게 form을 처리하고 싶다고 해줘야 한다.

그러기 위해선 express function의 method를 하나 사용해 본다.

그건 바로 express.urlencoded 이다.

https://expressjs.com/en/api.html#express.urlencoded

해당 사이트에서 확인해 볼수 있다.

express.urlencoded는 form의 body를 이해한다.

몇가지 옵션이 있다. 예를 들면 parameterLimit을 써서 필요하다면 parameter 갯수에 제한을 줄수 도 있다.

또는 limit을 써서 form 의 사이즈에 제한을 줄수도 있다.

사용 해 볼건 extended이다. extended 는 body에 있는 정보들을 보기 좋게 형식을 갖추는 일을 해준다.

더 알고 싶으면 query string library로 가서 보면 된다.

현재는 별로 중요한 부분이 아니다.

extended는 form의 데이터를 자바스크립트 object의 형식으로 준다.

설치를 해준다.

server.js로 가서

app.use("/", globalRouter);
app.use("/videos", videoRouter);
app.use("/users", userRouter);

거듭 강조 하지만 routes를 사용하기전에 이 middleware를 사용해야 한다.

middleware가 그 form을 이해하고 그것을 자바스크립트로 변형시켜줘서 사용 할수 있게 해주는 거다.

그걸 위해서는 middleware를 route를 사용하기전에 사용해야 한다.

app.use(express.urlencoded({ extended: true }));
app.use("/", globalRouter);
app.use("/videos", videoRouter);
app.use("/users", userRouter);

그래서 이렇게 써줘야 한다.

이게 뭘 나타내냐면 express application이 form의 value들을 이해할수 있도록 하고,

쓸 수 있는 자바스크립트 형식으로 변형 시켜 주는 것이다.

이제 새로고침해서 form에 새로 변경된걸 save해준 다음 console.log를 확인하면

잘 작동하는걸 알수 있다.

title을 받고 있다. 왜냐하면 name이 title이라 그렇다.

이제 const title = req.body.title; 를 할수 있다.

videoController.js에서

export const postEdit = (req, res) => {
  const { id } = req.params;
  const { title } = req.body;
  return res.redirect(`/videos/${id}`);
};

이렇게 변경해 주도록 한다.

지금 현재는 요상한 database를 쓰고 있기 때문에 그냥 사용 되지 않는다.

만약 video를 찾았다면 거기에 video.title = title은 작동 되지 않는다.

왜냐하면 자바스크립트에서는 그렇게 한다고 해서 database(array)가 업데이트 되지 않는다.

현재는 일단 작동 하는 방법으로 작성 해준다.

export const postEdit = (req, res) => {
  const { id } = req.params;
  const { title } = req.body;
  videos[id - 1].title = title;
  return res.redirect(`/videos/${id}`);
};

이렇게 해주면 잘 작동 한다. 업데이트도 잘 된다.

현재 이 상태는 mutation, javaScript, object의 작동 원리를 알아야 할수 있는거다.

현재는 중요한 부분이 아니니 넘어 가도록 한다.