Shigatsuel__Shigatsutube Cloning Youtube with VanillaJS and NodeJS Demo ShigatsuTube Preview Technology Stack Frontend Technology Where 01 Pug(Template) views 02 SCSS(CSS) assets 03 JavaScript views 04 AJAX(API) assets 05 Webpack(Module Bundler) static Backend Technology Where 01 NodeJS(Server) app.js 02 ExpressJS(Framework) app.js 03 MongoDB(DataBase) db.js 04 Mongoose(DataBase) db.js 05 Passpo..

유튜브 클론 코딩을 마무리하는 과정 중이었다. 배포할 준비를 하는 과정에서 보는 바와 같이 rm은 실행할 수 있는 명령이 아니라고 나온다. ?? 그럼 다른 사람들은 rm을 어떻게 쓴거지 ㅋㅋ 구글갓에게 물어보니 rm을 쓰기 위해 환경변수 설정을 해줘야 한다고 해서 똑같이 따라했다. 그래도 여전히 rm은 실행할 수 있는 명령이 아니라고 한다. 노마드 코더 슬랙에 있는 Kangdyu님에게 개인질문을 해보니 rm은 리눅스 전용이라 윈도우 전용 실행명령을 찾아야 한다고 한다. 띠용?! ㅋㅋㅋㅋ 너무 부끄러웠다. rm이 뭐하는 건지도 모르고 쓰려고 하니 윈도우에서 쓰는지 맥에서 쓰는지 당연히 모르지.... 다시 구글에서 윈도우에서 rm -rf와 같은 명령어가 무엇인지 검색하니... https://qastack.k..

저번 글에 이어서 comment / reply를 밑의 짤처럼 편집 버튼을 여러개 활성화 시키고 한참을 생각해보았다. 현재 상황은 마지막으로 클린한 댓글의 편집버튼이 활성화되는 상태이다. 잘 생각해보자. 내가 eidt버튼을 누르게 된다면(if) 그 때 CANCEL버튼과 SAVE버튼을 누를 수 있다. 로지컬 띵킹을 하는거야..! 그렇다면 if문 안에서 cancel 버튼과 save버튼을 조작을 해주면 되지 않을까? 지금 Edit버튼을 클릭하면(if문) 맨 밑에 캔슬버튼과 세이버버튼에 이벤트를 주었다. 그 말은 즉슨 이벤트 안에서 if문을 한 번 더 주면 Edit버튼을 누른다 -> CANCEL버튼을 누른다 -> 어떤 댓글의 CANCEL버튼인지 감지한다. -> 그 댓글의 CANCEL 기능을 수행한다!! 바로 Ev..

답글 2, 4번째 편집버튼을 눌렀는데 답글 5가 편집버튼을 활성화 시켰다. 이와 같이 이벤트 구역을 커멘트 컨테이너까지 넓혀주니 다행히 답글 2와 4의 편집기능도 활성화 되었다. But, 문제가 생겼다. 왠지 커멘트창이 잘 기능하지 못할 것 같다는 기분이 들었다. 그도 그런게 지금 나는 comment와 reply 로직이 거의 똑같이 동작하고 있다. 이러한 상황에서 과연 내가 reply의 편집 기능을 여러 개 활성화시킨다면? 또는 reply 말고도 comment 역시 똑같이 문제가 생기지 않을까..? 바로 시험에 들어갔다. 이런 식으로 답글편집기능을 여러개 활성화 시키고 cancel과 save가 따로따로 잘 작동하는지 검사해보았다. 먼저 save는 다행히도 이렇게 실행해도 문제 없이 따로따로 잘 동작했다...

유튜브 클론 진행 중 creator를 불러올 수 없다고 한다. 또한 하지도 않았는데 add-reply api를 불러왔다. 알고보니 전에 실험하다가 한 라우트에 res.render를 두 번 겹쳐서 설정해 준 것을 발견했다. 그랬더니 맨 처음 render해줬던 것을 javascript는 버리기로 결심하고 나중에 render설정한 것을 해주었다. 그러니 당연히 video.creator가 없는 게 당연하다.

유튜브 클론 코딩을 하는 과정 중에서 댓글의 답글 다는 기능을 하고 싶어졌다. 세세한 세팅에 대해서는 생략하도록 하겠습니다. 밑의 첨부사진은 기본 화면입니다. 먼저, 프론트엔드에서 axios를 통해 답글을 비동기식으로 받을 수 있게 했고, 백엔드에서 populate를 통해 video -> comments -> replies까지 접근할 수 있게 했다. 즉, video 모델안에 있는 comments배열 안의 replies의 값을 나는 받아오고 싶었다. video모델 안의 comments배열 comment모델안의 replies배열 마지막으로 reply의 스키마 형태입니다. 이 과정을 통해 videoDetail(템플릿)에서 답글들을 받아오고 싶었다. 하지만 서버를 동작시키면 다음과 같은 오류가 떴다. 이뭔씹....