[Youtube 클론코딩] POST 기능 연습하기

Fake Database로 POST 연습하기.

POST 방식은 주소창의 쿼리 스트링을 이용하지 않게 데이터를 주고받는 방식으로 사전 작업이 필요하다.

이를 이해하기 위해서 단순 배열을 이용해 연습해보자.

Video 제목 편집 기능 구현

/src/views/mixins/video.pug

먼저 홈 화면에서 각 비디오 항목의 제목을 누르면 해당 페이지로 넘어갈 수 있도록 구성하자

home.pug의 비디오 항목은 video.pug를 mixin으로 사용하므로 mixin.pug를 다음처럼 수정하자.

여기서 주의할 점은, 각 태그의 Attribute에 변수를 사용할 때는 PUG의 보간법이 아닌, JS의 보간법을 사용해야 한다.

 

/src/views/watch.pug

비디오 수정기능을 실행할 Edit 페이지를 연결하는 링크를 만들자

3항 연산자를 적절히 활용하면 디테일이 살아난다.

/src/views/edit.pug

form 태그를 이용해 비디오 수정 기능 UI를 제작한다.

form은 action과 method등의 속성이 있는데,

action은 form에서 입력한 데이터를 action에 입력한 주소로 보내는 것이고,

method는 보낼 때의 방식을 get 또는 post로 설정할 수 있다. (대문자로 적는다)

 

만약 method를 get으로 보내면, 도메인 주소 뒤에 쿼리스트링을 생성해서 페이지를 이동한다.

name 속성이 있는 input의 value를 name=value 형태로 보낸다

POST 사용하기

POST 기능을 사용하기 위해선 먼저 설정해 주어야 하는 게 있다.

Express 4.x - API Reference (expressjs.com)

Express 4.x - API Reference

form의 데이터를 post로 전송하려면, form의 데이터를 브라우저가 해석할 수 있는 JS 코드로 변환해주어야 한다.

그 변환을 담당하는 게 express의 urlencoded() 라는 미들웨어이다.

이를 server.js에서 router 선언부 위에 선언해주면 사전 준비가 완료된다.

router로 페이지를 로딩하기 전에 변환이 이뤄져야 되므로 router 선언부 위에 작성해주자.

 

이후 post를 이용해 데이터를 넘겨주어야 하는데 이는 router에서 다음처럼 설정하면 된다.

get 말고 post를 이용해 유사하게 작성한다.

그런데 같은 주소를 두번 참조하게 되므로, 오류를 줄이기 위해 다음처럼 코드를 작성하면 더 좋다.

 

postEdit라는 새로운 controller를 사용하므로 controller.js에서 해당 함수를 제작해주자.

form에서 express.urlencoded()를 이용해 JS 코드로 변환하여 보낸 항목은 req.body에 담겨져 보내진다.

아직은 단순 배열을 데이터베이스로 사용하므로 위처럼 코드를 작성해주면, Video의 제목이 바뀐다.

이후 redirect() 메소드를 이용해 원래 페이지로 되돌아가면 기능 완성이다.