Express - API adding a Comment - (정리 필요)

코멘트 작업을 해주는데 프론트 엔드 작업을 하기전에 백엔드 부터 해본다.

root를 설정해주러 routes.js에서 api part에 url 설정을 해주고 videoController에서  postAddComment컨트롤러를 만들고

(videoDeail컨트롤러에서 populate를 이용해 creator와 comments를 가져온다)

video, user를 이용해 comment를 만들고 넣어준다.

그리고 apiRouter에서 post방식으로 라우터 하나 만들어준다.

 

 

이제 템플릿에가서  코멘트 폼을 만들고 코멘트 리스트를 만들자.

그리고 이번에는 ajax를 통해 서버로 코멘트 정보를 보내고 받아오겠다.

프론트에서 작동할 addComment.js하나 만들고  submit 이벤트 핸들러를 하나만들어서

submit 이벤트가 발생하면 input의 벨류를 받아와  comment를 보내줄 함수에 보내준다.

인자를 받은 sendComment함수는 videoId를 location.href를 이용해 얻어서

axios를 이용해 보내준다. 그리고 comment.text를 넣어주자 creator 와 createAt.toLocaleString()으로 작성자와 시간도 넣어줬다.

 

 

자 이제 할 일은... fake로 새로고침이 없더라도 코멘트정보가 바로 뜰 수잇게 해주는 것이다~!~!

ok~~~ 자 해보자

약간의 수정사항도 있다.

 

먼저 컨트롤러 부분이다.

중요한 점은 status code가 200일때 유저네임과 작성 시간을 json파일로 응답해주는 것이다.

시간때문에 애를 좀 먹었는데... 기본적으로 mogno db는 ISO8601 DATE format을 쓰고있다.. 이걸 json으로 보내고...

프론트에서 변경하려고 하니까 에러가 뿜뿜이다ㅡㅡ;; 그래서 여기서 바로 변환해서 보냈더니.. 잘된다..

그리고 try catch 구문도 없앴다.. 이것도 return을 하게 되면 error가 ...ㅠㅠ

아무튼 이렇게 되고

 

front end로 와서

추가 된 부분은역시 조건문 이다.  여기서도 response.data때문에 애좀 먹었는데 내가 무지해서 생긴 문제였기에 pass

response의 data객체를 보면 앞서 보낸 json 데이터가 들어있다. 이걸 적당한 변수에 담아서

코멘트를 fake이지만 새로고침 없이 바로 보여 줄 수 있는 함수로 보내준다

그리고 각종 태그들을 만들고 append 와 prepend를 반복해서 뿌려주면~! 끝!

 아 조회수도 increaseNumber함수를 만들어서 실시간으로 올려줬다..

 

이렇게 쓰고보면 정말 아무것도 아닌데.. 혼자 끙끙대면서 ㅠㅠ 힘들었다... 3시간 삽질...

 

최후 videoDetail 은

 

 

css는 좀 손봐야겠다.. 이쁘게좀 꾸며야지..

 

아직 delete버튼 구현과 또한 이것도 클릭하면 해당 클릭한 유저가 작성자인지 확인하고 라우터에 연결한 다음에

삭제되도록 구현해야하고... 또 뭐 있을까 시간되면 프로필 사진도 옆에 집어 넣자...

일단 comment파트는 요까지하고 서버 올리는거 들어가야지..