댓글 수정 기능 만들기 TIL(20)

벌써 금요일이다..ㅋㅋㅋ 진짜 시간이 왜이렇게 빨리 가나 싶다. 역시 프로젝트의 힘이란...

일단 목요일 어제 까지 내가 해야 할 구성들을 다 끝내놓고 프로젝트에 부족한 부분을 팀원분들과 나눠서 마지막 과정을

해결하고 있다.

일단 이번 프로젝트의 필수 기능으로 CRUD가 들어가는데 여기서 댓글 수정 기능 맡아서 하게 되었다.

예전부터 한번 해보고 싶었던 기능이였고 저번프로젝트 후에 CRUD를 공부해보자고 계획을 잡고 있었던 참이라 공부한다 생각하고 시작을 했다.

쉬울줄 알았는데...그랬는데... 마음처럼 안됬다.

 

문제점 : 계속 오류가뜨는데  classList가 없다고 자꾸 떴다.

코드 중에

const cardBody = event.target.parentNode.parentNode;
  const commentText = cardBody.children[0];
  const commentInputP = cardBody.children[1];
  commentText.classList.add('noDisplay');
  commentInputP.classList.remove('noDisplay');

이런 부분이 있었는데 parentNode.parentNode =>이게 event.target의 부모+부모 요소안에 있는 모두를 선택한다.

children 등 .... 하 이부분이 너무 헷갈렸다. 지금은 어느 정도 이해가 된 상태이다 그래서 이 부분은 프로젝트가 끝나고나서

정리해서 블로그에 올려보려고한다.

잘 이용하면 대상을 가르칠때 좋을 꺼 같아서 공부를 해봐야겠다.

 

이 문제의 원인은

알고 보니까 이제 가르키고 있는 대상이 없어서 자꾸 classList를 할 수가 없다고 나온 것이였다...ㅎㅎ

팀장님과 함께 화면 공유하면서 대상을 조금씩 바꿨는데 금방 해결이 됬다. 왜 진작에 안되었던 것인가.

왠지 느낌이 싸했는데 저기서, 그래서 분명 몇번 바꿨는데.... 조금씩 경로를 잘못 지정했었나보다;;;😂

아직까지 코드를 읽는거에 미숙하니까 앞으로 천천히 하나씩 짚어가면서 하는 습관을 들여야겠다. ✅

 

그리고 이제 수정 버튼을 누르면 수정하는 창이input이 나오고 이제 수정버튼이 사라지고 수정한 내용이 저장되는 완료버튼이 떠야하는데 그 부분에서도 조금 애를 먹긴했다.

const udBtns = document.querySelectorAll('.editBtn, .deleteBtn');
 udBtns.forEach(udBtns => udBtns.classList.add('noDisplay'));

진짜ㅋㅋ 이 한줄만 있으면 해결 될 꺼를 ㅋㅋㅋㅋ 뭐가 그렇게 복잡하게 생각을 했는지

수정버튼을 누르면 실행되는 함수 마지막에 저 코드를 넣어주면 끝이였다.

성공 하고나서 개운~하긴한대 어이도 없긴했다;; 어느정도 단순하게 생각할 필요도 있는듯.. 무조건 어렵게 생각하지말자

 

일단 오늘 해야할 부분은 다 해결했고 원인과 결과를 다 알고 이제 발표준비만 내일 하면 될 꺼같다.

 

아 그리고 마지막으로 난 댓글수정 말고 리뷰를 적는 칸의 수정 부분도 다시 맡게되었다.

이 부분도 필수구현이라 해야해서  주말이 오기 전에 빨리 빨리 필수부분을 다 구현해서 완벽하게 준비를 마치고 싶다.

지금도 고군분투를 하고 있긴한대,,,ㅋㅋㅋ

이게 리뷰를 적고나서 수정아이콘을 누르면 아까와 같이 수정input이 떠서 다시 유저가 글을 수정하고 완료 버튼을 누르면

그 글이 저장이 되는 순서로 하고 있는데... 말은 쉽다 현실은 어렵고ㅠ

어쨋든 오늘 안에 끝내 보도록 목표를 잡아야겠다😎 이번주 마지막 TIL끝