Pug: mixin을 무시하면 생기는 일(Frontend: axios / Backend: populate)

 

유튜브 클론 코딩을 하는 과정 중에서
댓글의 답글 다는 기능을 하고 싶어졌다.

세세한 세팅에 대해서는 생략하도록 하겠습니다.

밑의 첨부사진은 기본 화면입니다.

먼저, 프론트엔드에서 axios를 통해 답글을 비동기식으로 받을 수 있게 했고, 백엔드에서 populate를 통해 video -> comments -> replies까지 접근할 수 있게 했다.
즉, video 모델안에 있는 comments배열 안의 replies의 값을 나는 받아오고 싶었다.

video모델 안의 comments배열

comment모델안의 replies배열

마지막으로 reply의 스키마 형태입니다.
이 과정을 통해 videoDetail(템플릿)에서 답글들을 받아오고 싶었다.

하지만 서버를 동작시키면 다음과 같은 오류가 떴다.

이뭔씹..? undefined는 replies가 없다는 뜻인데 없긴 왜 없어..; 잘 찾아봐 Node야 ㅠㅠ
(결국 오류를 찾으러 떠남)

가장 먼저 확인해 본 곳은 MVC에서 C에 해당하는 videoController의 videoDetail 컨트롤러입니다.
이중.. 삼중 populate까지 써가며 replies배열을 받고 싶은 간절한 마음입니다.
처음에는 populate를 잘못 써서 replies를 못 받아오나 했으나 위의 캡처처럼 첫번째 커멘트의 답글들을 전부 출력시키도록 했다.
결과는 성공적으로 다 받아왔다.
혹시나 Array populate에 관해 알고싶다면 https://github.com/Automattic/mongoose/issues/1381

Populate nested refObject in array · Issue #1381 · Automattic/mongoose

참고하시길 바랍니다..

일단 데이터베이스에는 문제가 없다는 것이 확인되었다.

그렇다면 나머지 문제는 딱 한 곳 뿐인데..?

템플릿을 확인해봐야 한다.
내 템플릿은 현재 videoDetail이라는 view가 있고 videoDetail에 mixin commentBlock을 맨 밑에 추가 -> mixin commentBlock에서 맽 밑에 replyBlock을 추가한 형태이다.

1)videoDetail

2) commentBlock

replyBlock은 굳이 필요없을 것 같다.

눈치채셨을지 모르시겠지만 하나가 빠져있네요 ㅠ.ㅠ

 

 

videoDetail에 commentBlock을 잘 보면 comment에서 replies배열을 불러올거면서 comment.replies를 추가하지 않은 모습이다.
이것을 찾는데 한참을 헤맸다.
찾고나서 설마..라는 생각이 들었다.

replies: comment.replies를 추가하자마자 바로 해결되었다!

mixin을 제대로 이해하고 쓰지 않은 탓에 찾는데 수시간을 들였다.
생각해보면 videDetail에서부터 mixin으로 연결되어있는 구조인데 videoDetail에서 populate를 썻으면 videoDetail부터 오류를 찾아봤어야했다.