2021-05-06 TIL

2021-05-06 TIL

• 오늘 한 것
  1. 학원 대면수업 (15:30~22:00) 프로젝트 기간
  2. 어드민 게시판 관리 오류 수정 - 백엔드 팀원이 만들어놓은 게시판 관리의 CRUD 기능이 대부분 작동하지 않아서 오늘은 그것들을 고쳐나갔다. qna 관리에서는 해당 게시글의 댓글 리스트를 볼 수 있는 모달창을 화면에 출력하고 싶었다. 모달창 클릭시 ajax 요청으로 댓글 리스트를 불러와서 데이터 저장 후 select box의 onChange 이벤트로 하나씩 꺼내어 해결했다. 또, 리스트의 각각 댓글 등록 버튼을 클릭하여 어드민 페이지에서도 qna 게시판에 댓글을 달 수 있도록 했는데, 문제는 어느 버튼이 눌렸는지 id 값을 알아야한다는 것이었다. 처음에 동적으로 리스트 생성시 서버에서 받은 데이터의 id값을 버튼의 onclick 이벤트를 실행할 메서드의 매개변수로 넣어서 해결했다.
  3. Youtube Clone Project with React, Node.js - 지금껏 TIL에 포스팅은 안했지만 Auth Boiler-Plate 코딩 강의를 끝낸 뒤 이어서 Node.js와 React를 활용한 유튜브 클론코딩 강의를 수강하고 있었다. 인증 관련은 미리 만들어놓은 boiler-plate를 사용했고 drop-zone에 동영상 업로드 시 multer로 노드 서버와 mongoDB 저장 후 card layout에 출력되는 기능과 ffmpeg를 사용한 썸네일 생성, 비디오 디테일 페이지의 구독 기능 등을 배웠다. 오늘은 댓글 기능을 배웠다. 일반 댓글과 답글형 댓글을 구현했는데 하위 컴포넌트들에서 댓글 입력시 부모 컴포넌트의 state에 저장되도록 setState를 실행할 메소드를 선언 후 props로 전달하여 하위 컴포넌트에서 사용하였다. 또한 처음 렌더링시 일반 댓글을 먼저 보이게 하고 답글형 댓글은 특정 버튼을 클릭하여 보이게 하기위해 댓글 렌더링시 데이터에 받는사람 (responseTo)이 있는 경우와 없는 경우의 분기를 나눠서 해결했다.

• 내일 할 것
  1. 학원 대면수업 (15:30~22:00) 프로젝트 기간
  2. 팀 프로젝트 error 랜딩 페이지 작성
  3. 테스트 실행
  4. Youtube Clone Project with React, Node.js

• 끝으로

이제 팀 프로젝트는 개발 막바지에 접어들었고 어느정도 완성의 고지가 눈 앞에 다가왔다. 아직 ppt 제작, 시연 영상 편집 등 해야할 일이 남았지만 우선은 완벽한 상태로 배포를 하기 위해 테스트를 진행하는게 먼저다.

오늘의 한 줄 총평 : 이제 곧 완성