Comment 1 (create)

댓글쓰는 칸을 만들어보겠다.

 

먼저 Video와 User처럼 Comment Model을 만들어주어야한다.

Comment.js

text와 createAt, owner, video를 만들어 주었다. 그리고 Video와 User도 comment와 연관이 되어있기에

수정해주어야 한다.

 

User.js

comments를 만들고 배열로 여러개의 Comment의 Id가 들어올 수 있도록 설정해주자

여기서 ref는 아래의 Comment의 값과 같은 값이 들어와야한다. ( 오타 Commnet 정정 Comment )

Video.js

 

Video Model도 많은 댓글이 달릴 수 있으므로 배열로 추가해준다.

watch.pug

watch.pug에서 댓글 form을 만들어주었다.

로그인 되어 있지 않으면 댓글 창이 보이지 않게 해주었다.

 

CommentSection.js를 만들고

거기에 기능을 추가해보자

 

button을 클릭하면 handleSubmit이 작동하도록 해주었다.

먼저 pug의 videoController에 저장해둔 video의 id값을 data-id에 저장해두어서 JS에서 dataset.id로 불러왔다.

그리고 text의 값과 함께 fetch를 통해서 back-end에 보내주도록 하였다.  body에 JSON.stringify()를 해주었는데.

 

내가 서버에 일반 obj를 보내고 싶지만 사실 js object를 보낼 수가 없다.
왜냐면 브라우저와 서버는 이걸 받아서 그냥 string으로 만들어버리기때문에 obj로 보내버리면

 

 obj.toString()한 것과 같이 
"[object Object]"로 인식을 해버린다.

 

따라서 body에서 obj를 보낼때는 JSON.stringify()를 이용하여 string화시켜서 보내줘야한다.

 

또한 여기서 멈추지말고 

 

우리는 express에게 text가 아니라  json을 보내고 있다고 이야기를 해주어야 한다
기본적으로 text인줄알아서 안적어주면 아무것도 못 읽어온다

 

headers : {
"content-Type":"application/json",}을 추가해줌으로써
우리는 express에게 이렇게 알려준다.

 

우리는 string을 보내고 있어 근데 string은 맞긴한데 사실은 json string이야
그러니까 json으로 다시 되돌려줘야 해

express.json() 미들웨어를 server.js에 추가해주자. 
express는 이런 string을 받아서 다시 js의 obj로 바꿔준다.
자동으로 json.parse()를해주는것이다.

즉우리는 JS OBJECT를 받아서 (만들고)
json.stringify()를통해 string으로 바꿔서 보낼 수 있도록 했고
이게 서버에 도착하면 이 string을 JS object로바꿔서( express.json()이 해줌)
req.body로 읽어올 수 있음

이게 back 과 front간에 정보를 보내는 방법이다.

 

근데 궁금증이 들었다. 브라우저는 기본적으로 text로 받아온다고 생각하잖아?

그럼 header생략해버리고 JSON.stringify()해서 string화시켜 보내버려 그럼 되지 않아?

그리고 express.json()미들웨어가 아닌 express.text()미들웨어를 사용하여 텍스트가 오면 읽어 올 수 있는 미들웨어로 바꿔주고

 

api handler에서 직접 그 텍스트를 JSON.parse()해주면 될거 같은데?? 라는 생각이 들었다. 이렇게 해도 결과적으로 잘

객체로 변환할 수 있다는 것을 확인했다. 근데 굳이 이렇게 까지 할 필요는 없다고 생각한다 !

 

아무튼 front에서 back으로 text의 값과 videoId을(url에) 보내었다.

먼저 router를 만들어 주었다.

apiRouter.js

videoController.js

받아온 text의 값과 id의 값을 각각 저장하고

현재 로그인 되어 있는 사용자의 id의 값도 ownerId에 저장해둔 뒤 먼저 comment를 만들어주자.

owner에 값에ownerId의 값을 적고 video의 값에 url에서 가져온 id의 값을 적어주었다.

user와 video에도 comments배열에 comment의 id값을 적어주어야 한다.

따라서 user와 video도 id값을 다 알고 있으니 findById를 통해 값을 가져온 후 push를 해준 뒤 save()를 해주면

video와 user에도 comment의 id가 들어있다. 이를 통해 각 각 연결 되어있는 것을 확인할 수 있다

그리고 return을 할 때 json()에 객체를 담아 보내면 아까 적었던 fetch의 값에 json으로 값이 전달이 된다.

따라서 위와 같이 수정을 해주었다.

 

먼저 text에 아무 값도 입력이 되지 않으면 그냥 return해버린다.

createComment handler에서 전달한 값을 response에 받기 위해서 await를 사용하였다. await를 사용하기 위해선 함수에 async를 적어주어야 한다. response에는 다양한 값이 저장되어있다. response의 body안에 newCommentId의 값이 들어있는데

이를 활용하기 위해선 response.json()을 해주면 newCommnetId값을 사용할 수 있게 된다.

addComment함수를 만들어 새로만든 comment의 값을 우리의 브라우저에 나타나도록 fakeComment를 만들어주자.

여기에 comment의 id값을 같이 넣어 나중에 삭제할 수 있도록 하였다. addComment는 다음 글에서 이어나가겠다.