<댓글 기능 구현>
// 댓글 목록보기
- 댓글 목록 보기는 게시믈 목록 보기와 비교하며 작업해야 한다.
- 댓글 목록을 불러올 때, 해당 게시글의 ID를 불러와야한다. (variables 같이 넣어주기)
- 불러온 데이터는 프리젠터로 넘어갈 있게 data로 지정
- 받아온 datas는 map으로 뿌려준다 (갯수는 백에서 정해준대로)
- map에 키 값을 줄 때 Index (XX)
- 타입스크립트 적용 관련 (비동기)
-
data는 처음에 undefined >>> 함수 실행하며 useQuery 작동 - 백으로 가서 데이터 받아오는 중.....없는 상태로 Return 실행..
(그래서 옵셔널 체이닝:보여줄 수 있는 것 먼저 보여주기 - 만약 동기였다면 하얀화면... 사용자 이탈함) >> 데이터 들어오면 뒤늦게라도 보여줌<-> 등록하기에서는 async await 사용 - Id 받아와야하니까 (동기방식)
// 댓글 삭제하기
- 프롬프트로 댓글 받아오기
- 어떤 게시물의 댓글인지 댓글의 아이디가 들어가야한다.
- 각 id = {el._id} 지정해주기 클릭하면 Id들어간다
- 마우스로 클릭하는 것이기 때문에 MouseEvetn<HTML
> - 재쿼리 - 쿼리와 variables 함께
// 댓글 등록하기
1. 주의할 점 textarea / input
- 클릭이 이상해 - evetn-bubbling / event-delegation
- 어디를 클릭해도 이벤트가 발생할 수 있게 하기 = onClick을 어디에 배치할까?
- 이벤트 전파를 통한 이벤트 위임
- 이벤트 버블링 : 자식에서 부모로 이벤트 전파 (아래-> 위)
- 이벤트 캡처링 : 부모에서 자식으로 이벤트 전파 (위->아래)
- event.target = 클릭한 태그
- event.currentTarget = 클릭 이벤트가 넘어갔을 때의 태그
- 이미 만들어 놓은 Library
라이브러리 (하나의 도구)
프레임워크 (라이브러리 여러개가 뭉쳐져 있는)
👍 라이브러리를 가지고 잘 조립해야한다 !
- 유명한 라이브러리 목록 알기 ---- > 없다면 만들 줄 알아야 함 (경력)
- 적절하게 사용하기 ( 시간 절약 & 버그 최소화 )
[https://ant.design/]
Tip > 좋아요 기능 구현시, id 값 주기가 쉽지 않음 -> 라우터 게시물 아이디? // 해볼 것
오늘공부를 돌아보며
주말에 나름 열심히?했던 포트폴리오 ......
댓글 삭제가 안되어서 주말에 완전히 끝내지는 못했었다.
척척 잘 하면 좋을텐데
반반무마니