본문 바로가기

Youtube Clone/API + AJAX

Comments

  • view와 마찬가지로 /api/id/comment 로 접근하면 comment를 증가시키도록 하자.
  • view와 다른 점은, comment 내용을 입력받으면 실시간으로 화면에 표시해야 한다는 것.
  • comment가 일반적인 res.render와 다른 점은, 새로운 페이지를 불러오지 않는다는 것.
  • 우선 bookDetail.pug에서 #을 이용해 add__Comment, book__comment-list 등에 Id를 부여한다.
  • 그리고 assets/js/addComments에서 getElementById 함수를 이용해 이들을 관리한다.

bookDetail.pug

  • 위에서 이름표를 달아놓은 #jsCommentNumber, #jsAddComment, #jsCommentList를 아래에서 관리한다.
  • addCommentForm은 submit을 기다리다가, 이벤트가 발생하면 handleSubmit을 호출한다.
  • event.preventDefault는 페이지가 새로고침 되는 것을 막아준다. 
  • 입력된 코멘트의 텍스트(value)를 sendComment로 보내주고, 다시 입력창을 ""로 초기화한다. 
  • sendComment는 /api/id/comment로 접속하고, addComment함수를 호출한다. 
  • addComment함수는 리스트에 항목을 추가하고, span 공간에 댓글 내용을 추가한다.
  • 그리고 댓글 수에 1을 더해준다. 

assets/js/addComments.js

  • sendComment 함수로 인해 /api/id/comment로 접속했을 때, apiRouter는 이를 알아채고 함수를 호출한다.
  • postAddComment 함수는 Book model의 comment에 새로 입력된 comment를 추가한다.  

bookController.js

'Youtube Clone > API + AJAX' 카테고리의 다른 글

Views  (0) 2019.09.26